An accordion.

Place hylo-accordion-item components inside to define the accordion items.

Properties

closeOnBlur: boolean = false

Closes an accordion item when it looses focus by a key press. Can also be achieved by giving the class "hylo-accordion-close-on-blur" to the element or one of its ancestor elements.

Same as giving every accordion-item the property "closeOnBlur".

connectItems: boolean = true

If set and you open an accordion item, all others close.

headerToBody: boolean = false

Copies the header's text content of the items in front of the items bodies in a hylo-sr-only component and sets the headers itself to aria-hidden="true". Sets always the tabIndex of the bodies to 0 when "openOnFocus" when it is not already >= 0 or is not set through the element attribute "tabindex". Can also be achieved by giving the class "hylo-accordion-header-to-body" to the element or one of its ancestor elements.

Happens when the component got initialised.

horizontal: string

A string of comma separated breakpoints (xs, sm, md, lg, xl) where the layout switches to horizontal. Provide an empty string when the horizontal layout should apply allways or not breakpoint listener is present.

Orders the headers in a row and opens the bodys beneath the row.

The hylo-accordion-item components have to be direct children of this component.

openOnFocus: boolean = false

Opens an accordion item when it gains focus by a key press. Can also be achieved by giving the class "hylo-accordion-open-on-focus" to the element or one of its ancestor elements.

Same as giving every accordion-item the property "openOnFocus".

Adds the class "hylo-focused" to the accordion item.

scrollHeaderIntoView: boolean = false

Scrolls an accordion item header into view when its accordion item gets opened. Can also be set per hylo-accordion-item component.

Methods

  • Closes all items.

    Returns Promise<void>

  • Returns all hylo-accordion-item components connected to this accordion.

    Returns Promise<HTMLHyloAccordionItemElement[]>

  • Should be called when accordion items got added or removed. Reinitialises the connection between the items.

    Returns Promise<void>

Generated using TypeDoc