Aksel

Meny

Komponenter / Core

InternalHeader

Oppdatert Interne flaterStabil
Figma

Intro

Internal Header samler handlinger og overordnet navigasjon for interne systemer. Handlingene som tilbys bestemmes av hvert enkelt system.

Egnet til:

  • Bruk på interne flater
  • Navigasjon

Uegnet til:

  • Eksterne flater

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Retningslinjer

App switcher

App-switcheren inneholder lenker til andre fagsystemer og oppslagsverk. Lenkene åpnes i ny fane slik at systemet man er i ikke lukkes. Det er opp til det enkelte team hvor mange lenker de fyller den med. Se eksempel "App switcher".

Brukermeny

Ved å klikke på brukernavnet åpnes en meny 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. Se eksempel "Brukermeny".

Både app switcher og brukermeny bruker Dropdown.

Props

InternalHeader

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

InternalHeader.Button

as?

  • Type:
    React.ElementType
  • Description:

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

InternalHeader.Title

as?

  • Type:
    React.ElementType
  • Description:

children

  • Type:
    ReactNode
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

InternalHeader.User

name

  • Type:
    string
  • Description:

description?

  • Type:
    string
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

InternalHeader.UserButton

as?

  • Type:
    React.ElementType
  • Description:

name

  • Type:
    string
  • Description:

description?

  • Type:
    string
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLButtonElement>
  • Description:

Tokens

TokenFallback
--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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.

Relaterte komponenter