Struktur
<lk-rating>
<div>
<div>
[
<input/>
<label>
<svg>
...
</svg>
</label>
]
</div>
<output/>
</div>
(p/)
</lk-rating>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid | string | "" | id= for interne elementer |
| color | color:string | "yellow" | |
| render-text | boolean | false | |
| input-name | string | "rating" | |
| required | boolean | false | |
| error-message | string | "Du må gi en rating!" |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean | |
| getRate | () | rate:number |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-rating guid="yallow" input-name="rating1" color="yellow"></lk-rating>
<br><br>
<lk-rating guid="yallow2" input-name="rating2" color="yellow" render-text=true></lk-rating>
<br><br>
<lk-rating guid="dark-blue-rate" input-name="rating3" color="dark-blue"></lk-rating>
<br><br>
<lk-rating guid="orange-rate" input-name="rating4" color="orange"></lk-rating>