Faner (Tabs)

Faner lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen.

Vi har to ulike typer faner. En med et nøytralt uttrykk, og en med et mer nostalgisk uttrykk.

Nostalgisk versjon brukes i de tilfellene hvor det er ønskelig å ta inn litt mer av Artsdatabankens merkevare knyttet om mot vismannen og hans dype kunnskap. I de aller fleste tilfellene, hvor fanene skal være mer funksjonelle og ikke trekke for mye oppmerksomhet, brukes den nøytrale.

Begge variantene kan brukes med og uten ikon, og finnes i tre ulike størrelser. Størrelse velges på bakgrunn av skjermstørrelse og visuelt hierarki.

Eksempel

Kart

Liste

Rutenett

Kartvisning — her vises kartet med artsobservasjoner.

Listevisning — her vises en tabell med observasjoner.

Rutenettvisning — observasjoner vist i rutenett.

<adb-tabs>
  <adb-tab slot="tab">Kart</adb-tab>
  <adb-tab slot="tab">Liste</adb-tab>
  <adb-tab slot="tab">Rutenett</adb-tab>
  <adb-tab-panel><p>Kartvisning — her vises kartet.</p></adb-tab-panel>
  <adb-tab-panel><p>Listevisning — tabell med observasjoner.</p></adb-tab-panel>
  <adb-tab-panel><p>Rutenettvisning — i rutenett.</p></adb-tab-panel>
</adb-tabs>

Varianter

Neutral (standard)

Standard variant med understrek-indikator. Brukes i de aller fleste tilfeller.

Natursystem

Naturkompleks

Landskap

Landformer

Innhold for Natursystem.

Innhold for Naturkompleks.

Innhold for Landskap.

Innhold for Landformer.

Nostalgisk

Variant med ramme rundt aktiv fane. Brukes når det er ønskelig å ta inn Artsdatabankens merkevare.

Oversikt

Artsobservasjoner

Statistikk

Oversikt med sammendrag.

Artsobservasjoner fra Artskart.

Statistikkdata og grafer.

Størrelser

Tre størrelser er tilgjengelige. Størrelse velges på bakgrunn av skjermstørrelse og visuelt hierarki.

Liten (sm)

Fane 2

Fane 3

Medium (md)

Fane 2

Fane 3

Stor (lg)

Fane 2

Fane 3

Med ikon

Faner kan vises med ikon foran teksten via slot="icon". Bruk <adb-icon> fra ikonpakken for konsistent størrelse på tvers av alle størrelser.

Søk

Sorter

Meny

<adb-tab slot="tab">
  <adb-icon slot="icon" name="search"></adb-icon>
  Søk
</adb-tab>

Deaktivert fane

En fane kan deaktiveres med disabled-attributtet. Deaktiverte faner hoppes over ved tastaturnavigasjon.

Oversikt

Artsobservasjoner

Statistikk

Oversikt-innhold.

Deaktivert panel.

Statistikk-innhold.

Actions-slot

Bruk slot="actions" for å plassere handlingsknapper (f.eks. sortering) etter fanene. Bruk <adb-dropdown> med icon="sort" for sorteringsknapper.

Liste

Rutenett

Artsnavn stigende

Artsnavn synkende

Populærnavn stigende

Populærnavn synkende

Kategori

Artsgruppe

Listevisning med sorteringsmulighet.

Rutenettvisning med sorteringsmulighet.

<adb-tabs>
  <adb-tab slot="tab">Liste</adb-tab>
  <adb-tab slot="tab">Rutenett</adb-tab>
  <adb-dropdown slot="actions" icon="sort" label="Artsnavn stigende">
    <adb-dropdown-group label="Navn">
      <adb-dropdown-item value="name-asc" selected>Artsnavn stigende</adb-dropdown-item>
      <adb-dropdown-item value="name-desc">Artsnavn synkende</adb-dropdown-item>
    </adb-dropdown-group>
  </adb-dropdown>
  <adb-tab-panel>Listevisning</adb-tab-panel>
  <adb-tab-panel>Rutenettvisning</adb-tab-panel>
</adb-tabs>

Manuell modus (uten paneler)

For ruter-basert navigasjon kan du bruke faner uten paneler. Lytt på tab-change-hendelsen for å styre innholdet selv.

