Badge

Unable to parse html

const Preview = () => {
  return <Badge count={15} maxCount={9} />;
};

render(<Preview />)

Bruk

Badge rendrar teksten sin med CSS i eit :before-pseudoelement på ein span-tagg. Du brukar klassenavnet ds-badge, i saman med data-attributt data-count.

CSS variabler og data-attributter

Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.

Eksempel

Flytande

Dersom du vil ha den flytande, så må ds-badge--position klassen nyttast på ein wrapper rundt elementet som badge skal plasserast over. Bruk data-placement på wrapperen for å bestemme plasseringa. Sjå seksjonen «CSS variabler og data-attributter» under for støtta verdiar.

Ska badge plasserast på et sirkulært element kan du også setje data-overlap="circle" for å få sirkulær overlap.

Unable to parse html

const Floating = () => (
  <>
    <Badge.Position placement='top-right'>
      <Badge data-color='danger' count={2}></Badge>
      <EnvelopeClosedFillIcon
        title='Meldinger'
        style={{ height: '2rem', width: 'auto' }}
      />
    </Badge.Position>
  </>
);

render(<Floating />)

Egendefinert plassering

Dersom du ikkje får badge til å liggje der du ynskjer, kan du bruke variablene --dsc-badge-top|right|bottom|left for å overstyre plasseringa.

Dette fungerer også når du bruker data-overlap="circle".

Unable to parse html

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 />)

React