Struktur
<lk-search>
...
</lk-search>
Wcag
Det kreves litt mer jobb for å støtte skjermlesere.
Trenger støtte for: role=combobox, aria-autocomplete=list og aria-controls=""
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid | string | "" | <input> sin id= og <label> sin for= |
| label | string | "Hva kan vi hjelpe deg med?" | <label> sin tekst |
| placeholder | string | "Sett inn søke ord" | <input> sin placeholder |
| input-name | string | "" | <input> sin name= |
| button-text | string | "Søk" | <button> sin tekst |
| form-action | string | "#" | <form> sin action= |
| form-method | string | "POST" | <form> sin method= |
| required | boolean | false | <input> sin required= |
| suggestions-url | string | "" | |
| background | any | "#EBEBEB" | Legger til "background: background" i <section> sin style= |
| submit-handler | function(event) | (event) => {formSubmit(event)} |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| getFocus | () | null | Kaller .focus() på <input> |
Eventer
Ref. Stenciljs.com
| Event | Parameter | Beskrivelse |
|---|---|---|
| formSubmit | () |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-search
label="Hva kan vi hjelpe deg med?"
placeholder="Skriv inn søkeord"
guid="portal-search"
input-name="q"
button-text="Søk"
form-action="/"
form-method="GET"
required="false"
suggestions-url="/guide/data/search.json?q=">
</lk-search>