列表框

Listbox是一个垂直的交互选项列表，有图标、描述和其他元素的空间。

一个控制元素的基本实现，用于让商家选择选项

进口｛列表框｝从“@shopify /北极星”；进口反应从“反应”；函数BaseListboxExample（）｛返回（<列表框accessibilityLabel＝“基本列表框示例”><列表框．选项值＝“UniqueValue-1”>项1</列表框．选项><列表框．选项值＝“UniqueValue-2”>项2</列表框．选项><列表框．选项值＝“UniqueValue-3”>项3.</列表框．选项></列表框>）；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 ListboxProps

孩子们 ReactNode: 列表框的内部内容。
autoSelection?: 指示列表中的默认活动选项。支持选项创建的模式应该将活动选项默认为第一个选项。

默认为．FirstSelected．
enableKeyboardControl? 布尔: 显式启用键盘控件。
accessibilityLabel? 字符串: 为屏幕阅读器提供视觉隐藏文本。
customListId? 字符串: 为列表元素提供一个自定义ID。
onSelect? （价值：字符串) = >无效: 当选择一个选项时触发回调。
onActiveOptionChange? （价值：字符串，domId：字符串) = >无效: 当一个选项激活时触发回调。

解剖学

Listbox组件的图表，显示了它可以由更小的原语组件组成。

列表框可以由以下部分组成:

选项:列表框内商家可以选择或取消选择的个别选项。
分规:放置在商品之间，当商家需要解析大量信息时，在复杂的列表中很有用。
节标题:当需要调出所显示的内容时，在部分的开头使用。在大多数情况下，周围的上下文应该足以让商家理解列表中的信息。

最佳实践

列表框应该:

要有清晰的标签，这样商家就会注意到有什么样的选择
限制一次显示的选项数量
在填充选项数据时，向商家指示加载状态

内容的指导方针

选项列表

在列表框应该是清晰和描述性的。

做

流量引荐源

不

使用的模式`列表框`

位置选择器

对于文本字段和弹出窗口容器，使用组合框组件
自动完成可以作为一个方便的包装器来代替组合框和列表框。

可访问性

结构

的列表框组件基于Aria 1.2列表框模式．

重要的是不要在列表框选项中显示交互元素，因为它们会干扰辅助技术用户的导航。

做

使用标签

不

在列表中使用交互元素

键盘支持

使用向上和向下方向键访问选项列表
属性的焦点选择一个选项输入/返回关键

列表框

道具

解剖学