clickOnEnter
説明
Whether or not trigger click on pressing Enter.
タイプ
booleanデフォルト
trueTabs
Tabsは、異なる表示領域を切り替えるコンポーネントです。
Props
TabProps
clickOnSpace
説明
Whether or not trigger click on pressing Space.
タイプ
booleanデフォルト
truedisableTouchBehavior
説明
Disable the touch device behavior.
タイプ
booleanデフォルト
truefocusable
説明
If true and isDisabled, the element will have only aria-disabled set to true.
タイプ
booleanデフォルト
falsefocusOnClick
説明
Whether or not to focus the element when it is clicked.
If true, the element will receive focus upon click.
タイプ
booleanデフォルト
trueisDisabled
非推奨説明
If true, the element will be disabled. It will set the disabled HTML attribute.
非推奨
Use disabled instead.
タイプ
booleanデフォルト
falseisFocusable
非推奨説明
If true and isDisabled, the element will have only aria-disabled set to true.
非推奨
Use focusable instead.
タイプ
booleanデフォルト
falseref
説明
The ref for the element.
タイプ
type ONLY_FOR_FORMAT =
| ((instance: HTMLButtonElement | null) => void)
| RefObject<HTMLButtonElement>TabListProps
TabPanelProps
TabPanelsProps
TabsProps
align
説明
The alignment of the tabs.
タイプ
"center" | "end" | "start"colorScheme
説明
The visual color appearance of the component.
タイプ
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"デフォルト
"primary"defaultIndex
説明
The index of the selected tab.
タイプ
numberdisableRipple
説明
If true, disable ripple effects when pressing the tab.
タイプ
booleanデフォルト
falsefitted
説明
If true, tabs will stretch to width of the tablist.
タイプ
booleanデフォルト
falseindex
説明
The index of the selected tab.
タイプ
numberisFitted
非推奨説明
If true, tabs will stretch to width of the tablist.
非推奨
Use fitted instead.
タイプ
booleanデフォルト
falseisLazy
非推奨説明
If true, rendering of the tab panel's will be deferred until it is selected.
非推奨
Use lazy instead.
タイプ
booleanデフォルト
trueisManual
非推奨説明
If true, the tabs will be manually activated and display its panel by pressing Space or Enter.
If false, the tabs will be automatically activated and their panel is displayed when they receive focus.
非推奨
Use manual instead.
タイプ
booleanデフォルト
falselazy
説明
If true, rendering of the tab panel's will be deferred until it is selected.
タイプ
booleanデフォルト
truelazyBehavior
説明
The lazy behavior of tab panels' content when not active. Only works when isLazy={true}.
- unmount: The content of inactive tab panels are always unmounted.
- keepMounted: The content of inactive tab panels is initially unmounted, but stays mounted when selected.
タイプ
LazyModeデフォルト
'unmount'manual
説明
If true, the tabs will be manually activated and display its panel by pressing Space or Enter.
If false, the tabs will be automatically activated and their panel is displayed when they receive focus.
タイプ
booleanデフォルト
falseonChange
説明
The callback invoked when the index changes.
タイプ
(index: number) => voidorientation
説明
The orientation of the tab list.
タイプ
"horizontal" | "vertical"デフォルト
'horizontal'size
説明
The size of the Tabs.
タイプ
"sm" | "md" | "lg"デフォルト
"md"tabListProps
説明
Props for tab list component.
タイプ
TabListPropstabPanelsProps
説明
Props for tab panels components.
タイプ
TabPanelsPropsvariant
説明
The variant of the Tabs.
タイプ
"line" | "rounded" | "rounded-solid" | "rounded-subtle" | "sticky" | "sticky-solid" | "sticky-subtle" | "unstyled"デフォルト
"line"GitHubでこのページを編集する