ptcs-accordion

Overview

A ptcs-accordion is a vertically stacked list of items. Each item can be expanded or collapsed to reveal the items content. There can be zero expanded items, one, or more than one item expanded at a time, depending on the proeprties.

Each item in a ptcs-accordion is a ptcs-accordion-item. The ptcs-accordion-item has two main parts:

• The header that contains the header text and an optional trigger icon
• The panel that contains the content of the item. The panel can contain a sub-accordion, which results in an expandable / collapsible tree structure.

Usage Example

<ptcs-accordion items="[[items]]"></ptcs-accordion>

Component API

Properties

Property	Type	Description	Default	Triggers a changed event
fillMissingIcons	Boolean	Displays a filler icons next to items with a missing icon	false
disabled	Boolean	Disables the accordion
hideIcons	Boolean	Hides the icons that are displayed next to the accordion items	false
hideTrigger	Boolean	Specifies if the trigger icons should be hidden.
items	Array	The items of the accordion. Currently an item has three fields, label (a String), icon (a String) and content, which is either a String or an Array of sub-items that should be renedered using a sub-accordion.
maxWidth	Number	Minimum width of accordion. Directly mapped to CSS max-width.
minWidth	Number	Minimum width of accordion. Directly mapped to CSS min-width.
multipleOpenItems	Boolean	Specifies if several panels can be expanded at the same time. If false only a single panel can be expanded.
triggerAlign	String	Specifies where the trigger icons should be located in the header. Supported values: 'left' or 'right'.
triggerCanCollapse	Boolean	Specifies if the user can collapse the panel using the trigger. If false, the panel can only be expanded with the trigger, not collapsed. In this case the only way to collapse the panel is to expand another panel in the accordion (assuming that multipleOpenItems is true).
triggerType	String	Specifies trigger icons. Supported values are 'doublecarets', 'singlecaret', 'close', and 'plus/minus'

Methods

No methods

Events

No Events

The Parts of the Component

Accordion parts

Part	Description
item	An accordion item

Accordion items parts

Part	Description
header	The accordion header, that is always visible
label	The header label
trigger-button	The header trigger icon
panel	The accordion panel, which is only visible if the item is expanded
sub-accordion	The optional sub-accordion, that resides in the panel

State attributes

Accordion state attributes

Attribute	Description	Part
disabled	Is the accordion disabled?	:host

Accordion item state attributes

Attribute	Description	Part
disabled	Is the item disabled?	:host
sub-accordion	Do the panel contain a sub-accordion?	:host
mute	Can the item state (expanded / collapsed) be affected by activating the trigger?	:host
opened	Is the panel expanded?	:host
aria-expanded	"true" the panel is expanded, and "false" otherwise.	label
aria-disabled	"true" the panel state can be changed with the trigger, and "false" otherwise.	label