<adb-tabs @tab-change=${(e) => router.navigate(e.detail.index)}>
  <adb-tab slot="tab">Natursystem</adb-tab>
  <adb-tab slot="tab">Naturkompleks</adb-tab>
  <adb-tab slot="tab">Landskap</adb-tab>
</adb-tabs>

Lenkefaner

Faner kan også rendres som lenker ved å sette href. Bruk aria-current="page" for å markere gjeldende side.

<adb-tabs aria-label="Hovednavigasjon">
  <adb-tab slot="tab" href="/natursystem" aria-current="page" selected>Natursystem</adb-tab>
  <adb-tab slot="tab" href="/naturkompleks">Naturkompleks</adb-tab>
  <adb-tab slot="tab" href="/landskap">Landskap</adb-tab>
</adb-tabs>

Retningslinjer for bruk

Tabs på smale skjermer

Faner er ikke godt egnet for mobil dersom det blir mange av dem. Faner bør ikke bryte på flere linjer. Fanetekst avkortes til «…».

Dersom man har flere enn tre faner, anbefales det at fanene blir omgjort til en Toggle group på smale skjermer.

Teknisk implementering

Faner bør implementeres inni et <nav>-element for å indikere at dette er navigasjon. Det bør ideelt sett være mulig å direkte-lenke til innhold i en fane, altså at URL endrer seg når brukeren endrer fane.

Dersom det ikke er plass til å vise alle tegnene i navnet på fanen, skal resten trunkeres (erstattes med «…»). Faner skal aldri brytes på flere linjer.

API

`<adb-tabs>`

Egenskap	Attributt	Type	Standard	Beskrivelse
`variant`	`variant`	`'neutral' \| 'nostalgic'`	`'neutral'`	Visuell stil
`size`	`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Størrelse på fanene
`selectedIndex`	`selected-index`	`number`	`0`	Indeks for valgt fane (0-basert)
`ariaLabel`	`aria-label`	`string`	—	Tilgjengelig etikett for `<nav>`-elementet

Slot	Beskrivelse
`tab`	`<adb-tab>`-elementer (fane-knapper)
(default)	`<adb-tab-panel>`-elementer (innholdspaneler)
`actions`	Handlingselementer (sorteringsknapper o.l.)

Hendelse	Detail	Beskrivelse
`tab-change`	`{ index: number }`	Sendes når aktiv fane endres

`<adb-tab>`

Egenskap	Attributt	Type	Standard	Beskrivelse
`selected`	`selected`	`boolean`	`false`	Om fanen er valgt (styres av `<adb-tabs>`)
`disabled`	`disabled`	`boolean`	`false`	Deaktiverer fanen
`href`	`href`	`string`	—	Rendrer fanen som en lenke (`<a>`)
`target`	`target`	`string`	—	Mål for lenke (kun med `href`)
`ariaCurrent`	`aria-current`	`string`	—	Markerer gjeldende side (`"page"`)

Slot	Beskrivelse
(default)	Fanetekst
`icon`	Ikon før teksten

`<adb-tab-panel>`

Egenskap	Attributt	Type	Standard	Beskrivelse
`active`	`active`	`boolean`	`false`	Om panelet er synlig (styres av `<adb-tabs>`)

Slot	Beskrivelse
(default)	Panelinnhold

Universell utforming (WCAG 2.1 AA)

Komponenten følger WAI-ARIA Tabs Pattern:

Krav	Implementering
`<nav>` landmark	Faner er pakket i et `<nav>`-element med `aria-label`
`role="tablist"`	Satt på fane-containeren
`role="tab"`	Satt på hver fane-knapp/lenke
`role="tabpanel"`	Satt på hvert innholdspanel
`aria-selected`	`true` på valgt fane, `false` på andre
`aria-current="page"`	Støttet for lenke-baserte faner
`aria-controls` / `aria-labelledby`	Kobler faner til paneler
`tabindex`	`0` på valgt fane, `-1` på andre
Tastaturnavigasjon	`←`/`→` mellom faner, `Home`/`End` til første/siste
Fokusindikator	`outline: 4px solid` med `outline-offset: 4px`
Deaktiverte faner	Hoppes over ved tastaturnavigasjon
Kontrast	Tekst og indikatorer oppfyller 4.5:1 kontrastkrav

Installasjon

npm install @artsdatabanken/components

// Importer alt
import '@artsdatabanken/components';

// Eller kun fane-komponentene (tree shaking)
import '@artsdatabanken/components/tabs';