Tab | Entur Linje

<Tabs style={{ marginRight: 'auto' }}>
  <TabList>
    <Tab>Priser</Tab>
    <Tab>Detaljer</Tab>
    <Tab>Tom fane</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Heading2>Informasjon</Heading2>
      <Paragraph>
        Et tab-panel kan inneholde masse informasjon, sortert og gruppert
        etter kategori.
      </Paragraph>
      <Paragraph>
        Man kan ha langt innhold eller kort innhold, og tab-panelet vil
        tilpasse seg underveis.
      </Paragraph>
    </TabPanel>
    <TabPanel>
      <Heading2>Priser</Heading2>
      <TextField defaultValue="99,00" label="Pris" />
      <TextArea
        defaultValue="Prisen er inkludert MVA"
        style={{ marginBottom: '1rem' }}
      />
      <PrimaryButton>Lagre</PrimaryButton>
    </TabPanel>
    <TabPanel />
  </TabPanels>
</Tabs>

Når bruker du Tabs

Tabs brukes for å organisere innhold i logiske seksjoner der brukeren bare trenger å se én seksjon om gangen. De egner seg godt for sider med mye innhold som kan grupperes.

<Tabs>
  <TabList>
    <Tab>Første</Tab>
    <Tab>Andre</Tab>
    <Tab>Tredje</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      <Paragraph>Innhold i første fane.</Paragraph>
    </TabPanel>
    <TabPanel>
      <Paragraph>Innhold i andre fane.</Paragraph>
    </TabPanel>
    <TabPanel>
      <Paragraph>Innhold i tredje fane.</Paragraph>
    </TabPanel>
  </TabPanels>
</Tabs>

Antall faner

Hold antall faner under kontroll — for mange faner gjør det vanskelig å navigere. Innholdet i hver fane bør stå på egne ben, slik at brukeren ikke trenger å veksle frem og tilbake for å forstå konteksten.

Innhold i faner

Faner passer best når innholdet i hver fane er uavhengig. Unngå å dele opp innhold som brukeren trenger å se samtidig. Hvis innholdet er sekvensielt (steg for steg), vurder en stegvisning i stedet.

Universell utforming

Tabs følger WAI-ARIA Tabs-mønsteret med full tastaturnavigasjon. Piltastene navigerer mellom faner, Enter og Space aktiverer en fane, og hvert panel er koblet til sin fane via ARIA-attributter.