动作列表
操作列表呈现操作或可选选项的列表。该组件通常放置在弹出窗口容器创建下拉菜单或让商家从选项列表中进行选择。
用在最不重要的操作上,这样商家就不会被次要的任务分散注意力。也可以用于一组不适合可用屏幕空间的操作。
<按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
进口{按钮,弹出窗口,ActionList}从“@shopify /北极星”;进口{useState,useCallback}从“反应”;函数ActionListInPopoverExample(){常量[活跃的,setActive]=useState(真正的);常量toggleActive=useCallback(()= >setActive((活跃的)= >!活跃的),[]);常量handleImportedAction=useCallback(()= >控制台.日志(“进口行动”),[],);常量handleExportedAction=useCallback(()= >控制台.日志(“出口行动”),[],);常量激活剂=(<按钮onClick={toggleActive}信息披露>更多的行动</按钮>);返回(<div风格={{高度:“250 px”}}><弹窗活跃={活跃的}激活剂={激活剂}autofocusTarget=“第一个节点”onClose={toggleActive}><ActionList actionRole=“子菜单”项目={[{内容:“导入文件”,onAction:handleImportedAction,},{内容:“导出文件”,onAction:handleExportedAction,},]}/></弹出窗口></div>);}
道具
想让这个功能变得更好吗?请<!-- -->分享你的反馈.
接口<!-- -->
ActionListProps<!-- -->
- 项目? 只读的[]
-
列表的操作集合。
- 部分? 只读的[]
-
分段操作项的集合。
- actionRole? 字符串
-
为列表中的每个操作定义特定的角色属性。
- onActionAnyItem? () = >无效
-
当单击或按下任何项时返回。
最佳实践
动作列表:
- 用于次要的或不太重要的信息和操作,因为它们是隐藏的,直到商人通过打开弹出窗口暴露它们
- 包含相互关联的操作
内容的指导方针
动作列表
行动清单中的每一项都应该是清晰和可预测的。商家应该能够预测当他们点击一个动作项目时会发生什么。
做
买出货标签
不
买
行动清单中的每一项都应该以鼓励行动的强动词开头。为了提供足够的上下文,使用{动词}+{名词}格式,除非动作用一个动词就能清楚地表达出来。
做
- 重命名
- 编辑HTML
不
- 文件名称变更
- HTML编辑选项
动作列表中的每一项都应该是可扫描的,避免不必要的单词和冠词,如the、an或a。
做
- 添加菜单项
不
- 添加菜单项
相关的组件
可访问性
动作列表中的项被组织为列表项(<李>
)在无序列表中(< ul >
),并作为一组相关元素传达给辅助科技使用者。每一项都实现为按钮.
键盘支持
- 键给予动作列表项键盘焦点选项卡键(或转变+选项卡当向后移动)
- 当动作列表项有作用时
子菜单
,在列表中导航向下的箭头(向上箭头键后退) - 激活按钮。输入/返回键或空间关键
高对比度的支持
- 在高对比度模式下,每件物品都清晰可见
- 在高对比度模式下,每一个被聚焦和悬停的项目都是清晰可见的