Komponenter
Tabs
Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.
React
const Preview = () => { return ( <Tabs defaultValue='value1'> <Tabs.List> <Tabs.Tab value='value1'>Tab 1</Tabs.Tab> <Tabs.Tab value='value2'>Tab 2</Tabs.Tab> <Tabs.Tab value='value3'>Tab 3</Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); }; render(<Preview />)
- value
- Description
Controlled state for `Tabs` component
- Type
string- Default
undefined
- defaultValue
- Description
Default selected tab value
- Type
string- Default
undefined
- onChange
- Description
Callback with selected `TabItem` `value`
- Type
(value: string) => void- Default
undefined
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | undefined | Controlled state for `Tabs` component |
| defaultValue | string | undefined | Default selected tab value |
| onChange | (value: string) => void | undefined | Callback with selected `TabItem` `value` |
TabsPanel
- value
- Description
When this value is selected as the current state, render this `TabsPanel` component. Must match the `value` of a `Tabs.Tab` component.
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | When this value is selected as the current state, render this `TabsPanel` component. Must match the `value` of a `Tabs.Tab` component. |
TabsTab
- value
- Description
Unique value that will be set in the `Tabs` components state when the tab is activated
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique value that will be set in the `Tabs` components state when the tab is activated |
Bruk
Eksempel
Kun ikoner
I eksempelet under har vi lagt Tooltip rundt Tabs.Tab for å gi beskrivende tekst til ikonene.
React
const IconsOnly = () => { return ( <Tabs defaultValue='car'> <Tabs.List> <Tooltip content='Dine biler'> <Tabs.Tab value='car'> <CarIcon title='car' /> </Tabs.Tab> </Tooltip> <Tooltip content='Dine sykler'> <Tabs.Tab value='bicycle'> <BicycleIcon title='Bicycle' /> </Tabs.Tab> </Tooltip> <Tooltip content='Dine motorsykler'> <Tabs.Tab value='motorcycle'> <MotorcycleIcon title='Motorcycle' /> </Tabs.Tab> </Tooltip> </Tabs.List> <Tabs.Panel value='car'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='bicycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='motorcycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> </Tabs> ); }; render(<IconsOnly />)
Kontrollert
React
const Controlled = () => { const [value, setValue] = useState('value1'); return ( <Tabs value={value} onChange={(newValue) => setValue(newValue)}> <Tabs.List> <Tabs.Tab value='value1'>Tab 1</Tabs.Tab> <Tabs.Tab value='value2'>Tab 2</Tabs.Tab> <Tabs.Tab value='value3'>Tab 3</Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); }; render(<Controlled />)
HTML
Du kan bruke u-tabs (u-elements.github.io), som er en web-komponent som implementerer tabs.
Legg på klassenavnet ds-tabs.
Vi anbefaler å bruke <u-tabs>, og ikke bygge egne tabs fra bunnen av, for å sikre god tilgjengelighet og funksjonalitet.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-tabs-tab-padding | var(--ds-size-3) var(--ds-size-5) |
| --dsc-tabs-tab-color | var(--ds-color-neutral-text-subtle) |
| --dsc-tabs-tab-color--hover | var(--ds-color-neutral-text-default) |
| --dsc-tabs-tab-color--selected | var(--ds-color-text-subtle) |
| --dsc-tabs-content-padding | var(--ds-size-4) var(--ds-size-5) |
| --dsc-tabs-list-border-color | var(--ds-color-neutral-border-subtle) |
| --dsc-tabs-list-border-bottom-width | var(--ds-border-width-default) |
| --dsc-tabs-list-border-bottom-style | solid |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)