跳到主要内容

Tabs 选项卡

用于内容分类后的展示切换。


组件类型

基础

带红点

带图标

均分

等距

组件样式

组件尺寸

small 小: 文字大小:14px; large 大:文字大小:16px

组件主题

普通

标签

边框

组件状态

何时使用

  • 当前内容需要分成同层级结构的组,进行内容切换展示,常用在表单或者列表的顶部。

应用场景

位于页面或模块的顶部,统领下方内容的切换,通常设置吸顶,方便用户快速切换。

设计指南

--

何时使用

  • 当内容/数据需要一定的分类纬度进行区分,便于用户快速作出选择并切换时可以使用。

文案规范

--

设计资源

类型资源状态
设计Design Kit (Figma)
StorybookStorybook

API 参考

属性说明类型默认值
aria-label按钮的标签string-

设计变量

变量默认值用法
$transition_duration-button_primary-bgvar(--kpay-transition_duration-none)主要按钮-背景色-动画持续时间