Transfer

2つのリスト間でアイテムを移動させる転送コンポーネントです。権限の割り当てやカテゴリの移動に使用します。

Basic

jui-transfer の最も基本的な使用例です。

source-title と target-title でパネルのタイトルを設定できます。

show-search を有効にすると、各パネルに検索ボックスが表示されます。

disabled で全体を無効にできます。

WAI-ARIA:
- 各パネルには適切な role と aria-label が設定されています。
- 移動ボタンには aria-label（move-left-label / move-right-label）でラベルを設定できます。
キーボードナビゲーション:
- Tab で各パネルや操作ボタン間を移動できます。
- Space でチェックボックスを切り替えられます。
- Enter で移動ボタンを実行できます。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-border, --jui-color-surface, --jui-color-brand 等）を参照して描画されます。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Flexbox	レイアウト制御	29+	28+	9+	Baseline 2015
CSS 変数 (`var()`)	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`dataSource`	`data-source`	ソースデータ（JSON文字列 or 配列）	`TransferItem[] \| string`	`'[]'`
`disabled`	`disabled`	全体の無効状態	`boolean`	`false`
`moveLeftLabel`	`move-left-label`	左移動ボタンのラベル	`string`	`'Move left'`
`moveRightLabel`	`move-right-label`	右移動ボタンのラベル	`string`	`'Move right'`
`searchPlaceholder`	`search-placeholder`	検索プレースホルダー	`string`	`'Search'`
`showSearch`	`show-search`	検索ボックスの表示	`boolean`	`false`
`sourceTitle`	`source-title`	ソース列タイトル	`string`	`'Source'`
`targetKeys`	`target-keys`	ターゲットキー（JSON文字列 or 配列）	`string \| string[]`	`'[]'`
`targetTitle`	`target-title`	ターゲット列タイトル	`string`	`'Target'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	転送時に発火	`CustomEvent<{ targetKeys: string[]; direction: "left" \| "right"; moveKeys: string[]; }>`
`juiSearch`	検索時に発火	`CustomEvent<{ direction: "left" \| "right"; value: string; }>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS