Radix Vue

外観

編集可能 ​

アルファ
ロード時に静的なテキストとしてレンダリングされる、1行のテキストを編集するために使用される入力フィールドを表示します。編集インタラクションがトリガーされると、テキスト入力フィールドに変換されます。
'Radix Vue'を編集するにはクリックしてください。
vue
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'radix-vue'
</script>

<template>
  <div class="w-[250px]">
    <EditableRoot
      v-slot="{ isEditing }"
      default-value="Click to edit 'Radix Vue'"
      placeholder="Enter text..."
      class="flex flex-col gap-4"
      auto-resize
    >
      <EditableArea class="text-white w-[250px]">
        <EditablePreview />
        <EditableInput class="w-full placeholder:text-white" />
      </EditableArea>
      <EditableEditTrigger
        v-if="!isEditing"
        class="w-max inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      />
      <div
        v-else
        class="flex gap-4"
      >
        <EditableSubmitTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
        <EditableCancelTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-red9 text-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-red10 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
      </div>
    </EditableRoot>
  </div>
</template>

機能 ​

  • 完全なキーボードナビゲーション
  • 制御可能または非制御可能
  • フォーカスは完全に管理されています

インストール ​

コマンドラインからコンポーネントをインストールします。

sh
$ npm add radix-vue

構成 ​

すべての部品をインポートして組み合わせてください。

vue
<script setup>
import {
  EditableArea,
  EditableCancelTrigger,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  EditableRoot,
  EditableSubmitTrigger
} from 'radix-vue'
</script>

<template>
  <EditableRoot>
    <EditableArea>
      <EditablePreview />
      <EditableInput />
    </EditableArea>
    <EditableEditTrigger />
    <EditableSubmitTrigger />
    <EditableCancelTrigger />
  </EditableRoot>
</template>

APIリファレンス ​

ルート ​

編集可能コンポーネントのすべての部品を含みます。

プロパティデフォルト型
activationMode
'focus'
'dblclick' | 'focus' | 'none'

編集可能フィールドの有効化イベント

as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

autoResize
false
boolean

編集可能フィールドが自動的にサイズ変更されるかどうか

defaultValue
文字列

編集可能フィールドのデフォルト値

dir
'ltr' | 'rtl'

該当する場合のカレンダーの読み取り方向。
省略された場合、グローバルにConfigProviderから継承するか、LTR（左から右）の読み取りモードを想定します。

disabled
false
boolean

編集可能フィールドが無効になっているかどうか

id
文字列

フィールドのID

maxLength
数値

許可される最大文字数

modelValue
文字列

編集可能フィールドの値

name
文字列

フィールドの名前

placeholder
'テキストを入力...'
文字列 | { edit: 文字列; preview: 文字列; }

編集可能フィールドのプレースホルダー

readonly
boolean

編集可能フィールドが読み取り専用かどうか

required
false
boolean

trueの場合、所有するフォームを送信する前にユーザーが値を設定する必要があることを示します。

selectOnFocus
false
boolean

フォーカスされたときに入力内のテキストを選択するかどうか。

startWithEditMode
boolean

編集モードをアクティブにして開始するかどうか

submitMode
'blur'
'blur' | 'none' | 'enter' | 'both'

編集可能フィールドの送信イベント

Emitペイロード
submit
[value: 文字列]

値が送信されたときに呼び出されるイベントハンドラー

update:modelValue
[value: 文字列]

モデル値が変更されるたびに呼び出されるイベントハンドラー

update:state
[state: 'cancel' | 'submit' | 'edit']

編集可能フィールドの状態が変更されたときに呼び出されるイベントハンドラー

スロット（デフォルト）ペイロード
isEditing
boolean

編集可能フィールドが編集モードかどうか

modelValue
文字列 | 未定義

編集可能フィールドの値

isEmpty
boolean

編集可能フィールドが空かどうか

submit

編集可能の値を送信する関数

cancel

編集可能の値をキャンセルする関数

edit

編集可能を編集モードに設定する関数

メソッド型
submit
() => void

編集可能の値を送信する関数

cancel
() => void

編集可能の値をキャンセルする関数

edit
() => void

編集可能を編集モードに設定する関数

エリア ​

編集可能コンポーネントのテキスト部分を格納します。

プロパティデフォルト型
as
'div'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

データ属性値
[data-readonly]読み取り専用の場合に存在します
[data-disabled]無効になっている場合に存在します
[data-placeholder-shown]プレビューが表示されている場合に存在します
[data-empty]入力が空の場合に存在します
[data-focus]編集可能フィールドにフォーカスがある場合に存在します。[data-focused]に置き換えられる予定です。
[data-focused]編集可能フィールドにフォーカスがある場合に存在します

入力 ​

編集可能コンポーネントの入力を格納します。

プロパティデフォルト型
as
'input'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

データ属性値
[data-readonly]読み取り専用の場合に存在します
[data-disabled]無効になっている場合に存在します

プレビュー ​

編集可能コンポーネントのプレビューを格納します。

プロパティデフォルト型
as
'span'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

編集トリガー ​

編集可能コンポーネントの編集トリガーを格納します。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

送信トリガー ​

編集可能コンポーネントの送信トリガーを格納します。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

キャンセルトリガー ​

編集可能コンポーネントのキャンセルトリガーを格納します。

プロパティデフォルト型
as
'button'
AsTag | コンポーネント

このコンポーネントがレンダリングされる要素またはコンポーネント。asChildで上書きできます。

asChild
boolean

子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。

詳細はコンポジションガイドをご覧ください。

アクセシビリティ ​

キーボード操作 ​

キー説明
Tab
フォーカスが編集可能フィールドに移動すると、activation-modeがフォーカスに設定されている場合、編集モードに切り替わります。
Enter
submit-modeがenterまたはbothに設定されている場合、変更を送信します。
Escape
フォーカスが編集可能フィールドにある場合、変更をキャンセルします。