Accordions
Example :: Solid
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
<script>
import { Accordions, Accordion } from '@colorfuldots/svelteit'
// current item selection
let selectionID
// handler to set current selection item
const handleSelection = item => {
selectionID = item
openedAccordion = 0
}
// opened Accordion // e.detail === id
let openedAccordion = 0
const toggleAccordion = e =>
(openedAccordion = e.detail == openedAccordion ? 0 : e.detail)
</script>
<Accordions>
<Accordion
id="1"
{openedAccordion}
on:accordionSelected={toggleAccordion}
primary>
<span slot="title" class="valign-wrapper">Primary</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="2"
{openedAccordion}
on:accordionSelected={toggleAccordion}
secondary>
<span slot="title" class="valign-wrapper">Secondary</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="3"
{openedAccordion}
on:accordionSelected={toggleAccordion}
success>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="4"
{openedAccordion}
on:accordionSelected={toggleAccordion}
danger>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="5"
{openedAccordion}
on:accordionSelected={toggleAccordion}
warning>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="6"
{openedAccordion}
on:accordionSelected={toggleAccordion}
info>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="7"
{openedAccordion}
on:accordionSelected={toggleAccordion}
light>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="8"
{openedAccordion}
on:accordionSelected={toggleAccordion}
dark>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
</Accordions>
Example :: Outlined
Primary Outlined
Secondary Outlined
Success Outlined
Danger Outlined
Warning Outlined
Info Outlined
Light Outlined
Dark Outlined
<script>
import { Accordions, Accordion } from '@colorfuldots/svelteit'
// current item selection
let selectionID
// handler to set current selection item
const handleSelection = item => {
selectionID = item
openedAccordion = 0
}
// opened Accordion // e.detail === id
let openedAccordion = 0
const toggleAccordion = e =>
(openedAccordion = e.detail == openedAccordion ? 0 : e.detail)
</script>
<Accordions>
<Accordion
id="9"
{openedAccordion}
on:accordionSelected={toggleAccordion}
primary
outlined>
<span slot="title" class="valign-wrapper">Primary</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="10"
{openedAccordion}
on:accordionSelected={toggleAccordion}
secondary
outlined>
<span slot="title" class="valign-wrapper">Secondary</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="11"
{openedAccordion}
on:accordionSelected={toggleAccordion}
success
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="12"
{openedAccordion}
on:accordionSelected={toggleAccordion}
danger
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="13"
{openedAccordion}
on:accordionSelected={toggleAccordion}
warning
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="14"
{openedAccordion}
on:accordionSelected={toggleAccordion}
info
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="15"
{openedAccordion}
on:accordionSelected={toggleAccordion}
light
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
<Accordion
id="16"
{openedAccordion}
on:accordionSelected={toggleAccordion}
dark
outlined>
<span slot="title" class="valign-wrapper">Success</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</span>
</Accordion>
</Accordions>
API
Coming soon!
Accordions
The accordion is a graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. An accordion is similar in purpose to a tabbed interface, a list of items where exactly one item is expanded into a panel (i.e. list items are shortcuts to access separate panels).