Utility
Styling
A component to display groups of related information with nested details.
The default behavior is to only allow one section open at a time, but allows
for multiple as well. Use the Accordian
component as a wrapper, and
AccordianItem
components to contain each section.
<script>
import {
Accordian,
AccordianItem
} from '@thetinkerinc/colibri';
import style from './style.js';
</script>
<Accordian {style}>
<AccordianItem {style}>
<svelte:fragment slot="header">☄ A category</svelte:fragment>
With a very detailed description.
</AccordianItem>
<AccordianItem {style}>
<svelte:fragment slot="header">
☀ Sunny weather
</svelte:fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Suscipit adipiscing bibendum est ultricies integer
quis auctor. Rhoncus dolor purus non enim.
</AccordianItem>
<AccordianItem {style}>
<svelte:fragment slot="header">
☁ Partly cloudy
</svelte:fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Etiam sit amet nisl purus in mollis. At lectus urna
duis convallis convallis tellus.
</AccordianItem>
<AccordianItem {style}>
<svelte:fragment slot="header">
☃ A kind snowman
</svelte:fragment>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Viverra nibh cras pulvinar mattis. Mollis aliquam
ut porttitor leo a.
</AccordianItem>
</Accordian>
Props
multiple:
style:
Object Slots
The slots apply to AccordianItem
.
Accordian
is used only as a wrapper, and should contain a list of
AccordianItem
in its default slot.
default:
header:
Events
This component doesn't emit any events
Styling
backgroundColor:
Overrides:
--colibri-element-background-color
border:
Overrides:
--colibri-border
borderRadius:
Overrides:
--colibri-border-radius
titleFontSize:
Overrides:
--colibri-font-size-lg
//style.js
export default style = {};