Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
转移列表输入非常适合最终用户需要从选项列表中选择和排序多个值的情况。在这个例子中,我们允许最终用户从一组客人中选择,并将他们移动到 VIP 列表:
在本节中,我们将介绍如何复制上面的“客人 vs VIP”示例的基础知识。
下面是一个带有最少必需属性的转移列表输入示例。如您所见,有两个列表框:源列表框和目标列表框。源列表框将包含选项列表,目标列表框将包含所选选项:
让我们添加一些标签属性,以便清楚地向最终用户说明如何使用转移列表输入。我们将添加一个 label
属性来解释指令给用户,以及 source-label
和 target-label
属性来指示哪个列表框是源,哪个是目标:
在这种状态下,没有传递选项也没有选择值,我们可以通过设置 source-empty-message
和 target-empty-message
属性向用户显示自定义消息:
options
属性可以接受三种不同格式的值:
value
和 label
键的对象数组'A', 'B', 'C'
{ a: 'A', b: 'B', c: 'C' }
让我们继续用一系列客人的名字填充转移列表的选项:
传输列表输入的 值 是一个数组。从源列表中选中的选项值将被追加到数组中。为了在下面的示例中显示值的变化,让我们将传输列表输入包裹在一个 FormKit 表单中,将传输列表输入的名称设置为 vips
,并在一个 <pre>
标签中显示表单本身的值(如果你不熟悉 FormKit 表单,你可以在这里阅读更多信息):
传输列表输入可以通过在 transferlist
本身或包裹的 form
或 group
上设置 value
属性来预先填充值。请记住,你传递给 value
属性的值需要与你的选项列表中的值的键匹配:
通过设置 searchable
属性,可以使传输列表输入具有搜索功能。在这个示例中,我们将设置 searchable
属性,并为搜索输入设置一个 placeholder
属性:
传输列表输入将使用其自己的内部搜索功能来过滤选项。你可以通过为 filter
属性提供你自己的函数来替换这个搜索功能。你的函数将接收两个参数,正在迭代的选项和当前的搜索值:
默认情况下,传输列表输入会在选择后清除搜索输入。你可以通过将 clear-on-select
属性设置为 false
来改变这种行为:
通过设置 max
属性,可以限制传输列表输入的最大选中值数量。就这个示例而言,让我们将 max 属性设置为 2,以限制可以选择的 VIP 数量:
默认情况下,转移列表输入会在点击时添加或移除选项。你可以通过设置 transfer-on-select
属性为 false
来改变这种行为。现在,转移列表将表现得更像传统的转移列表:
这里我们有一个转移列表输入,它从一个异步函数加载其选项。该函数在组件挂载时被调用,随后选项被加载到源列表框中:
现在假设我们的 API 请求没有获取到我们需要的所有选项,而是返回了一个分页响应。转移列表输入可以通过对异步函数进行少量配置来处理分页。
当将 options 属性指定为一个异步函数时,该函数将会被调用,并将 FormKit 上下文对象作为其第一个参数。这个上下文对象包含一个 page
属性(我们尝试加载的当前页面),它由转移列表输入跟踪,并且 hasNextPage
,这是一个回调函数,我们可以用它来告诉转移列表还有更多选项需要加载:
转移列表输入也可以在用户搜索时异步加载选项。在这个例子中,我们将重新添加 searchable
属性,并将 getGuests()
更改为 searchGuests()
。当用户搜索时,searchGuests()
现在将被调用,并传入与之前相同的上下文对象,但这次,我们将仅解构 search
属性。此外,我们将修改 getGuests()
以仅在提供搜索值时返回客人:
转移列表输入还提供了一个 optionLoader
属性,允许你重新加载不在选项列表中的值。在这个例子中,我们将为转移列表提供一个初始值(一个客人 ID),并将 optionLoader
指定为一个函数,该函数将向 API 发出请求以获取单个客人数据:
请注意,在上面的例子中,optionLoader 函数 getGuest
被传递了两个参数:所选选项的值(在这种情况下,是电影 ID)和 cachedOption
。cachedOption
用于防止不必要的查找;如果 cachedOption
不是 null
,这意味着所选选项已经被加载,你可以直接返回 cachedOption
。
您还可以使用 optionLoader
来获取选定值上未在选项列表中的额外数据。在这个例子中,选择一个选项后,我们将执行查找以加载所选客人的年龄:
就像任何其他FormKit输入一样,传输列表输入允许您使用插槽来自定义其标记。
现在我们正在加载选定值的额外数据(所选客人的年龄和电子邮件地址),让我们使用 target-option
插槽来自定义所选值的外观:
传输列表输入可以用来创建一个排名列表,让我们用最伟大的NBA球员来做这件事:
Prop | Type | 默认 | 描述 |
---|---|---|---|
debounce | number | 200 | 对选项函数的调用进行去抖动的毫秒数。 |
options | any | [] | 用户可以从中选择的选项列表。 |
filter | function | null | 用于对静态选项应用您自己的自定义过滤函数。 |
option-loader | function | null | 用于初始化值的水合作用,或执行额外请求以加载所选选项的更多信息。 |
source-empty-message | string | undefined | 当没有选项显示时呈现一条消息。 |
target-empty-message | string | undefined | 当没有值显示时呈现一条消息。 |
max | number | undefined | 限制可以选择的选项数量。 |
clear-on-select | boolean | true | 选择一个选项后清除搜索输入(仅适用于不通过函数加载的选项)。 |
searchable | boolean | false | 启用搜索输入。 |
source-label | string | undefined | 为源列表呈现一个标签。 |
target-label | string | undefined | 为目标列表呈现一个标签。 |
transfer-on-select | boolean | true | 自动将选定的选项转移到目标列表。如果设置为false,将呈现向前传输和向后传输按钮。 |
显示 通用 props | |||
config | Object | {} | 提供给 input 的节点和此输入的任何后代节点的配置选项。 |
delay | Number | 20 | 在调度 commit hook 前,输入值的去抖动毫秒数。 |
dirtyBehavior | string | touched | 确定此输入的“dirty”标志设置方式。可以设置为 touched 或 compare — 默认为 touched ,性能更好,但无法检测表单是否再次匹配其初始状态。 |
errors | Array | [] | 要在此字段上显示的错误消息的字符串数组。 |
help | String | '' | 帮助文本与输入关联的文本。 |
id | String | input_{n} | 输入的唯一标识符。提供一个 id 还可以全局访问输入的节点。 |
ignore | Boolean | false | 防止将输入包含在任何父级(组、列表、表单等)中。在仅用于 UI 而不是实际值的情况下非常有用。 |
index | Number | undefined | 如果父级是列表,允许在给定索引处插入输入。如果输入的值未定义,它将继承该索引位置的值。如果它有一个值,它将在给定索引处将其插入到列表的值中。 |
label | String | '' | 与输入关联的 label 元素的文本。 |
name | String | input_{n} | 输入的名称,在数据对象中唯一标识。在一组字段中应该是唯一的。 |
parent | FormKitNode | contextual | 默认情况下,父级是包装组、列表或表单,但此属性允许显式分配父级节点。 |
prefix-icon | String | '' | 指定放置在 prefixIcon 部分的 图标。 |
preserve | boolean | false | 在输入卸载时,在父组、列表或表单上保留输入的值。 |
preserve-errors | boolean | false | 默认情况下,使用 setErrors 在输入上设置的错误会在输入时自动清除,将此属性设置为 true 可以保留错误,直到明确清除为止。 |
sections-schema | Object | {} | 一个包含部分键和模式部分值的对象,其中每个模式部分应用于相应的部分。 |
suffix-icon | String | '' | 指定放置在 suffixIcon 部分的 图标。 |
type | String | text | 要从库中渲染的输入类型。 |
validation | String, Array | [] | 要应用于输入的 验证 规则。 |
validation-visibility | String | blur | 确定何时显示输入的验证失败规则。有效值为 blur 、dirty 和 live 。 |
validation-label | String | {label prop} | 确定在验证错误消息中使用的标签,默认情况下,如果可用,则使用 label 属性,否则使用 name 属性。 |
validation-rules | Object | {} | 附加的自定义验证规则,可用于验证 prop。 |
value | Any | undefined | 为输入和/或其子元素提供初始值。不是响应式的。可以种子 整个组(表单)和列表。 |
您可以使用该部分的“键”来定位输入的特定部分,这样您就可以修改该部分的类、HTML(通过 :sections-schema
)或内容(通过插槽)。在这里阅读更多关于部分的信息。
Section-key | 描述 |
---|---|
fieldset | 一个作为转移列表输入的根元素的fieldset元素。 |
legend | 一个渲染标签的legend元素。 |
source | 一个包含sourceHeader、sourceControls和sourceListItems部分的div元素。 |
sourceHeader | 一个包含sourceHeaderLabel和sourceHeaderItemCount部分的div元素。 |
sourceHeaderLabel | 一个渲染sourceLabel属性的label元素。 |
sourceHeaderItemCount | 一个渲染源列表中的项目数量和选中项目数量的span元素。 |
sourceControls | 一个包含sourceSearchINput和sourceSearchClear部分的div元素。 |
sourceSearch | 一个包含sourceSearchInput和sourceSearchClear部分的div元素。 |
sourceSearchInput | 一个用于搜索的文本输入元素。 |
sourceSearchClear | 一个清除搜索输入的按钮元素。 |
closeIcon | 用于包含清除搜索输入图标的span元素。 |
sourceListItems | 一个包含sourceListItems的ul元素。 |
sourceEmptyMessage | 一个包含emptyMessageInner部分的li元素。 |
emptyMessageInner | 一个渲染提供的空消息文本的span元素。 |
sourceListItem | 一个为sourceListItems部分包含sourceOption部分的li元素。 |
selectIcon | 当sourceListItem被设置为选中时,一个渲染选中图标的span元素。 |
sourceOption | 一个渲染选项标签的div元素。 |
sourceLoadMore | 一个包含loadMoreInner部分的li元素。 |
loadMoreInner | 一个渲染加载图标的span元素。 |
loaderIcon | 当加载发生时,一个输出图标的span元素。 |
transferControls | 一个包含transferButtonForwardAll、transferButtonForward、transferButtonBackward和transferButtonBackwardAll部分的div元素。 |
transferButtonForwardAll | 一个将所有选项转移到目标列表的按钮元素。 |
transferButtonForward | 一个将选中的选项转移到目标列表的按钮元素。 |
transferButtonBackward | 一个将选中的选项转移到源列表的按钮元素。 |
transferButtonBackwardAll | 一个将所有选项转移到源列表的按钮元素。 |
controlLabel | 一个渲染控制标签的span元素。 |
fastForwardIcon | 一个渲染快进图标的span元素。 |
moveRightIcon | 一个渲染向右移动图标的span元素。 |
moveLeftIcon | 一个渲染向左移动图标的span元素。 |
rewindIcon | 一个渲染倒带图标的span元素。 |
target | 一个包含targetHeader、targetControls和targetListItems部分的div元素。 |
targetHeader | 一个包含targetHeaderLabel和targetHeaderItemCount部分的div元素。 |
targetHeaderLabel | 一个渲染targetLabel属性的label元素。 |
targetHeaderItemCount | 一个渲染目标列表中的项目数量和选中项目数量的span元素。 |
targetListItems | 一个包含targetListItems的ul元素。 |
targetEmptyMessage | 一个包含emptyMessageInner部分的li元素。 |
targetListItem | 一个为targetListItems部分包含targetOption部分的li元素。 |
targetLoadMore | 一个包含loadMoreInner部分的li元素。 |
显示 通用 section keys | |
outer | 最外层的包装元素。 |
wrapper | 标签和输入周围的包装器。 |
label | 输入的标签。 |
prefix | 默认情况下没有输出,但允许直接在输入元素之前放置内容。 |
prefixIcon | 输出在前缀部分之前放置一个图标的元素。 |
inner | 实际输入元素周围的包装器。 |
suffix | 默认情况下没有输出,但允许直接在输入元素之后放置内容。 |
suffixIcon | 输出在后缀部分之后放置一个图标的元素。 |
input | 输入元素本身。 |
help | 包含帮助文本的元素。 |
messages | 包装所有消息的容器。 |
message | 包含消息的元素(或多个元素) - 最常见的是验证和错误消息。 |
所有 FormKit 输入都是考虑到以下可访问性因素而设计的。通过在此处提交可访问性问题,帮助我们不断改进所有人的可访问性:
部分键 | 属性 | 默认 | 描述 |
---|---|---|---|
fieldset | role | presentation | 向辅助技术表明此元素的功能为展示。 |
aria-describedby | 将元素与描述关联起来,帮助屏幕阅读器。 | ||
sourceHeader | role | presentation | 向辅助技术表明此元素的功能为展示。 |
sourceHeaderLabel | for | 将标签与输入元素关联。用户可以点击标签来聚焦输入或切换状态。 | |
sourceHeaderItemCount | role | presentation | 向辅助技术表明此元素的功能为展示。 |
aria-label | 提供一个可访问的名称。 | ||
sourceSearchInput | role | searchbox | 向辅助技术表明此元素的功能为搜索框。 |
aria-label | 提供一个可访问的名称。 | ||
sourceSearchClear | aria-label | 提供一个可访问的名称。 | |
sourceListItems | tabindex | -1 or 0 | 通过将其设置为-1(当可搜索或没有源选项时)或0(其他情况时)来优先考虑键盘焦点顺序。 |
aria-activedescendant | 管理焦点到当前活动的后代元素。 | ||
role | listbox | 向辅助技术表明此元素的功能为列表框。 | |
aria-multiselectable | true | 表明它允许同时选择多个项目。 | |
aria-roledescription | 提供此元素角色的描述。 | ||
sourceListItem | aria-selected | 表明此元素当前被选中。 | |
role | option | 向辅助技术表明此元素的功能为选项。 | |
sourceLoadMore | tabindex | -1 | 通过将其设置为-1来优先考虑键盘焦点顺序。 |
aria-selected | false | 表明此元素从未被选中。 | |
sourceEmptyMessage | role | presentation | 向辅助技术表明此元素的功能为展示。 |
targetHeader | role | presentation | 向辅助技术表明此元素的功能为展示。 |
targetHeaderLabel | for | 将标签与输入元素关联。用户可以点击标签来聚焦输入或切换状态。 | |
targetHeaderItemCount | role | presentation | 向辅助技术表明此元素的功能为展示。 |
aria-label | 提供一个可访问的名称。 | ||
targetListItems | tabindex | -1 or 0 | 通过将其设置为-1(当可搜索或没有源选项时)或0(其他情况时)来优先考虑键盘焦点顺序。 |
aria-activedescendant | 管理焦点到当前活动的后代元素。 | ||
role | listbox | 向辅助技术表明此元素的功能为列表框。 | |
aria-multiselectable | true | 表明它允许同时选择多个项目。 | |
aria-roledescription | 提供此元素角色的描述。 | ||
targetListItem | aria-selected | 表明此元素当前被选中。 | |
role | option | 向辅助技术表明此元素的功能为选项。 | |
targetLoadMore | tabindex | -1 | 通过将其设置为-1来优先考虑键盘焦点顺序。 |
aria-selected | false | 表明此元素从未被选中。 | |
targetEmptyMessage | role | presentation | 向辅助技术表明此元素的功能为展示。 |
transferButtonForward | aria-label | 提供一个可访问的名称。 | |
transferButtonForwardAll | aria-label | 提供一个可访问的名称。 | |
transferButtonBackward | aria-label | 提供一个可访问的名称。 | |
transferButtonBackwardAll | aria-label | 提供一个可访问的名称。 | |
显示 通用 部分键 | |||
label | label | for | 将其与输入元素关联,提高可访问性和用户体验 |
input | input | disabled | 禁用 HTML 元素,阻止用户交互并指示非交互状态 |
aria-describedby | 通过将元素与描述关联,增强可访问性,帮助屏幕阅读器 | ||
aria-required | 当需要验证时,添加所需的状态 | ||
icon | icon | for | 每当将图标定义为标签时,将其与输入元素关联,增强可访问性和用户体验 |
键盘事件 | 描述 |
---|---|
Tab | 将焦点移动到页面上的下一个可聚焦输入。 |
Shift + Tab | 将焦点移动到页面上的上一个可聚焦输入。 |