选项列表
选项列表组件允许您创建商家可以从中选择的分组项目列表。这可以包括单个选择或多个选择选项。选项列表通常出现在弹出窗口中,有时也出现在模态或侧边栏中。选项列表的样式与选择列表不应在表单中使用,而应作为独立的菜单使用。
用于一组相似的可选择项,当一次只有一个可选择时。
进口{卡,OptionList}从“@shopify /北极星”;进口{useState}从“反应”;函数OptionListExample(){常量(选择,setSelected]=useState((]);返回(<卡><OptionList标题=“库存位置”onChange={setSelected}选项={({价值:“byward_ob欧宝娱乐app下载地址market”,标签:“Byward市ob欧宝娱乐app下载地址场”},{价值:“centretown”,标签:“Centretown”},{价值:“hintonburg”,标签:“Hintonburg”},{价值:“威斯特布路”,标签:“威斯特布路”},{价值:“市区”,标签:“市区”},]}选择={选择}/></卡>);}
道具
想让这个功能变得更好吗?请分享你的反馈.
接口
OptionListProps
- id? 字符串
-
选项列表的唯一标识符。
- 标题? 字符串
-
标题列表。
- 选项? []
-
要列出的选项集合。
- 角色? 字符串
-
为列表本身定义特定的角色属性。
- optionRole? 字符串
-
为列表中的每个选项定义特定的角色属性。
- 部分? []
-
节,其中包含标题和相关选项。
- 选择 字符串[]
-
选择的选项。
- allowMultiple? 布尔
-
允许选择多个选项。
- verticalAlign? “高级”|“中心”|“底”
-
将子内容垂直对齐到中心、顶部或底部。
- onChange (选择:字符串[]) = >无效
-
当选择被改变时回调。
最佳实践
选项列表组件应该:
内容的指导方针
选项列表
选项列表中的每一项都应该是清晰和描述性的。
做
- 流量参考源
不
- 源
相关的组件
- 要呈现动作列表,使用动作列表组件
- 若要创建分组单选按钮或复选框的列表,请使用选择列表组件
- 对于作为单一选择菜单的选项列表的基本版本,使用select组件
可访问性
选项列表中的项组织为列表项(<李>
)在无序列表中(< ul >
),并作为一组相关元素传达给辅助技术使用者。
简单选项列表中的控件是按钮,以及多个选项列表中的控件复选框.
如果自定义选项列表,则可以提供适合上下文的ARIA角色。这些角色必须根据W3C ARIA规范正确地传达给屏幕阅读器用户。
- 的
角色
prop将一个ARIA角色添加到选项列表包装器 - 的
optionRole
prop将ARIA角色添加到选项列表项中