Intro
Page er en av våre layout primitives. Den hjelper deg å bygge opp sidelayout. Dette inkluderer plassering av footer, maksbredde og sentrering av sideblokker.
Eksempler
Page.Block kan også brukes i header og footer for å sikre at innholdet er sentrert og har samme maksbredde som resten av innholdet.
footerPosition=belowFold sikrer at footer aldri vil vises før man begynner å scrolle. Dette hjelper med å redusere layout-shifts ved navigering mellom sider.
Propen gutters på Page.Block setter responsive gutters (padding-inline).
Propen contentBlockPadding på Page sikrer at det alltid vil være en minimumspadding mellom innhold og footer. Dette vil være en god fallback, men mange layouts vil trenge ekstra padding top/bottom.
Propen background lar deg velge mellom default og subtle bakgrunn.
Propen width på Page.Block sentrerer innhold og legger på maksbredde.
Width
Page.Block kommer med predefinerte maksbredder:
| Verdi | Maksbredde | Beskrivelse |
|---|---|---|
| 2xl | 1440px | For opptil 3 kolonner. Dette er standard maksbredde og bør brukes på header og footer. |
| xl | 1280px | For opptil 3 kolonner. |
| lg | 1024px | For opptil 2 kolonner. |
| md | 768px | For 1 kolonne. |
| text | 576px + gutters | Anbefalt linjelengde for løpende tekst. |
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 standard 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: