Komponenter
Badge
Badge er ein ikkje-interaktiv komponent som viser status med eller utan tal. Bruk Tag dersom du skal ha tekst i staden for tal.
React
const Preview = () => { return <Badge count={15} maxCount={9} />; }; render(<Preview />)
- count
- Description
The number to display in the badge
- Type
number
- maxCount
- Description
The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
- Type
number
- variant
- Description
Change the background color of the badge.
- Type
"base" | "tinted"- Default
base
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | - | The number to display in the badge |
| maxCount | number | - | The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+` |
| variant | "base" | "tinted" | base | Change the background color of the badge. |
BadgePosition
- placement
- Description
The placement of the badge
- Type
"top-right" | "top-left" | "bottom-right" | "bottom-left"- Default
top-right
- overlap
- Description
Use when badge is floating to change the position of the badge
- Type
"circle" | "rectangle"- Default
rectangle
| Name | Type | Default | Description |
|---|---|---|---|
| placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | top-right | The placement of the badge |
| overlap | "circle" | "rectangle" | rectangle | Use when badge is floating to change the position of the badge |
Eksempel
Variantar
Du kan endre mellom variant og data-color for å få ulike fargar og stilar.
React
const Variants = () => { const VariantsMap: { [key: string]: { [key: string]: string }; } = { neutralBase: { 'data-color': 'neutral', }, neutralTinted: { 'data-color': 'neutral', variant: 'tinted', }, dangerBase: { 'data-color': 'danger', }, dangerTinted: { 'data-color': 'danger', variant: 'tinted', }, infoBase: { 'data-color': 'info', }, infoTinted: { 'data-color': 'info', variant: 'tinted', }, warningBase: { 'data-color': 'warning', }, warningTinted: { 'data-color': 'warning', variant: 'tinted', }, }; return ( <> {Object.entries(VariantsMap).map(([key, value]) => ( <Badge key={key} {...value} count={15} maxCount={9} /> ))} </> ); }; render(<Variants />)
Flytande
Du kan setje plassering med placement, og velge kva type overlap den kan skal.
React
const Floating = () => ( <> <Badge.Position placement='top-right'> <Badge data-color='danger' count={2}></Badge> <EnvelopeClosedFillIcon title='Meldinger' style={{ fontSize: '2rem' }} /> </Badge.Position> </> ); render(<Floating />)
Ikkje alle ikon har lik form, og då må du kanskje endre kor Badge skal plasserast. Dersom du ikkje får Badge til å liggje der du ynskjer, kan du bruke style for å overstyre plasseringa.
Dette fungerer også når du bruker overlap="circle".
React
const CustomPlacement = () => ( <> <Badge.Position placement='top-right' style={ { '--dsc-badge-top': '16%', '--dsc-badge-right': '10%', } as CSSProperties } > <Badge data-color='accent'></Badge> <EnvelopeClosedFillIcon title='Meldinger' /> </Badge.Position> </> ); render(<CustomPlacement />)
Inline
Når du skal ha Badge inline, plasserer du den rett i teksten eller komponenten.
React
const InTabs = () => ( <Tabs defaultValue='value1'> <Tabs.List> <Tabs.Tab value='value1'> Favoritter <Badge count={64} maxCount={10} data-color='neutral' /> </Tabs.Tab> <Tabs.Tab value='value2'>Arkiv</Tabs.Tab> <Tabs.Tab value='value3'> Nylige <Badge count={2} data-color='neutral' /> </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(<InTabs />)
HTML
Badge rendrar teksten sin med CSS i eit :before-pseudoelement på ein span-tagg.
Du brukar klassenavnet ds-badge, i saman med data atributt.
Dersom du vil ha den flytande, så må ds-badge--position nyttast på ein wrapper rundt elementet som Badge skal plasserast over.
data-placement blir brukt på wrapperen for å bestemme plasseringa. Sjå nederst på sida for støtta plasseringar.
På den kan du også setje data-overlap="circle" for å få sirkulær overlap.
CSS variablar og data-attributtar
| Navn | Verdi |
|---|---|
| --dsc-badge-background | var(--ds-color-base-default) |
| --dsc-badge-color | var(--ds-color-base-contrast-default) |
| --dsc-badge-padding | 0 calc(var(--ds-size-1) + var(--ds-size-1)/2) |
| --dsc-badge-size | calc(var(--ds-size-3) + var(--ds-size-1)/2) |
| --dsc-badge-top | inherit |
| --dsc-badge-bottom | inherit |
| --dsc-badge-left | inherit |
| --dsc-badge-right | inherit |
| Navn | Verdi |
|---|---|
| data-variant | base, tinted |
| data-placement | top-right, top-left, bottom-right, bottom-left |
| data-overlap | circle |