Tabs
Komponent för att segmentera information. Används för att minska informationsmängden som direkt presenteras för användaren.
import { Tabs, TabList, Tab, TabPanel } from '@midas-ds/components'
<Tabs>
<TabList aria-label='Viktig information om frukter och bär'>
<Tab id='vitaminer'>...</Tab>
<Tab id='frukter'>...</Tab>
<Tab id='hallon'>...</Tab>
</TabList>
<TabPanel id='vitaminer'>...</TabPanel>
<TabPanel id='frukter'>...</TabPanel>
<TabPanel id='hallon'>...</TabPanel>
</Tabs>
Beskrivning
Midas Tabs
är en wrapperkomponent som används tillsammans med TabList
, Tab
och TabPanel
.
Samtliga komponenter utgår från React Arias komponenter med samma namn, vänligen se dokumentationen för Tabs hos React Aria för en djupare förklaring.
Användning
Förvalt alternativ (okontrollerad)
Välj vilket alternativ som ska vara förvalt med attributet defaultSelectedKey
, använd id för den flik som ska vara förvald.
<Tabs defaultSelectedKey='frukter'>
<TabList aria-label='Viktig information om frukter och bär'>
<Tab id='vitaminer'>...</Tab>
<Tab id='frukter'>...</Tab>
<Tab id='hallon'>...</Tab>
</TabList>
<TabPanel id='vitaminer'>...</TabPanel>
<TabPanel id='frukter'>...</TabPanel>
<TabPanel id='hallon'>...</TabPanel>
</Tabs>
Kontrollerat val
Valet av flik kan kontrolleras med hjälp av attributet selectedKey
tillsammans med eventet onSelectionChange
.
Den valda flikens id skickas tillbaka i callbacken när användaren byter flik, så kan du använda det för att uppdatera ditt state.
import React from 'react'
import type { Key } from 'react-aria-components'
const [selectedTab, setSelectedTab] = React.useState<Key>('frukter')
return (
<Tabs
selectedKey={selectedTab}
onSelectionChange={setSelectedTab}
>
<TabList aria-label='Viktig information om frukter och bär'>
<Tab id='vitaminer'>...</Tab>
<Tab id='frukter'>...</Tab>
<Tab id='hallon'>...</Tab>
</TabList>
<TabPanel id='vitaminer'>...</TabPanel>
<TabPanel id='frukter'>...</TabPanel>
<TabPanel id='hallon'>...</TabPanel>
</Tabs>
)
Vald flik: frukter
API
Name | Type | Default | Description |
---|---|---|---|
tabs | string[] | - | An array of tab titles since v.10.3.0 please use the declarative API . See Tabs. |
label | string | - | Label for accessibility
since v.10.3.0 please use the declarative API and use the |
orientation | Orientation | undefined | The orientation of the tabs. Will adjust to screen size automatically if omitted |
disabledKeys | Iterable<Key> | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
isDisabled | boolean | - | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
id | string | - | The element's unique identifier. See MDN. |
selectedKey | Key | - | The currently selected key in the collection (controlled). |
defaultSelectedKey | Key | - | The initial selected key in the collection (uncontrolled). |
keyboardActivation | "manual" | "automatic" | 'automatic' | Whether tabs are activated automatically on focus or manually. |
children | ReactNode | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | - | The children of the component. A function may be provided to alter the children based on component state. |
className | string | ((values: DisclosureGroupRenderProps & { defaultClassName: string; }) => string) | - | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | ((values: DisclosureGroupRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | - | The inline style for the element. A function may be provided to compute the style based on component state. |
slot | string | - | A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit |