Tabs

Flikar

Storybook

React Aria

Komponent för att segmentera information. Används för att minska informationsmängden som direkt presenteras för användaren.

<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>

Vitaminer

Frysta frukter och bär

Frysta importerade hallon

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.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Tabs } from '@midas-ds/components'

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>

Bär

Frukter

Information om Frukter

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>
)

Bär

Frukter

Information om Frukter

Vald flik: Frukter

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
defaultSelected	string	-	@deprecated Please use defaultSelectedKey instead
isDisabled	boolean	-	Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance.
className	string | ((values: TabsRenderProps & { 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: TabsRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
id	string	-	The element's unique identifier. See MDN.
slot	string	-	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.
selectedKey	Key	-	The currently selected key in the collection (controlled).
defaultSelectedKey	Key	-	The initial selected key in the collection (uncontrolled).
disabledKeys	Iterable<Key>	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
keyboardActivation	"manual" | "automatic"	'automatic'	Whether tabs are activated automatically on focus or manually.