Flikar
Du använder flikar för att gruppera infomation som hör till ett och samma område.
Design och språk
När du ska använda flikar
Du använder flikar när du behöver gruppera information som hör hop.
När du inte ska använda flikar
Du ska inte använda flikar för naviering.
Alternativa komponenter
Komponent och kod
Komponenten driftsattes första gången i version 5.2.0.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
|---|---|---|---|---|
activeTab | active-tab | Anger vilken flik som är aktiv. Går även att ange vilken flik som ska vara aktiv efter att komponenten renderas, om inget är angivet så blir första fliken automatiskt aktiv. | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | |
size | size | Storlek på komponenten, möjliga storlekar är 'medium' och 'small'. | "medium" | "small" | 'medium' |
tabsContentRef | tabs-content-ref | Referens till innehållet i en eller flera flikar, antalet bör stämma överens med antalet i tabsRef. Obs. måste föjla json format. | string | string[] | - |
tabsDescription | tabs-description | Lägger en aria-label som läsas upp av skärmläsaren, med syftet att ge en kort beskrivning på listan av flikar. | string | - |
tabsRef | tabs-ref | Referens till en eller flera flikar. Obs. måste föjla json format. | string | string[] | - |
Event | Beskrivning | Typ | |
|---|---|---|---|
activeTabChanged | Change event som triggas när activeTab ändras. Event kommer ha typnamnet "activeTabChange". Eventet innehåller ett objekt med slotnamnet på vilken tab som nu är aktiv och HTML elementet för den activa fliken. { slotname: slotnamnet på fliken, element: flikens HTML element } |
|
Medium
Exemplet visar hur du kan använda flikar för att gruppera information efter typ.
- Andalusier
- Danskt varmblod
- Kroatiskt varmblod
- Dölehäst
- Islandshäst
- Percheron
- Eriskayponny
- Gotlandsruss
- Lundyponny
<jv-tabs tabs-content-ref='["flik1 content", "flik2 content", "flik3 content"]' tabs-ref='["flik1", "flik2", "flik3"]'>
<span slot="flik1">Varmblodsraser</span>
<span slot="flik2">Kallblodsraser</span>
<span slot="flik3">Ponnyraser</span>
<ol slot="flik1 content">
<li>Andalusier</li>
<li>Danskt varmblod</li>
<li>Kroatiskt varmblod</li>
</ol>
<ol slot="flik2 content">
<li>Dölehäst</li>
<li>Islandshäst</li>
<li>Percheron</li>
</ol>
<ol slot="flik3 content">
<li>Eriskayponny</li>
<li>Gotlandsruss</li>
<li>Lundyponny</li>
</ol>
</jv-tabs>Small
- Andalusier
- Danskt varmblod
- Kroatiskt varmblod
- Dölehäst
- Islandshäst
- Percheron
- Eriskayponny
- Gotlandsruss
- Lundyponny
<jv-tabs size="small" tabs-content-ref='["flik1 content", "flik2 content", "flik3 content"]' tabs-ref='["flik1", "flik2", "flik3"]'>
<span slot="flik1">Varmblodsraser</span>
<span slot="flik2">Kallblodsraser</span>
<span slot="flik3">Ponnyraser</span>
<ol slot="flik1 content">
<li>Andalusier</li>
<li>Danskt varmblod</li>
<li>Kroatiskt varmblod</li>
</ol>
<ol slot="flik2 content">
<li>Dölehäst</li>
<li>Islandshäst</li>
<li>Percheron</li>
</ol>
<ol slot="flik3 content">
<li>Eriskayponny</li>
<li>Gotlandsruss</li>
<li>Lundyponny</li>
</ol>
</jv-tabs>Flikar för filtrering
Använd flikar för filtrering om du till exempel behöver filtera i en tabell.
Lyssna på tabChange-händelsen för att ta emot värdeändringar i komponenten.
<jv-tabs tabs-ref ='["flik1", "flik2", "flik3"]' tabs-description="Välj typ av frukt">
<span slot="flik1">Alla</span>
<span slot="flik2">Öppna</span>
<span slot="flik3">Stängda</span>
</jv-tabs>
Fullbredd flik
Bredden på flik-komponenten är satt till 100%. Bredden på kortet styrs av bredden på "behållaren" som flikarna befinner sig i.
För att styra hur flikarna ska se ut i fullbredd på en hel sida finns en CSS variabel `--jv-tabs_max-width` som styr hur stor maxbredden får vara när fliken används på en desktopskärm.
Senast publicerad
Sidansvarig för sidan är Styleguide