Intro
Headeren kan inneholde flere ulike komponenter. Grunndesignet gir et generisk utgangspunkt og er likt på tvers av systemene. Interaksjon og komplekset bestemmes av de enkelte fagsystemer.
Egnet til å:
- Saksbehandlingssystemer og utgangspunkt for andre interne løsninger.
Vurder noe annet:
- Løsninger som bor på eksterne sider.
Har du innspill til komponenten?
Send forslagEksempler
Varianter
Varianter av header kommer.
Tilgjengelighet
Interaksjon Tastatur
Her er de mest vanligste kombinasjonene.
Kommando | Interaksjon |
Tab | Flytter fokus det neste interaktive elementet |
ShiftTab | Flytter fokus det forrige interaktive elementet |
Space/Enter | Interagere med elementer |
Bruk
System menu
System-menyen inneholder lenker til andre fagsystemer og oppslagsverk. Meny-lenkene åpnes i nytt nettleservindu slik at saksbehandler kan fortsette å forholde seg til det systemet som er aktivt. Det er opp til det enkelte team hvor mange lenker de fyller den med. Overflow punktet er satt ved 550px høyde, når menyen oppnår denne høyden vil en scrollbar oppstå slik at menyen ikke blir altfor høy.

Username-dropdown
Ved å klikke på brukernavnet åpnes et dropdown element som viser brukers fulle navn, identnummer samt en lenke for å logge ut av systemet. Teamene avgjør selv om de vil introdusere mer informasjon i denne konteksten.

Props
Header
- children ReactNode
- Header content
- className? string
- ref? Ref<HTMLElement>
- Header extends HTMLElement
Header.Button
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Application Button
- className? string
- ref? Ref<HTMLButtonElement>
- Header.Button extends HTMLButtonElement
Header.Title
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Application title
- className? string
- ref? Ref<HTMLAnchorElement>
- Header.Title extends HTMLAnchorElement
Header.User
- name string
- User name
- description? string
- User description
- className? string
- ref? Ref<HTMLDivElement>
- Header.User extends HTMLDivElement
Header.UserButton
- as? React.ElementType
- OverridableComponent-api
- name string
- User name
- description? string
- User description
- className? string
- ref? Ref<HTMLButtonElement>
- Header.UserButton extends HTMLButtonElement
Tokens
Token | Fallback |
--ac-header-bg | --a-surface-inverted |
--ac-header-divider | --a-gray-600 |
--ac-header-text | --a-text-on-inverted |
--ac-header-hover-bg | --a-surface-inverted-hover |
--ac-header-active-bg | --a-surface-inverted-active |