跳到内容 Shopify标志 北极星
  • α堆栈 α
  • 应用提供商
  • 自动完成
  • 《阿凡达》
  • 徽章
  • 横幅
  • 流血 α
  • 盒子 α
  • 按钮
  • 按钮组
  • Callout卡
  • 标题
  • 复选框
  • 选择列表
  • 可折叠的
  • 颜色选择器
  • α
  • 组合框
  • 内容块 α
  • 上下文保存酒吧
  • 数据表
  • 日期选择器
  • 描述表
  • 显示文本
  • 降落区
  • 空的状态
  • 例外列表
  • 过滤器
  • 页脚的帮助
  • 形式
  • 表格布局
  • 框架
  • 全屏酒吧
  • 网格 α
  • 标题
  • 图标
  • 索引表
  • 内联 α
  • 内联错误
  • 键盘键
  • 布局
  • 链接
  • 列表
  • 列表框
  • 加载
  • 媒体卡
  • 模态
  • 导航
  • 选项列表
  • 页面
  • 页面动作
  • 分页
  • 弹出窗口
  • 进度条
  • 单选按钮
  • 滑块范围
  • 资源项目
  • 资源列表
  • 可滚动
  • 选择
  • 设置切换
  • 弃用
  • 骨架正文
  • 骨架显示文本
  • 框架页面
  • 骨架的标签
  • 骨架缩略图
  • 微调控制项
  • 堆栈
  • 副标题
  • 选项卡
  • 标签
  • 文本 α
  • 文本容器
  • 文本字段
  • 文本样式
  • 缩略图
  • 瓷砖 α
  • 烤面包
  • 工具提示
  • 窗口的顶部
  • 视频缩略图
  • 视觉上隐藏
  • 沙盒 α
  • 令牌
  • 图标
  • 贡献
  • 沙盒 α
  • 动作列表

    操作列表呈现操作或可选选项的列表。该组件通常放置在弹出窗口容器创建下拉菜单或让商家从选项列表中进行选择。

    用在最不重要的操作上,这样商家就不会被次要的任务分散注意力。也可以用于一组不适合可用屏幕空间的操作。

    <按钮 type="button" class="Code_CopyButton__W2O1C" aria-label="Copy to clipboard">
    进口按钮弹出窗口ActionList“@shopify /北极星”进口useStateuseCallback“反应”函数ActionListInPopoverExample常量活跃的setActiveuseState真正的常量toggleActiveuseCallback= >setActive活跃的= >活跃的常量handleImportedActionuseCallback= >控制台日志“进口行动”常量handleExportedActionuseCallback= >控制台日志“出口行动”常量激活剂<按钮onClicktoggleActive信息披露>更多的行动</按钮>返回<div风格高度“250 px”><弹窗活跃活跃的激活剂激活剂autofocusTarget“第一个节点”onClosetoggleActive><ActionList actionRole“子菜单”项目内容“导入文件”onActionhandleImportedAction内容“导出文件”onActionhandleExportedAction/></弹出窗口></div>

    道具

    想让这个功能变得更好吗?请<!-- -->分享你的反馈

    接口<!-- --> ActionListProps<!-- -->
    项目? 只读的

    列表的操作集合。

    部分? 只读的

    分段操作项的集合。

    actionRole? 字符串

    为列表中的每个操作定义特定的角色属性。

    onActionAnyItem? () = >无效

    当单击或按下任何项时返回。

    最佳实践

    动作列表:

    • 用于次要的或不太重要的信息和操作,因为它们是隐藏的,直到商人通过打开弹出窗口暴露它们
    • 包含相互关联的操作

    内容的指导方针

    动作列表

    行动清单中的每一项都应该是清晰和可预测的。商家应该能够预测当他们点击一个动作项目时会发生什么。

    买出货标签

    行动清单中的每一项都应该以鼓励行动的强动词开头。为了提供足够的上下文,使用{动词}+{名词}格式,除非动作用一个动词就能清楚地表达出来。

    • 重命名
    • 编辑HTML

    • 文件名称变更
    • HTML编辑选项

    动作列表中的每一项都应该是可扫描的,避免不必要的单词和冠词,如the、an或a。

    • 添加菜单项

    • 添加菜单项


    可访问性

    动作列表中的项被组织为列表项(<李>)在无序列表中(< ul >),并作为一组相关元素传达给辅助科技使用者。每一项都实现为按钮

    键盘支持

    • 键给予动作列表项键盘焦点选项卡键(或转变+选项卡当向后移动)
    • 当动作列表项有作用时子菜单,在列表中导航向下的箭头向上箭头键后退)
    • 激活按钮。输入/返回键或空间关键

    高对比度的支持

    • 在高对比度模式下,每件物品都清晰可见
    • 在高对比度模式下,每一个被聚焦和悬停的项目都是清晰可见的