Tabs

Flikar

Storybook

React Aria

En komponent för att segmentera information och minska den mängd 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>

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.

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

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

Vitaminer

Frysta frukter och bär

Frysta importerade hallon

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 läge

Valet av flik kan kontrolleras med hjälp av attributet selectedKey tillsammans med eventet onSelectionChange. Flikens ID skickas tillbaka i callbacken vid valändring, vilket kan användas 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>
)

Vitaminer

Frysta frukter och bär

Frysta importerade hallon

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

Flikar med stängningsknapp

Här är ett exempel på flikar där varje flik har en stängningsknapp. Detta är användbart för scenarion där flikar kan läggas till eller tas bort dynamiskt av användaren. För mer information om dynamiska flikar, se React Aria dynamic tabs.

import React, { useState } from 'react'
import { X } from 'lucide-react'
import {
  Tab,
  TabList,
  Tabs,
  TabPanel,
  Text,
  Button,
} from '@midas-ds/components'

export const ClosableTabsExample = () => {
  const [openTabs, setOpenTabs] = useState([
    { id: 'bananer', title: 'Bananer' },
    { id: 'applen', title: 'Äpplen' },
  ])

  const handleCloseTab = (idToClose: string) => {
    if (openTabs.length > 1)
      setOpenTabs(prevTabs => prevTabs.filter(tab => tab.id !== idToClose))
  }

  return (
    <Tabs>
      <TabList>
        {openTabs.map(tab => (
          <Tab
            key={tab.id}
            id={tab.id}
            style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}
          >
            {tab.title}
            <Button variant='icon' onPress={() => handleCloseTab(tab.id)}>
              <X size={16} />
            </Button>
          </Tab>
        ))}
      </TabList>
      {openTabs.map(tab => (
        <TabPanel
          key={tab.id}
          id={tab.id}
        >
          <Text>Information om {tab.title}</Text>
        </TabPanel>
      ))}
    </Tabs>
  )
}

Bananer

Äpplen

Information om Bananer

API

Name	Type	Default	Description
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 | ((item: T) => ReactNode)	-	The contents of the collection.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<DisclosureRenderProps>	-	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 null value indicates that the local props completely override all props received from a parent.
dir	string	-
lang	string	-
hidden	boolean	-
inert	boolean	-
translate	"yes" | "no"	-