nve-tag

En tag som brukes for å vise litt info eller for filtre. Har en valgfri lukke-knapp

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-tag.

 

<nve-tag>Se her!</nve-tag>

Eksempler

Med ekstra tekst

Bruk attributten "extra-text" for å legge til ekstra tekst. Denne er slankere. Du kan også bruket sporet "extra"

<nve-tag extra-text="Ekstra tekst"> Se her! </nve-tag>
<nve-tag>
  <span>Se her!</span>
  <span slot="extra" style="color: red;">Ekstra tekst</span>
</nve-tag>

Størrelse

Attributten "size" brukes for å sette størrelse på tag. Velg mellom small og medium (medium er default)

<nve-tag size="medium"> Se her! </nve-tag> <nve-tag size="small"> Se her! </nve-tag>

Ikon

Sporet "prefix" kan brukes for å legge inn et ikon foran teksten

<nve-tag size="medium">
  Se her!
  <nve-icon slot="prefix" library="Sharp" name="error" />
</nve-tag>

</nve-tag>

Du kan også bruke attributten "dot" for å legge inn en prikk istedenfor ikon

<nve-tag size="medium" dot> Se her! </nve-tag>

Variant og saturation

Disse attributtene brukes for å sette farge på tag

• Variant kan være neutral, info, success, warning, error; neutral er standard
• Saturation kan være emphasized, subtle, default; default er standard

<div style="display: grid; align-items: center; gap: 16px; grid-template-columns: repeat(3, max-content)">
  <nve-tag saturation="emphasized">
    Neutral, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="neutral">
    Neutral, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle">
    Neutral, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="info">
    Info, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="info">
    Info, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="info">
    Info, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="success">
    Success, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="success">
    Success, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="success">
    Success, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="warning">
    Warning, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="warning">
    Warning, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="warning">
    Warning, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="error">
    Error, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="error">
    Error, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="error">
    Error, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
</div>

Tag med lukk-knapp

Attributten closeable brukes for å si at tag skal ha en "Lukk"-knapp

• Ved klikk så sendes event "nve-close"
• Send også med "close-aria-label" dersom aria-label ikke skal være "Lukk"

<!-- Eksempel-script som legger på event-listener på knappen -->
<script>
  const closeable = document.querySelectorAll('nve-tag[closeable]');
  closeable.forEach((tag) =>
    tag.addEventListener('nve-close', (e) => {
      const variant = e.target.variant;
      const saturation = e.target.saturation;
      alert(`Klikket ${variant} ${saturation} knapp`);
    })
  );
</script>

<div style="display: grid; align-items: center; gap: 16px; grid-template-columns: repeat(3, max-content)">
  <nve-tag saturation="emphasized" closeable>
    Neutral, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="neutral" closeable>
    Neutral, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" closeable>
    Neutral, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="info" closeable>
    Info, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="info" closeable>
    Info, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="info" closeable>
    Info, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="success" closeable>
    Success, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="success" closeable>
    Success, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="success" closeable>
    Success, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="warning" closeable>
    Warning, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="warning" closeable>
    Warning, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="warning" closeable>
    Warning, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>

  <nve-tag saturation="emphasized" variant="error" closeable close-aria-label="Custom label satt">
    Error, emphasized
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="default" variant="error" closeable>
    Error, default
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
  <nve-tag saturation="subtle" variant="error" closeable>
    Error, subtle
    <nve-icon slot="prefix" library="Sharp" name="error" />
  </nve-tag>
</div>

Spor

Navn	Beskrivelse
(standard)	Tekst på tag
extra	Ekstra tekst etter hovedteksten. Vises som standard med slankere tekst
prefix	Før teksten. Brukes til ikon

Hendelser

Navn	Arvet fra	Beskrivelse
nve-close		Bruker klikket på lukk-knappen

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
variant	string = 'neutral'		Fargen på tag. neutral, success, info, warning, error
saturation	string = 'default'		Hvor sterk fargen på bakgrunnen er. emphasized, subtle, default
size	string = 'medium'		Størrelse. small, medium
'extra-text'	string = ''		Ekstra tekst
dot	boolean = false		Viser dot-ikon i prefix
'closeable'	boolean = false		Viser lukke-knapp
'close-aria-label'	string = 'Lukk'		aria-label på lukke-knapp

Deler

Navn	Beskrivelse
base	Topp-element
text	Hoved-teksten
extra	Ekstra-tekst
close	Lukk-ikon