Du kan använda utfällbara stycken, det vill säga accordion, när du vill göra det möjligt att dölja viss text eller annat innehåll och låta användaren välja när innehållet ska visas.
Använd inte utfällbara stycken för att navigera i ett flöde med flera steg, till exempel i en ansökan.
Rubriken ska vara tydlig så att användaren förstår vilken information som finns i det utfällbara stycket. Det är extra viktigt på webbplatser när en användare kan ha använt sökfunktionen och den sökta informationen finns i ett ihopfällt stycke.
För att göra utfällbara stycken tillgängliga ska
Komponenten driftsattes första gången i version 18.0.31.
Komponentens storlek styrs av innehållet i komponenten och finns därför endast i en storlek.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
accordionId | accordion-id | Id för accordion titlen, om inget anges autogenereras ett id. | string | - |
contentRef | content-ref | Referens till innehåll som visas om accordion är öppet . | string | - |
controlRowRef | control-row-ref | Referens till control-row platshållare brevid trigger. | string | - |
expanded | expanded | Initierar öppen eller dold status på accordion. | boolean | false |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
triggerContentRef | trigger-content-ref | Referens till innehåll i trigger-knappet. | string | - |
triggerGap | trigger-gap | Avstånd mellan trigger och control-row Enum värde: 'l-gap-lg' | 'l-gap-md' | 'l-gap-sm' | "l-gap-lg" | "l-gap-md" | "l-gap-sm" | 'l-gap-sm' |
Event | Beskrivning | Typ |
---|---|---|
expandedChange | Change event som triggas när expanded attributet ändras. | CustomEvent<boolean> |
En drake kan leva i 15-20 år, om den blir väl omhändertagen. Olika raser har också olika levnadsåldrar. Det finns drakar som blivit upp emot 30 år, men detta är väldigt sällsynt.
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-col-1-n l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Fakta om drakar</span>
</span>
<div slot="exempel_content">
<p class="mb-0">
En drake kan leva i 15-20 år, om den blir väl omhändertagen. Olika raser har också olika
levnadsåldrar. Det finns drakar som blivit upp emot 30 år, men detta är väldigt sällsynt.
</p>
</div>
</jv-accordion>
Namn: Tom
Ålder: 16 år
<jv-accordion trigger-content-ref="exempel_trigger" control-row-ref="exempel_controlrow" content-ref="exempel_content" trigger-gap="l-gap-sm" expanded="true" accordion-id="exempel_1">
<span slot="exempel_trigger" class="l-col-1-n l-flex--nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Kanlaon dragon</span>
</span>
<div slot="exempel_controlrow" class="l-flex-horizontal md:l-flex--nowrap l-gap-md">
<button class="c-btn--medium"><span class="sjv-i-skrap"></span>Ta bort</button>
</div>
<div slot="exempel_content">
<p><strong>Namn: </strong>Tom</p>
<p><strong>Ålder: </strong>16 år</p>
</div>
</jv-accordion>
<ul class="c-accordion-group e-ul">
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex-nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Druk</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex-nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Tatsu</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
</ul>
<ul class="c-accordion-group--list e-ul">
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm l-align-center">
<span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Förgröningsstöd</span>
</span>
<span>50 000,00 kr</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon"></span>
<span>Nötkreaturstöd</span>
</span>
<span>1 000,00 kr</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
</ul>
<div class="l-flex-1-n list-heading">
<div style="font-weight: bold;">Namn</div>
<div style="font-weight: bold;" class="l-flex l-align-right">Belopp</div>
</div>
<ul class="c-accordion-group--table e-ul">
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon" aria-hidden="true"></span>
<span><span class="screen-reader-text">Stöd</span>Förgröningsstöd</span>
</span>
<span><span class="screen-reader-text">Belopp</span>50 000,00 kr</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
<li>
<jv-accordion trigger-content-ref="exempel_trigger" content-ref="exempel_content">
<span slot="exempel_trigger" class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="l-flex-horizontal l-flex--nowrap l-gap-sm">
<span class="sjv-i-caret-hoger c-accordion--title-icon" aria-hidden="true"></span>
<span><span class="screen-reader-text">Stöd</span>Nötkreaturstöd</span>
</span>
<span><span class="screen-reader-text">Belopp</span>1 000,00 kr</span>
</span>
<div slot="exempel_content">
<span>Content</span>
</div>
</jv-accordion>
</li>
</ul>