选项卡
用于在同一上下文中的相关视图之间交替使用。
在大多数情况下使用,特别是当选项卡的数量可能超过三个时。
进口{卡,选项卡}从“@shopify /北极星”;进口{useState,useCallback}从“反应”;函数TabsExample(){常量[选择,setSelected]=useState(0);常量handleTabChange=useCallback((selectedTabIndex)= >setSelected(selectedTabIndex),[],);常量选项卡=[{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部分的选项卡如下:
- 所有
- 开放
- 未实现的
- 无薪
礼品卡部分的标签是:
- 所有
- 新
- 部分使用
- 使用
- 禁用
对于客户部分,选项卡是:
- 所有
- 新
- 返回
- 废弃的签出
- 电子邮件用户
在可能的情况下,在编写制表符时遵循此模式。