选项卡

用于在同一上下文中的相关视图之间交替使用。

在大多数情况下使用,特别是当选项卡的数量可能超过三个时。

进口{选项卡}“@shopify /北极星”进口{useStateuseCallback}“反应”函数TabsExample{常量选择setSelecteduseState0常量handleTabChangeuseCallbackselectedTabIndex= >setSelectedselectedTabIndex常量选项卡{id“all-customers-1”内容“所有”accessibilityLabel所有客户的panelID“all-customers-content-1”}{id“accepts-ob欧宝娱乐app下载地址marketing-1”内容“接受营销”ob欧宝娱乐app下载地址panelID“accepts-ob欧宝娱乐app下载地址marketing-content-1”}{id“repeat-customers-1”内容“回头客”panelID“repeat-customers-content-1”}{id“prospects-1”内容“前景”panelID“prospects-content-1”}返回<><选项卡标签{选项卡}选择{选择}onSelect{handleTabChange}><节标题{选项卡选择内容}><p>选项卡{选择}选择</p></部分></选项卡></>}

道具

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

接口 TabsProps
孩子们 反应ReactNode

以选项卡显示的内容。

选择 数量

选定选项卡的索引。

选项卡 []

选项卡列表。

安装 布尔

将标签贴到容器上。

disclosureText 字符串

文本取代披露水平点。

onSelect selectedTabIndex数量) = >无效

当tab被选中时回调。

最佳实践

标签:

  • 表示相同类型的内容,例如应用了不同筛选器的列表视图。不要使用选项卡对不同的内容进行分组。
  • 一次只能激活一个。
  • 不要强迫商家来回跳来跳去完成一项任务。商家应该能够完成他们的工作,并找到他们需要的每个标签下。
  • 不能用于主要导航。

内容的指导方针

选项卡

标签:

  • 清晰地标记,以帮助区分它们下面的不同部分。

  • 有简短和可扫描的标签,一般保持在单个单词。

  • 与他们在Shopify上的部分相关。假设页面部分标题是标签后面的一个看不见的名词。例如,orders部分的选项卡如下:

    • 所有
    • 开放
    • 未实现的
    • 无薪

礼品卡部分的标签是:

  • 所有
  • 部分使用
  • 使用
  • 禁用

对于客户部分,选项卡是:

  • 所有
  • 返回
  • 废弃的签出
  • 电子邮件用户

在可能的情况下,在编写制表符时遵循此模式。