跳到主要内容

TabsLayout 选项卡

让用户可以在不同子任务、视图、模式之间切换,它具有全局导航的作用,是全局功能的主要展示和切换区域。

何时使用

  • 当需要对页面内容进行分类或区隔时使用。
  • 当需要对页面控件进行压缩,提升页面空间利用率时。

组件示例

组件属性

属性说明类型默认值
contentPadding

设定内容区的内间距,请输入 CSS padding 值

string

'20px 20px'

excessMode

选项卡过多时的滑动模式,slide:滑动、dropdown:下拉选择

'slide' | 'dropdown'

'slide'

extraRender

渲染导航栏附加内容

() => ReactNode

-
items

可以设置默认激活选项、禁用选项和标签名

TabItem[]

-
needBadge

开启徽标

boolean

false

onTabChange

选项卡切换事件

(activeIndex: number, key: string) => void

-
renderBadge

徽标渲染

(tabItem: object) => ReactNode

-
shape

设置选项卡形态

'pure' | 'wrapped' | 'text' | 'capsule'

'pure'

size

标签项大小

'small' | 'medium'

'medium'

tabPosition

导航选项卡的位置

'top' | 'bottom' | 'left' | 'right'

'top'

tabRender

自定义渲染选项卡

(key: string, props: object) => ReactNode

-
Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4