2.9.2

Accordion

Accordion Component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-accordion

Source code

View on Github

Dependencies

@bolt/components-icon

@bolt/core

handorgel

Overview

The Accordion component is a vertical list of items, each of which can be expanded or collapsed to show more content.

Install via NPM

npm install @bolt/components-accordion

Usage

  {% include "@bolt-components-accordion/accordion.twig" with {
  items: [
    {
      trigger: "Accordion item 1",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 2",
      content: "This is the accordion content.",
    },
    {
      trigger: "Accordion item 3",
      content: "This is the accordion content.",
    }
  ]
} only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name	Description	Type	Default Value	Option(s)
Items	All of the items in the accordion. Each item should contain a header and a content.	`array`	—	[items]: Type: `object` Properties: `trigger` Trigger content of an item. Type: `string` , `object` , `array` `content` Expandable content of an item. Type: `string` , `object` , `array` `open` Automatically expand an item on page load. Type: `boolean` `inactive` Display item trigger as an inactive element. Item content will be collapsed and the toggle icon hidden. Type: `boolean` `uuid` Unique ID for an item, randomly generated if not provided. Type: `string` `open_label` Accessible label for the open trigger to expand an item. Type: `string` `close_label` Accessible label for the close trigger to collapse an item. Type: `string`
Single	Allow only one section to open at a time.	`boolean`	`false`	`true`, `false`
No_separator	Hides the separator in between items.	`boolean`	`false`	`true`, `false`
Box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	`true`, `false`
Spacing	Controls the inset spacing of each item.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
Icon_valign	Vertically align the accordion trigger content and trigger icon.	`string`	`center`	`top`, `center`