2.5.6

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` OR `object` OR `array` `content` Epanadable content of an item. Type: `string` OR `object` OR `array` `open` Automatically expand an item on page load. 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` or `false`
no_separator	Hides the separator in between items.	`boolean`	`false`	`true` or `false`
box_shadow	Creates a box shadow around the accordion.	`boolean`	`false`	`true` or `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` or `center`