Doggo Storybook 0.10.2

Accordion

Renders a set of headings that control the visibility of their content sections.

Read more Read less

Usage

<.accordion id="dog-breeds">
  <:section title="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:section>
  <:section title="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:section>
  <:section title="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:section>
</.accordion>

Friendly, intelligent, great with families. Origin: Scotland. Needs regular exercise.

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
expanded :atom

Defines how the accordion sections are initialized.

 Read more Read less
:all
  • :all - All accordion sections are expanded by default.
  • :none - All accordion sections are hidden by default.
  • :first - Only the first accordion section is expanded by default.
heading :string

The heading level for the section title (trigger).

 Read more Read less
"h3"
Required id * :string
rest :global

Any additional HTML attributes.
Required section * :slot
Show slot attributes Hide slot attributes
title :string 
<:section title="Golden Retriever">
  <p>
    Friendly, intelligent, great with families. Origin: Scotland. Needs
    regular exercise.
  </p>
</:section>
<:section title="Siberian Husky">
  <p>
    Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
    Loves cold climates.
  </p>
</:section>
<:section title="Dachshund">
  <p>
    Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
  </p>
</:section>