Hoppa till huvudinnehåll

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>
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 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>
För näringsvärdet spelar det mindre roll om man äter färska eller frysta frukter och grönsaker. Frysta produkter håller längre och är ett smart sätt att minska matsvinnet.

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>
)
För näringsvärdet spelar det mindre roll om man äter färska eller frysta frukter och grönsaker. Frysta produkter håller längre och är ett smart sätt att minska matsvinnet.
Vald flik: frukter

API

NameTypeDefaultDescription
tabsstring[]-

An array of tab titles since v.10.3.0 please use the declarative API . See Tabs.

labelstring-

Label for accessibility since v.10.3.0 please use the declarative API and use the aria-label prop on TabList instead . See Tabs.

orientationundefined

The orientation of the tabs. Will adjust to screen size automatically if omitted

disabledKeysIterable<Key>-

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

isDisabled-

Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.

idstring-

The element's unique identifier. See MDN.

selectedKey-

The currently selected key in the collection (controlled).

defaultSelectedKey-

The initial selected key in the collection (uncontrolled).

keyboardActivation'automatic'

Whether tabs are activated automatically on focus or manually.

children-

The children of the component. A function may be provided to alter the children based on component state.

className-

The CSS className for the element. A function may be provided to compute the class based on component state.

style-

The inline style for the element. A function may be provided to compute the style based on component state.

slotstring-

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.