Tabs
Komponent för att segmentera information. Används för att minska informationsmängden som direkt presenteras för användaren.
import { Tabs, Text } from '@midas-ds/components'
<Tabs
label='Viktig information om frukter och bär'
tabs={['Vitaminer', 'Frysta frukter och bär', 'Frysta importerade hallon']}
>
<Text>...</Text>
<Text>...</Text>
<Text>...</Text>
</Tabs>
Oavsett om du äter en frukt, lite bär, en näve grönsaker eller baljväxter, får du i dig många viktiga näringsämnen som kroppen behöver för att må bra - fibrer, C-vitamin, folat/folsyra, vitamin K, kalium och antioxidanter, som karotenoider. Eftersom olika sorters frukt och grönt innehåller olika näringsämnen är det bra att äta varierat.
Beskrivning
Midas Tabs
är en komposition av React Arias Tabs
, TabList
, Tab
, TabPanel
. Se dokumentationen för Tabs hos React Aria för en djupare förklaring.
Användning
Tabs och children
Midas Tabs
accepterar en lista av strängar (titlar) för attributet tabs
, dessa förhåller sig i sin tur till ett antal barnnoder.
Notera att längden på tabs
-listan och antalet barnnoder måste stämma överens för att komponenten ska fungera.
// 👍
<Tabs tabs={['Bär', 'Frukter']}>
<Text>Information om Bär</Text>
<Text>Information om Frukter</Text>
</Tabs>
// 👎 skickar ett fel till konsolen och returnerar null
<Tabs tabs={['Bär', 'Frukter', 'Stenfrukter', 'Grönsaker']}>
<Text>Information om Bär</Text>
<Text>Information om Frukter</Text>
</Tabs>
Förvalt alternativ (okontrollerad)
Välj vilket alternativ som ska vara förvalt med attributet defaultSelectedKey
, använd titeln på den flik som ska vara förvald.
<Tabs
tabs={['Bär', 'Frukter']}
defaultSelectedKey='Frukter'
>
<Text>Information om Bär</Text>
<Text>Information om Frukter</Text>
</Tabs>
Kontrollerat val
Valet av flik kan kontrolleras med hjälp av attributet selectedKey
tillsammans med eventet onSelectionChange
.
Den valda flikens titel 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 tabs = ['Bär', 'Frukter']
const [selectedTab, setSelectedTab] = React.useState<Key>(tabs[1])
return (
<Tabs
label='Frukt och grönt'
tabs={tabs}
selectedKey={selectedTab}
onSelectionChange={setSelectedTab}
>
<Text>Information om Bär</Text>
<Text>Information om Frukter</Text>
</Tabs>
)
API
Name | Type | Default | Description |
---|---|---|---|
tabs * | string[] | - | An array of tab titles |
label * | string | - | Label for accessibility |
children * | ReactNode | - | Amount of children must match the amount of tabs |
slot | string | - | A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit |
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. |
isDisabled | boolean | - | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
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. |
id | string | - | The element's unique identifier. See MDN. |
disabledKeys | Iterable<Key> | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
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. |