Aksel

Meny

Komponenter / Primitives

Page

Oppdatert Stabil
GithubYarnEndringslogg

Intro

Page lar deg lettere bygge opp top-level layout for appen din. Dette inkluderer plassering av footer, maksbredde og sentrering av innholdsblokker.

Egnet til:

  • Top-level layout for app
  • Sentrering av sideblokker

Uegnet til:

  • Nested layouts

Har du innspill til komponenten?

Send forslag

Eksempler

Page gjør det enklere å bygge opp layout med riktig maksbredde og gutters.

SandboxSandbox
Åpne eksempel i nytt vindu

Varianter

Width

Page.Block kommer med predefinerte maksbredder:

  • 1440px: Opp til 3 kolonne-layout. Standard maksbredde og bør brukes på header og footer.
  • 1280px: Opp til 3 kolonne-layout.
  • 1024px: Opp til 2 kolonne-layout.
  • 768px: 1 kolonne-layout.

Retningslinjer

Sidelayout

De fleste applikasjoner bør ha en definert maksbredde og være sentrert. Da unngår du at elementer som f.eks sidebar og header flyter ut ved bruk av brede skjermer. I NAV er 1440px en generell standard for maksbredde. Ved å bruke width="2xl" i Page.Block-komponenten blir dette håndtert for deg.

Unntak

Interne applikasjoner eller grensesnitt vil kunne ha behov for større tilgjengelig skjermflate. Da gir det oftest mening å ikke definere en maksbredde, men heller gi kontrollen til brukeren som selv justerer størrelsen på nettleservinduet.

Tilgjengelighet

Page.Block er som standard en div. Semantikken må du styre ved å sette as til f.eks "header", "main" eller "footer".

Props

Page

as?

  • Type:
    "div" | "body"
  • Default:
    "div"
  • Description:

background?

  • Type:
    "bg-default" | "bg-subtle"
  • Default:
    bg-default
  • Description:

footer?

  • Type:
    ReactNode
  • Description:

footerPosition?

  • Type:
    "belowFold"
  • Description:

contentBlockPadding?

  • Type:
    "end" | "none"
  • Default:
    end
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLElement>
  • Description:

Page.Block

as?

  • Type:
    React.ElementType
  • Description:

width?

  • Type:
    "text" | "md" | "lg" | "xl" | "2xl"
  • Default:
    max-width: 100%;
  • Description:
  • Example:

gutters?

  • Type:
    boolean
  • Default:
    false
  • Description:
  • Example:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description: