Styleguide

Flikar

Du använder flikar för att gruppera infomation inom ett visst område. Du ska däremot inte använda flikar för navigering.

Design och språk

Alternativa komponenter

När du inte ska använda flikar

Du ska inte använda flikar för navigering.

Komponent och kod

Komponenten driftsattes första gången i version 5.2.0.

Parametrar på flikar

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[]

-


Listener på flikar

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 }

CustomEvent<Object>

Medium

Exemplet visar hur du kan använda flikar för att gruppera information efter typ av nyhet.

HTML JavaScript Text 
                
<button class="c-btn">HTML</button>

Hej

Hej hopp
HTML 
<jv-tabs tabs-content-ref='["flik1 content", "flik2 content", "flik3 content"]' tabs-ref='["flik1", "flik2", "flik3"]'>
  <span slot="flik1">HTML</span>
  <span slot="flik2">JavaScript</span>
  <span slot="flik3">Text</span>

  <pre style="margin: 0" slot="flik1 content">                <code>
&lt;button class="c-btn"&gt;HTML&lt;/button&gt;
                </code>
              </pre>
  <p slot="flik2 content">Hej</p>
  <p slot="flik3 content">Hej hopp</p>
</jv-tabs>

Small

HTML JavaScript Text 
                
<button class="c-btn">HTML</button>

Hej

Hej hopp
HTML 
<jv-tabs size="small" tabs-content-ref='["flik1 content", "flik2 content", "flik3 content"]' tabs-ref='["flik1", "flik2", "flik3"]'>
  <span slot="flik1">HTML</span>
  <span slot="flik2">JavaScript</span>
  <span slot="flik3">Text</span>

  <pre style="margin: 0" slot="flik1 content">                <code>
&lt;button class="c-btn"&gt;HTML&lt;/button&gt;
                </code>
              </pre>
  <p slot="flik2 content">Hej</p>
  <p slot="flik3 content">Hej hopp</p>
</jv-tabs>

Flikar för filtrering

Alla Öppna Stängda
HTML 
<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 utt i fullbredd på en hel sida finns en CSS variabel `--jv-tabs_max-width` som styr hur stor max bredden får vara när flik befinner på en desktop skärm.

Äldre version av flikar

Senast publicerad

Sidansvarig för sidan är Styleguide