Skip to content

nve-relative-time

En enkel wrapper rundt SlRelativeTime. Bruker Intl.RelativeTimeFormat API'et for å formattere dato og vise tekst på valgte språk.

Arvet fra SlRelativeTime.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

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-relative-time.

 

Enkel bruk

html
<nve-relative-time date="1970-01-01"></nve-relative-time>

Eksempler

Bruk lang for å sette hvilket språk eller målform som teksten skal vises på. nb og nn for norske målformer

html
<nve-relative-time date="1970-01-01" lang="nn"></nve-relative-time>
<nve-relative-time date="1970-01-01" lang="nb"></nve-relative-time>
<nve-relative-time date="1970-01-01" lang="ja"></nve-relative-time>

sync-egenskapen kan brukes slik at teksten oppdateres jevnlig (teksten under vil oppdatere seg 1 minutt etter lasting av siden) Merk også at eksempelet ikke setter date-egenskapen, da settes tidspunktet til 'nå' ved lasting

html
<nve-relative-time lang="nn" sync></nve-relative-time>

numeric-egenskapen kan settes til always for å si at verdien alltid skal vises med tall

html
<nve-relative-time lang="nn" sync numeric="always"></nve-relative-time>

Bruk format-egenskapen for å si noe om formatteringen som skal vises. Velg mellom long, short, og narrow,

html
<nve-relative-time date="2024-01-01" lang="nb" format="long"></nve-relative-time>
<nve-relative-time date="2024-01-01" lang="nb" format="short"></nve-relative-time>
<nve-relative-time date="2024-01-01" lang="nb" format="narrow"></nve-relative-time>

Egenskaper

NavnTypeArvet fraBeskrivelseReflected
testIdstring | undefined = undefined
langstring = ''Setter språket som brukes. Bruk 'nn' eller 'nb' for norsk, 'en' for engelsk. Dersom denne ikke settes (og heller ikke arves) så er det browseren sitt språk som brukes