Struktur
<lk-button-link>
<a>
(span)
(img/)
(/span)
<span>
<slot/>
</span>
(span)
(img/)
(/span)
</a>
</lk-banner>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| url | url:string | "#" | <a> sin href= |
| target | string | "" | <a> sin target= |
| variant | string | "primary" | Legger til "button--variant" i <a> sin class= |
| size | string | "normal" | Legger til "button--size" i <a> sin class= |
| icon-after icon-before |
path:string | "" | <img> sine src |
| animation | string | "normal" | Legger til "animation" i <a> sin class= |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert inni <a> sin <span> |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Knap lenk med animasjon
<div class="container">
<lk-button-link url="https://lillestrom.kommune.no" target="_blank" icon-after="/assets/images/arrow-right.png">
Jobb i Lillestrøm
</lk-button-link>
<br><br>
<lk-button-link url="https://skedsmo.kommune.no" target="_blank" variant="danger" size="large"
icon-before="/assets/images/arrow-left.png">
Avbryt innsending
</lk-button-link>
<br><br>
<lk-button-link url="/" variant="ghost" size="xlarge">
Gå til Vigilo
</lk-button-link>
<br><br>
<lk-button-link url="/" variant="ghost-border" icon-after="/assets/images/icon-navigation-arrow-right.svg"
size="medium">
Gå til Vigilo
</lk-button-link>
<h4 class="section-title margin-top--huge">Knap lenk med animasjon</h4>
<br>
<lk-button-link url="https://lillestrom.kommune.no" target="_blank" icon-after="/assets/images/arrow-right.png"
animation="animated-right">
Jobb i Lillestrøm
</lk-button-link>
<br><br>
<lk-button-link url="/" variant="ghost-border" icon-after="/assets/images/icon-navigation-arrow-right.svg"
size="medium" animation="animated-right">
Gå til Vigilo
</lk-button-link>
<br><br>
</div>