Accordion
Accordion is used for showing and hiding content.
Usage
import { Accordion } from 'stwui';
import Accordion from 'stwui/accordion';
Basic Accordion
<script lang="ts">
import { Accordion } from 'stwui';
let open = '';
function handleClick(item: string) {
if (open === item) {
open= '';
} else {
open = item;
}
}
</script>
<Accordion>
<Accordion.Item open={open === 'item1'}>
<Accordion.Item.Title slot="title" on:click={() => handleClick('item1')}>
Item 1
</Accordion.Item.Title>
<Accordion.Item.Content slot="content">
accordion_body
</Accordion.Item.Content>
</Accordion.Item>
<Accordion.Item open={open === 'item2'}>
<Accordion.Item.Title slot="title" on:click={() => handleClick('item2')}>
Item 2
</Accordion.Item.Title>
<Accordion.Item.Content slot="content">
accordion_body
</Accordion.Item.Content>
</Accordion.Item>
<Accordion.Item open={open === 'item3'}>
<Accordion.Item.Title slot="title" on:click={() => handleClick('item3')}>
Item 3
</Accordion.Item.Title>
<Accordion.Item.Content slot="content">
accordion_body
</Accordion.Item.Content>
</Accordion.Item>
</Accordion>
Accordion Slots
default | <Accordion.Item /> |
Accordion.Item Slots
title | <Accordion.Item.Title slot="title" /> |
content | <Accordion.Item.Content slot="content" /> |
Accordion.Item.Title Slots
Accordion.Item.Content Slots
Accordion Class Identifiers
stwui-accordion |
stwui-accordion-item |
stwui-accordion-item-title |
stwui-accordion-item-content |
stwui-accordion-chevron-container |