#Tabs

import Tabs from "@poodle/ui/Tabs";

Tabs component following WAI-ARIA practice.

Please use Tabs component with other tab components set to maximize the theming and efficiency.

#Simple

Horizontal tabs can use keyboard (arrow left, arrow light, home, end) to change selected tab.

Vertical tabs can use keyboard (arrow up, arrow down, home, end) to change selected tab.

If you want to control the selected tab at the parent, the container component can send the selected tab to value props.

onChangeValue props will fire the callback both in cases controlled and uncontrolled selected tab.

General tab

The disabled tab will be not clickable and skipped when the user uses the keyboard to navigate between tabs.

Please check theming component document here.

export interface TabsThemeConfig
  extends StandardThemeConfig<TabsStyleKeys, TabsProps> {}

Name	Type	Description
children	`React.ReactNode`
onChangeValue	`(value: TabValue, event: React.SyntheticEvent \\| KeyboardEvent) => void`
orientation	`TabOrientation`	Change tabs horizontal orientation or vertical orientation. Default is horizontal orientation.
value	`TabValue`	Send value to control active tab. By default component use internal state to control active tab.

export interface TabsProps
    extends Omit<BoxProps, "value">,
        StandardComponentProps,
        LocalTabsProps {}