Transfer
Two lists and four move buttons. > and >> are brand primary. < and << are secondary outline. Search is on by default. On narrow screens the panels stack and the buttons sit in a row.
Demos
Columns
Header counts are checked / total. Disabled rows stay put. Search filters the visible labels and does not remove keys.
id, name
Empty target
Search off, titles, disabled
Inside a form item
API
Properties
| Name | Type | Default | Notes |
|---|---|---|---|
value / target-keys | key[] | [] | Keys in the target list |
options / data | TransferOption[] | [] | { label, value or key, disabled? } |
source-title / target-title | string | localized | 來源 / Source, 目標 / Target |
titles | [string, string] | — | Overrides the two titles |
show-search / filterable | boolean | true | Either one can turn search off |
source-filterable / target-filterable | boolean | inherit | |
filter-placeholder | string | localized | 搜尋 / Search |
size | sm | md | lg | md | Row and button height 28 / 34 / 40 |
disabled | boolean | false | Opacity 0.5 |
Events
| Name | Detail |
|---|---|
change, update:value | { value, targetKeys, direction: 'source' | 'target', movedKeys } |
select | { sourceSelectedKeys, targetSelectedKeys } |
search | { direction, value } |
direction is the list the keys moved to.
Parts
root, source-panel, target-panel, header, title, count, search, list, item, checkbox, empty, actions, button.
Slots
source-title, target-title, source-empty, target-empty. Empty copy defaults to「暫無資料」.
Virtual scroll, one-way mode, and custom item rendering are follow-ups.