Hopp til innhold

Tabs

Tabs/faner er en enkel måte å organisere innhold på ved å gruppere lignende informasjon på samme side. Dette gjør at innhold kan sees uten at brukeren må navigere bort fra den siden.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-tabs-react
Bruk
import { Tab } from "@fremtind/jkl-tabs-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-tabs/tabs.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-tabs/tabs";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

Tabs
Visning
Tema
Tetthet
const ContentWrapper = ({ children }) => (

  <div style={{ padding: 40 }}>{children}</div>

);



return (

  <Tabs>

    <TabList aria-label="tabs">

      <Tab>Bedrifter</Tab>

      <Tab>Bedriftansvarlige</Tab>

      <Tab>Rådgivere</Tab>

    </TabList>



    <TabPanel>

      <ContentWrapper>Innhold for Bedrifter</ContentWrapper>

    </TabPanel>



    <TabPanel>

      <ContentWrapper>Innhold for Bedriftansvarlige</ContentWrapper>

    </TabPanel>



    <TabPanel>

      <ContentWrapper>Innhold for Rådgivere</ContentWrapper>

      <Tabs>

        <TabList aria-label="subtabs">

          <Tab>Bedrift AS</Tab>

          <Tab>Alternativ AS</Tab>

        </TabList>

        <TabPanel>

          <ContentWrapper>Innhold for Bedrift AS</ContentWrapper>

        </TabPanel>

        <TabPanel>

          <ContentWrapper>Innhold for Alternativ AS</ContentWrapper>

        </TabPanel>

      </Tabs>

    </TabPanel>

  </Tabs>

);

Varianter

Denne komponenten er utformet for å brukes i innholdsdelen av en side, og er designet for å brukes med ett nivå.

Fanekomponenten kommer i to varianter som er visuelt like, men teknisk forskjellige:

  • Den første bytter visning av innhold på samme side med button - navigerer ikke til en ny URL.
  • Den andre baserer seg på lenker (a eller en custom komponent), og at hver fane er sin egen route.
<div style={{ width: "100%" }}>

  <NavTabs>

    {/* Sett aria-selected til true for den nåværende routen. */}

    <NavTab aria-selected={true} href="/eksempler">

      Eksempler

    </NavTab>

    <NavTab aria-selected={false} href="/bruk">

      Bruk

    </NavTab>

    <NavTab aria-selected={false} href="/tekst">

      Tekst

    </NavTab>

    <NavTab aria-selected={false} href="/spec">

      Design Spec

    </NavTab>

    <NavTab aria-selected={false} href="/kode">

      Kode

    </NavTab>

  </NavTabs>

  <div role="tabpanel">

    Sideinnhold, eller for eksempel <code>&lt;Outlet /&gt;</code> i Remix.

  </div>

</div>;

React API

Her finner du en oversikt over props på komponentene i pakken.