Struktur
<lk-filter>
<input/>
<slot/>
</lk-filter>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid | string | "" | <input> sin id= |
| name | string | "" | <input> sin name= |
| item-selector | CSS-selector:string | ".filterable" | |
| group-selector | CSS-selector:string | "" | Skjuler group-selector-elementer hvis item-selector-elementene inni er skjult |
| includeLinks | boolean | false | Inkluderer lenker (href) i søket |
| placeholder | string | "Filtrer innholdet" | |
| autofocus | boolean | false |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert etter <input> inni <lk-filter> |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Grønn block
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Blå block
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Gul block
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Pink block
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Grønn block 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Blå block 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Gul block 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Pink block 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Grønn block 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Blå block 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Gul block 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
Pink block 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo tempora minus esse, iure illum id!
<lk-filter>
<div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Grønn block</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Blå block</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Gul block</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Pink block</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Grønn block 2</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Blå block 2</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Gul block 2</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Pink block 2 </h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--green padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Grønn block 3</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--light-blue padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Blå block 3</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--yellow padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Gul block 3</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
<div class="filterable background--pink padding-y--medium padding-x--tiny margin-bottom--tiny">
<h5 class="small-title">Pink block 3</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex eligendi perspiciatis ad adipisci explicabo
tempora minus esse, iure illum id!
</p>
</div>
</lk-filter>