Intro
Internal Header samler handlinger og overordnet navigasjon for interne systemer. Handlingene som tilbys bestemmes av hvert enkelt internt system.
Egnet til:
- Bruk på interne flater
- Saksbehandlingssystemer og utgangspunkt for andre interne løsninger
Uegnet til:
- Løsninger som bor på eksterne sider
Eksempler
Retningslinjer
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.
Tilgjengelighet
Tastaturinteraksjon
Her er de mest vanligste kombinasjonene.
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus det neste interaktive elementet |
| Shift+Tab | Flytter fokus det forrige interaktive elementet |
| Space/Enter | Interagere med elementer |
Props
InternalHeader
- className? string
- ref? Ref<HTMLElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- InternalHeader extends HTMLElement
InternalHeader.Button
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Application Button
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- InternalHeader.Button extends HTMLButtonElement
InternalHeader.Title
- as? React.ElementType
- OverridableComponent-api
- children ReactNode
- Application title
- className? string
- ref? Ref<HTMLAnchorElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- InternalHeader.Title extends HTMLAnchorElement
InternalHeader.User
- name string
- User name
- description? string
- User description
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- InternalHeader.User extends HTMLDivElement
InternalHeader.UserButton
- as? React.ElementType
- OverridableComponent-api
- name string
- User name
- description? string
- User description
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- InternalHeader.UserButton extends HTMLButtonElement
Tokens
| Token | Fallback |
|---|---|
| --ac-internalheader-bg | --a-surface-inverted |
| --ac-internalheader-divider | --a-gray-600 |
| --ac-internalheader-text | --a-text-on-inverted |
| --ac-internalheader-hover-bg | --a-surface-inverted-hover |
| --ac-internalheader-active-bg | --a-surface-inverted-active |