Komponenter
SkipLink
SkipLink hjelper folk som bruker tastaturnavigasjon til å navigere, slik at dei enkelt kan gå til det viktigaste innhaldet på ei side.
React
Trykk Enter for å redigere
const Preview = () => { return ( <> <Paragraph> For å vise SkipLink, tab til dette eksempelet, eller klikk inni eksempelet og trykk <kbd>Tab</kbd>. <SkipLink href='#main-content'>Hopp til hovedinnhold</SkipLink> </Paragraph> <main id='main-content' tabIndex={-1}> Region som kan motta fokus fra skiplink. </main> </> ); }; render(<Preview />)
- children
- Description
The content to display inside the skiplink.
- Type
any
- href
- Description
Href of an element in the DOM the skiplink should skip to. E.g #main-content
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| children | any | - | The content to display inside the skiplink. |
| href | string | - | Href of an element in the DOM the skiplink should skip to. E.g #main-content |
Bruk
HTML
Legg klassenavnet ds-skip-link på ein <a>-tagg som peikar til hovudinnhaldet på sida.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-skiplink-padding | var(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4) |
| --dsc-skiplink-background | var(--ds-color-surface-hover) |
| --dsc-skiplink-color | var(--ds-color-text-default) |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)