Tabs 标签页

对象内的导航或过滤器。

Tabs

Props

Prop NameTypeRequiredDefaultDescription
activeKeystring
当前激活的 tab key,受控
defaultActiveKeystring
默认激活的 tab key,非受控
onChange
(activeKey: string) => void
tab 修改时的回调
destroyInactiveTabPanebooleanfalse
是否销毁不展示的 tab 内容
children
ReactElement<TabPaneProps>[] | ReactNode
required
panes
tabBarPositionTabBarPosition'top'
bar 的定位
styleTypeStyleType'default'
样式风格
sizeSize'sm'
尺寸

说明

  • 所有的 pane 必须传入唯一 key
  • 支持键盘切换 tab
  • tab 数量多时会自动出现滚动按钮

演示

演示

VIEW CODE ( LIVE )

position - 位置

VIEW CODE ( LIVE )

styleType - 样式风格

VIEW CODE ( LIVE )

destroyInactiveTabPane - 销毁不活动的 tab

VIEW CODE ( LIVE )

scroll - 滚动

VIEW CODE ( LIVE )

uncontrolled

VIEW CODE ( LIVE )

child - 嵌套

VIEW CODE ( LIVE )

边界测试

VIEW CODE ( LIVE )

手动测试

VIEW CODE ( LIVE )

Pane

Props

Prop NameTypeRequiredDefaultDescription
forceRenderboolean
是否强制渲染
childrenReactNode
面板内容
disabledboolean
是否禁用
tabReactNoderequired
tab 的 title
tabKeystring
tab 的 key,由于 react 会在某些情况下改变传递的 key,顾直接使用 key 是不安全的,如发现 key 被修改,可使用 tabKey 来替换

说明

tabs 的面板,必须传入唯一的 key 才可正常工作

演示

演示

VIEW CODE ( LIVE )

disabled - 禁用

VIEW CODE ( LIVE )

forceRender - 强制直接渲染

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司