NOTE: Introduced feature in
v0.4.5
.
Accordion
Components are used for displaying related content in a collapsible stack of buttons, that toggles between views.
<script>
import {
Accordion,
Heading,
Text,
} from "@kahi-ui/framework";
</script>
<Accordion.Container logic_name="accordion-preview">
<Accordion.Group logic_id="accordion-preview-1">
<Accordion.Label palette="accent">
Section One
</Accordion.Label>
<Accordion.Section>
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-preview-2">
<Accordion.Label palette="accent">
Section Two
</Accordion.Label>
<Accordion.Section>
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-preview-3">
<Accordion.Label palette="accent">
Section Three
</Accordion.Label>
<Accordion.Section>
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Imports
<script>
import {Accordion} from "@kahi-ui/framework";
const {
Container,
Label,
Group,
Section
} = Accordion;
</script>
Logic State
NOTE: Introduced feature in
v0.5.2
.
WARNING: This feature is only available in Javascript-enabled clients.
You can manually choose which <Accordion.Section>
Components are active via the logic_state
property.
<script>
import {
Accordion,
Button,
Heading,
Text,
} from "@kahi-ui/framework";
let logic_state = "accordion-logic-state-1";
</script>
<Button
on:click={() =>
(logic_state = "accordion-logic-state-1")}
>
Select Section One
</Button>
<Button
on:click={() =>
(logic_state = "accordion-logic-state-2")}
>
Select Section Two
</Button>
<Button
on:click={() =>
(logic_state = "accordion-logic-state-3")}
>
Select Section Three
</Button>
<Accordion.Container
logic_name="accordion-logic-state"
bind:logic_state
>
<Accordion.Group
logic_id="accordion-logic-state-1"
>
<Accordion.Label palette="accent">
Section One
</Accordion.Label>
<Accordion.Section>
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-logic-state-2"
>
<Accordion.Label palette="accent">
Section Two
</Accordion.Label>
<Accordion.Section>
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-logic-state-3"
>
<Accordion.Label palette="accent">
Section Three
</Accordion.Label>
<Accordion.Section>
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Inclusive
You can change the behavior of the Accordion
to allow multiple items to be revealed at once via the behavior
property.
<script>
import {
Accordion,
Heading,
Text,
} from "@kahi-ui/framework";
</script>
<Accordion.Container
behavior="inclusive"
logic_name="accordion-inclusive"
>
<Accordion.Group logic_id="accordion-inclusive-1">
<Accordion.Label palette="accent">
Section One
</Accordion.Label>
<Accordion.Section>
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-inclusive-2">
<Accordion.Label palette="accent">
Section Two
</Accordion.Label>
<Accordion.Section>
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-inclusive-3">
<Accordion.Label palette="accent">
Section Three
</Accordion.Label>
<Accordion.Section>
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Slot
NOTE: Introduced feature in
v0.5.2
.
You can customize the icons the icons that represent the if an <Accordion.Section>
Component is open or not via the close
/ open
slots.
<script>
import {
Accordion,
Heading,
Text,
} from "@kahi-ui/framework";
</script>
<Accordion.Container logic_name="accordion-slot">
<Accordion.Group logic_id="accordion-slot-1">
<Accordion.Label palette="accent">
Section One
<svelte:fragment slot="close">
<Text is="span">-</Text>
</svelte:fragment>
<svelte:fragment slot="open">
<Text is="span">+</Text>
</svelte:fragment>
</Accordion.Label>
<Accordion.Section>
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-slot-2">
<Accordion.Label palette="accent">
Section Two
<svelte:fragment slot="close">
<Text is="span">-</Text>
</svelte:fragment>
<svelte:fragment slot="open">
<Text is="span">+</Text>
</svelte:fragment>
</Accordion.Label>
<Accordion.Section>
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-slot-3">
<Accordion.Label palette="accent">
Section Three
<svelte:fragment slot="close">
<Text is="span">-</Text>
</svelte:fragment>
<svelte:fragment slot="open">
<Text is="span">+</Text>
</svelte:fragment>
</Accordion.Label>
<Accordion.Section>
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Palette
You can change the color palette of the Accordion
buttons via the palette
property.
<script>
import {
Accordion,
Heading,
Text,
} from "@kahi-ui/framework";
</script>
<Accordion.Container logic_name="accordion-palette">
<Accordion.Group
logic_id="accordion-palette-default"
>
<Accordion.Label>
DEFAULT Section
</Accordion.Label>
<Accordion.Section>
<Heading>DEFAULT Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-accent"
>
<Accordion.Label palette="accent">
ACCENT Section
</Accordion.Label>
<Accordion.Section>
<Heading>ACCENT Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-neutral"
>
<Accordion.Label palette="neutral">
NEUTRAL Section
</Accordion.Label>
<Accordion.Section>
<Heading>NEUTRAL Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-palette-dark">
<Accordion.Label palette="dark">
DARK Section
</Accordion.Label>
<Accordion.Section>
<Heading>DARK Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-light"
>
<Accordion.Label palette="light">
LIGHT Section
</Accordion.Label>
<Accordion.Section>
<Heading>LIGHT Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-alert"
>
<Accordion.Label palette="alert">
ALERT Section
</Accordion.Label>
<Accordion.Section>
<Heading>ALERT Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-affirmative"
>
<Accordion.Label palette="affirmative">
AFFIRMATIVE Section
</Accordion.Label>
<Accordion.Section>
<Heading>AFFIRMATIVE Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-informative"
>
<Accordion.Label palette="informative">
INFORMATIVE Section
</Accordion.Label>
<Accordion.Section>
<Heading>INFORMATIVE Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-palette-negative"
>
<Accordion.Label palette="negative">
NEGATIVE Section
</Accordion.Label>
<Accordion.Section>
<Heading>NEGATIVE Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Loading
USAGE: Use your Browser's devtools to observe this feature.
You can customize the slot loading behavior of individual Accordion.Section
Components to not render their children, via the loading
property.
<script>
import {
Accordion,
Heading,
Text,
} from "@kahi-ui/framework";
</script>
<Accordion.Container logic_name="accordion-loading">
<Accordion.Group logic_id="accordion-loading-1">
<Accordion.Label palette="accent">
Section One
</Accordion.Label>
<Accordion.Section loading="lazy">
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-loading-2">
<Accordion.Label palette="accent">
Section Two
</Accordion.Label>
<Accordion.Section loading="lazy">
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group logic_id="accordion-loading-3">
<Accordion.Label palette="accent">
Section Three
</Accordion.Label>
<Accordion.Section loading="lazy">
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur
orci. Curabitur a egestas turpis, vitae
convallis sapien. Sed pellentesque
rutrum tellus, in iaculis dolor
tincidunt non. Orci varius natoque
penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>
Transitions
You can use Transition
Components to provide fancy switching animations.
<script>
import {
Accordion,
Heading,
Text,
Transition,
} from "@kahi-ui/framework";
</script>
<Accordion.Container
logic_name="accordion-transitions"
>
<Accordion.Group
logic_id="accordion-transitions-1"
>
<Accordion.Label palette="accent">
Section One
</Accordion.Label>
<Accordion.Section>
<Transition
animation="fade"
variation="enter"
>
<Heading>Item One Content</Heading>
<Text>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin
et consectetur orci. Curabitur a
egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum
tellus, in iaculis dolor tincidunt
non. Orci varius natoque penatibus
et magnis dis parturient montes,
nascetur ridiculus mus.
</Text>
</Transition>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-transitions-2"
>
<Accordion.Label palette="accent">
Section Two
</Accordion.Label>
<Accordion.Section>
<Transition
animation="fade"
variation="enter"
>
<Heading>Item Two Content</Heading>
<Text>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin
et consectetur orci. Curabitur a
egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum
tellus, in iaculis dolor tincidunt
non. Orci varius natoque penatibus
et magnis dis parturient montes,
nascetur ridiculus mus.
</Text>
</Transition>
</Accordion.Section>
</Accordion.Group>
<Accordion.Group
logic_id="accordion-transitions-3"
>
<Accordion.Label palette="accent">
Section Three
</Accordion.Label>
<Accordion.Section>
<Transition
animation="fade"
variation="enter"
>
<Heading>Item Three Content</Heading>
<Text>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Proin
et consectetur orci. Curabitur a
egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum
tellus, in iaculis dolor tincidunt
non. Orci varius natoque penatibus
et magnis dis parturient montes,
nascetur ridiculus mus.
</Text>
</Transition>
</Accordion.Section>
</Accordion.Group>
</Accordion.Container>