Accordion

Source code
Table of Contents

Usage

Default

  • Content 1
  • Content 2
  • Content 3
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion>
  <AccordionItem title="Title 1">Content 1</AccordionItem>
  <AccordionItem title="Title 2">Content 2</AccordionItem>
  <AccordionItem title="Title 3">Content 3</AccordionItem>
</Accordion>

Chevron aligned left

  • Content 1
  • Content 2
  • Content 3
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion align="start">
  <AccordionItem title="Title 1">Content 1</AccordionItem>
  <AccordionItem title="Title 2">Content 2</AccordionItem>
  <AccordionItem title="Title 3">Content 3</AccordionItem>
</Accordion>

Custom title slot

  • Content 1
  • Content 2
  • Content 3
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion>
  <AccordionItem>
    <h5 slot="title" style="color: red;">Custom title slot</h5>
    Content 1
  </AccordionItem>
  <AccordionItem title="Title 2">Content 2</AccordionItem>
  <AccordionItem title="Title 3">Content 3</AccordionItem>
</Accordion>

First item open

  • Content 1
  • Content 2
  • Content 3
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion>
  <AccordionItem title="Title 1" open>Content 1</AccordionItem>
  <AccordionItem title="Title 2">Content 2</AccordionItem>
  <AccordionItem title="Title 3">Content 3</AccordionItem>
</Accordion>

Skeleton

  •  

<script>
  import { Accordion } from "carbon-components-svelte";
</script>

<Accordion skeleton count={3} />

Skeleton (closed)

  •  

<script>
  import { Accordion } from "carbon-components-svelte";
</script>

<Accordion skeleton open={false} count={3} />
Table of Contents