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
html
<nve-label value="Ledetekst"></nve-label>Eksempler
Størrelse
Bruk size for å sette størrelse. small er standard.
html
<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.
html
<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.
html
<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 | Attributt-synk | Type | Standardverdi | Arvet fra | Beskrivelse |
| 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 |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
| renderInfoIconWithTooltip | ||||
| renderValueProperty | ||||
| render |