TabsLayout

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`	-