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	-