Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Accordion

Accordion displays a list of options that can be expanded or collapsed.
Category: Data Display Source

Import

 
import { Accordion } from "@prismane/core";

Usage

 
<Accordion>
  <Accordion.Item value="first">
    <Accordion.Control>
      First
      <Accordion.Icon />
    </Accordion.Control>
    <Accordion.Panel>First Panel Content</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="second">
    <Accordion.Control>
      Second
      <Accordion.Icon />
    </Accordion.Control>
    <Accordion.Panel>Second Panel Content</Accordion.Panel>
  </Accordion.Item>
</Accordion>

Default Value

By setting the value of the defaultValue prop, you can have an item that will be expanded by default.

<Accordion defaultValue="first">
  <Accordion.Item value="first">
    <Accordion.Control>
      First
      <Accordion.Icon />
    </Accordion.Control>
    <Accordion.Panel>This panel will be expanded by default.</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="second">
    <Accordion.Control>
      Second
      <Accordion.Icon />
    </Accordion.Control>
    <Accordion.Panel>This one will be closed by default.</Accordion.Panel>
  </Accordion.Item>
</Accordion>

Custom Accordion Icon

By providing a child to Accordion.Icon you can change the default icon that will be displayed. You can also style it, by providing a function that returns an element as a child. This function accepts the parameter of active, which will be toggled on or off when the item is active and when it's.

<Accordion defaultValue="first">
  <Accordion.Item value="first">
    <Accordion.Control>
      First
      <Accordion.Icon>
        {(active) => (
          <Transition
            as={Plus}
            style={{ transform: active ? "rotate(135deg)" : "rotate(0deg)" }}
          />
        )}
      </Accordion.Icon>
    </Accordion.Control>
    <Accordion.Panel>First Panel Content</Accordion.Panel>
  </Accordion.Item>

  <Accordion.Item value="second">
    <Accordion.Control>
      Second
      <Accordion.Icon>
        {(active) => (
          <Transition
            as={Plus}
            style={{ transform: active ? "rotate(135deg)" : "rotate(0deg)" }}
          />
        )}
      </Accordion.Icon>
    </Accordion.Control>
    <Accordion.Panel>Second Panel Content</Accordion.Panel>
  </Accordion.Item>
</Accordion>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackGetting Started
Up NextActionButton