Komponenter
Page
Page er en av våre layout primitives. Den hjelper deg å bygge opp sidelayout. Dette inkluderer plassering av footer, maksbredde og sentrering av sideblokker.
Egnet til:
- Sidelayout
- Sentrering av sideblokker
Eksempler
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:
Overrides html-tag
footer?
- Type:
ReactNode - Description:
Allows better positioning of footer
footerPosition?
- Type:
"belowFold" - Default:
"null" - Description:
Places footer below page-fold
contentBlockPadding?
- Type:
"end" | "none" - Default:
"end" - Description:
Adds a standardised padding of 4rem between content and footer
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
background?
- Deprecated:Use `<Box asChild background="...">` wrapped around `<Page>`.
- Type:
AkselLegacyBackgroundColorToken - Default:
"bg-default" - Description:
Background color. Accepts a background color token.
Page.Block
width?
- Type:
"text" | "md" | "lg" | "xl" | "2xl" - Default:
"max-width: 100%;" - Description:
Predefined max-width
- Example:
text: 576px + dynamic guttersmd: 768pxlg: 1024pxxl: 1280px2xl: 1440px
gutters?
- Type:
boolean - Default:
false - Description:
Adds a standardised responsive padding-inline
- Example:
3rem on > md1rem on < md
className?
- Type:
string
data-color?
- Type:
(string & {}) | AkselColor
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
as?
- Type:
React.ElementType - Description:
OverridableComponent-api