Accordion

Import

import { Accordion } from '@beanwei/astro-ui'

Usage

Preview

Item 1

Item 1 content

Item 2

Item 2 content

Item 3

Item 3 content

Code

---
import { Accordion } from '@beanwei/astro-ui'
---

<Accordion.Root>
  <Accordion.Item value="1">
    <Accordion.Header>Item 1</Accordion.Header>
    <Accordion.Panel>Item 1 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Header>Item 2</Accordion.Header>
    <Accordion.Panel>Item 2 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="3">
    <Accordion.Header>Item 3</Accordion.Header>
    <Accordion.Panel>Item 3 content</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Bordered

Preview

Item 1

Item 1 content

Item 2

Item 2 content

Item 3

Item 3 content

Code

---
import { Accordion } from '@beanwei/astro-ui'
---

<Accordion.Root variant="bordered">
  <Accordion.Item value="1">
    <Accordion.Header>Item 1</Accordion.Header>
    <Accordion.Panel>Item 1 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Header>Item 2</Accordion.Header>
    <Accordion.Panel>Item 2 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="3">
    <Accordion.Header>Item 3</Accordion.Header>
    <Accordion.Panel>Item 3 content</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Splitted

Preview

Item 1

Item 1 content

Item 2

Item 2 content

Item 3

Item 3 content

Code

---
import { Accordion } from '@beanwei/astro-ui'
---

<Accordion.Root variant="splitted">
  <Accordion.Item value="1">
    <Accordion.Header>Item 1</Accordion.Header>
    <Accordion.Panel>Item 1 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="2">
    <Accordion.Header>Item 2</Accordion.Header>
    <Accordion.Panel>Item 2 content</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item value="3">
    <Accordion.Header>Item 3</Accordion.Header>
    <Accordion.Panel>Item 3 content</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>