nve-exposed-height

Visualisering av utsatt høyde for et skredproblem. Viser et fjell med fargelegging av utsatt høyde i tillegg til piler og høydegrenser.

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-exposed-height.

 

<nve-exposed-height variant="1" height1="1000"></nve-exposed-height>

Eksempler på bruk

Varianter

Bruk variant for å angi om skredproblemet gjelder:

1. over en viss høyde
2. under en viss høyde
3. både over og under visse høyder
4. mellom to høyder

Variant 1 er standard. I tillegg må du angi høyde:

• For variant 1 og 2 må du sende inn height1.
• For variant 3 og 4 må du sende inn både height1 og height2. Komponenten finner selv ut om height1 eller height2 er høyest.

<nve-exposed-height variant="1" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="2" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="3" height1="800" height2="1200"></nve-exposed-height>
<nve-exposed-height variant="4" height1="800" height2="1200"></nve-exposed-height>

Feil bruk av variant og høyde

Her er noen eksempler på feil bruk:

<nve-exposed-height></nve-exposed-height>
<nve-exposed-height variant="2" height2="1000"></nve-exposed-height>
<p>variant 1 og 2 mangler height1</p>
<nve-exposed-height variant="3" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="4" height1="1000"></nve-exposed-height>
<p>variant 3 og 4 må ha både height 1 og height2</p>

Størrelse

Endre bredden med CSS-variabelen --exposed-height-width. Standard bredde er 150px.

<nve-exposed-height variant="1" height1="1000" style="--exposed-height-width: 100px;"></nve-exposed-height>
<nve-exposed-height variant="1" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="1" height1="1000" style="--exposed-height-width: 200px;"></nve-exposed-height>

Språk

Sett lang til noe som starter på 'en' for å vise aria-label på engelsk. Norsk er standard.

en:
<nve-exposed-height lang="en" variant="1" height1="1000"></nve-exposed-height>
<nve-exposed-height lang="en" variant="2" height1="1000"></nve-exposed-height>
<nve-exposed-height lang="en-GB" variant="3" height1="800" height2="1200"></nve-exposed-height>
<nve-exposed-height lang="en-US" variant="4" height1="800" height2="1200"></nve-exposed-height>

no:
<nve-exposed-height variant="1" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="2" height1="1000"></nve-exposed-height>
<nve-exposed-height variant="3" height1="800" height2="1200"></nve-exposed-height>
<nve-exposed-height variant="4" height1="800" height2="1200"></nve-exposed-height>

Farger

Bruk css-variablene --exposed-height-affected-color og --exposed-height-unaffected-color for å overstyre fargene.

<nve-exposed-height style="--exposed-height-affected-color: orange;--exposed-height-unaffected-color: lightgreen" variant="1" height1="1000" >
</nve-exposed-height

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
variant	1 | 2 | 3 | 4 = 1		Type fyll: 1=over, 2=under, 3=over og under, 4=mellom
height1	number = 0		Første høydeverdi i meter
height2	number = 0		Andre høydeverdi i meter (for variant 3 og 4)
lang	string = 'no'		Språk for aria-label. Blir satt til engelsk om lang starter på 'en'. Standard er norsk.
testId	string | undefined = undefined