nve-badge

En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-badge.

 

<nve-badge>badge</nve-badge>

Eksempler

Varianter

Bruk variant for å velge farge. Primary er standard.

<nve-badge>primary</nve-badge>
<nve-badge variant="neutral">neutral</nve-badge>
<nve-badge variant="success">success</nve-badge>
<nve-badge variant="warning">warning</nve-badge>
<nve-badge variant="danger">danger</nve-badge>
<nve-badge variant="brand">brand</nve-badge>

Størrelse

Bruk size for å velge størrelse. medium er standard.

<nve-badge size="small">small</nve-badge>
<nve-badge>medium</nve-badge>
<nve-badge size="large">large</nve-badge>

Lav metning

Bruk saturation="subtle" for lysere bakgrunnsfarge. Teksten vil også skifte farge.

<dl>
  <dt>lav metning</dt>
  <dd>
    <nve-badge saturation="subtle">primary</nve-badge>
    <nve-badge saturation="subtle" variant="neutral">neutral</nve-badge>
    <nve-badge saturation="subtle" variant="success">success</nve-badge>
    <nve-badge saturation="subtle" variant="warning">warning</nve-badge>
    <nve-badge saturation="subtle" variant="danger">danger</nve-badge>
    <nve-badge saturation="subtle" variant="brand">brand</nve-badge>
  </dd>
  <dt>vanlig</dt>
  <dd>
    <nve-badge>primary</nve-badge>
    <nve-badge variant="neutral">neutral</nve-badge>
    <nve-badge variant="success">success</nve-badge>
    <nve-badge variant="warning">warning</nve-badge>
    <nve-badge variant="danger">danger</nve-badge>
    <nve-badge variant="brand">brand</nve-badge>
  </dd>
</dl>

Knapp med badge

Du kan vise badge på en knapp ved å legge badge inni <nve-button>.

<nve-button>
  Knapp
  <nve-badge>badge</nve-badge>
</nve-button>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
variant	| 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'brand' = 'primary'		Variant
size	'small' | 'medium' | 'large' = 'medium'		Størrelse på komponenten
saturation	'subtle' | null = null		Viser lav metning, default er at denne ikke er satt