mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
e886d772c7
- add ref prop for applicable components (#196) - add slot to Content Switcher `Switch` component (#183) - remove fillArray, css utilities
56 lines
1.9 KiB
Svelte
56 lines
1.9 KiB
Svelte
<script>
|
|
export let story = undefined;
|
|
export let title = undefined;
|
|
export let open = undefined;
|
|
export let count = undefined;
|
|
|
|
import Accordion from "./Accordion.svelte";
|
|
import AccordionItem from "./AccordionItem.svelte";
|
|
import AccordionSkeleton from "./Accordion.Skeleton.svelte";
|
|
</script>
|
|
|
|
{#if story === 'skeleton'}
|
|
<div style="width: 500px">
|
|
<AccordionSkeleton {open} {count} />
|
|
</div>
|
|
{:else}
|
|
<Accordion>
|
|
<AccordionItem {title} {open}>
|
|
<p>
|
|
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.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Section 2 title">
|
|
<p>
|
|
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.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem title="Section 3 title">
|
|
<p>
|
|
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.
|
|
</p>
|
|
</AccordionItem>
|
|
<AccordionItem>
|
|
<div slot="title">
|
|
Section 4 title (
|
|
<em>the title can be a node</em>
|
|
)
|
|
</div>
|
|
<p>
|
|
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.
|
|
</p>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
{/if}
|