nve-label

Ledetekst med verktøy-hint (og tilhørende info-ikon) Kan også brukes i nve-menu for å skille kategorier. Her får den en spesiell utforming.

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

 

<nve-label value="Ledetekst"></nve-label>

Eksempler

Størrelse

Bruk size for å sette størrelse. small er standard.

<nve-label size="x-small" value="x-small"></nve-label>
<nve-label value="small"></nve-label>
<nve-label size="medium" value="medium"></nve-label>
<nve-label size="large" value="large"></nve-label>

Info-ikon og verktøyhint

Bruk tooltip for å vise et info-ikon etter ledeteksten. Hold muspeker over ledetekst eller ikon for å vise hjelpeteksten. Du kan formatere hjelpeteksten i html ved å legge den i sporet tooltip.

<nve-label value="Svev over ikonet" tooltip="Hjelpetekst"></nve-label>
<nve-label value="Svev over ikonet for å se hjelpetekst i HTML">
  <div slot="tooltip">Hjelpetekst i <strong>HTML</strong></div>
</nve-label>
<nve-label value="Med svart ikon" iconColor="black" tooltip="Hjelpetekst"></nve-label>
<nve-label value="Med ikon på venstre side" iconLeft tooltip="Hjelpetekst"></nve-label>

Innhold etter ledetekst

Bruk sporet suffix for å vise noe etter ledeteksten.

<nve-label value="Laster ned data">
  <nve-spinner slot="suffix"></nve-spinner>
</nve-label>

Spor

Navn	Beskrivelse
(default)	teksten som skal vises. Eller du kan bruke value-attributtet
tooltip	innhold i denne blir vist som en tooltip hvis man svever over info-ikonet
suffix	viser ekstra innhold etter hoved label som f.eks. nve-spinner TODO: Skal være litt mer plass mellom tekst og info-ikon TODO: Hvis du angir både value og innhold i slot, er det value som vises. Det bør være motsatt.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
hasSlotController	= new HasSlotController(this, 'tooltip')
value	string = ''		Teksten som skal vises
size	'x-small' | 'small' | 'medium' | 'large' = 'small'		Størrelse
light	boolean = false		Sett denne hvis du vil ha litt lettere skriftvekt
tooltip	string | undefined = undefined		Denne teksten blir vist som et verktøyhint hvis man svever over info-ikonet
iconLeft	boolean = false		Om tooltip ikone skal vises på venstre siden
iconColor	'default' | 'black' = 'default'		Ikon farge
for	string | undefined = undefined		For-attributten legges på label, og brukes som html-standard. Sett til samme som id på elementet label tilhører