Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.6.3

Tabs

Tabsは、異なる表示領域を切り替えるコンポーネントです。

ソース@yamada-ui/tabs

Props

TabProps

clickOnEnter

説明

Whether or not trigger click on pressing Enter.

タイプ

boolean

デフォルト

true

clickOnSpace

説明

Whether or not trigger click on pressing Space.

タイプ

boolean

デフォルト

true

disableTouchBehavior

説明

Disable the touch device behavior.

タイプ

boolean

デフォルト

true

focusOnClick

説明

Whether or not to focus the element when it is clicked. If true, the element will receive focus upon click.

タイプ

boolean

デフォルト

true

isDisabled

説明

If true, the element will be disabled. It will set the disabled HTML attribute.

タイプ

boolean

デフォルト

false

isFocusable

説明

If true and isDisabled, the element will have only aria-disabled set to true.

タイプ

boolean

デフォルト

false

ref

説明

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.

タイプ

number

disableRipple

説明

If true, disable ripple effects when pressing the tab.

タイプ

boolean

デフォルト

false

index

説明

The index of the selected tab.

タイプ

number

isFitted

説明

If true, tabs will stretch to width of the tablist.

タイプ

boolean

デフォルト

false

isLazy

説明

If true, rendering of the tab panel's will be deferred until it is selected.

タイプ

boolean

デフォルト

true

isManual

説明

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

デフォルト

false

lazyBehavior

説明

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'

onChange

説明

The callback invoked when the index changes.

タイプ

(index: number) => void

orientation

説明

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.

タイプ

TabListProps

tabPanelsProps

説明

Props for tab panels components.

タイプ

TabPanelsProps

variant

説明

The variant of the Tabs.

タイプ

"line" | "rounded" | "rounded-solid" | "rounded-subtle" | "sticky" | "sticky-solid" | "sticky-subtle" | "unstyled"

デフォルト

"line"

GitHubでこのページを編集する

前Accordion次Tree