esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Panel Group

Related Components

  • ESL Panel
  • ESL Toggleable
  • ESL Trigger

Related Examples

  • Accordion
  • Tabs

ESLPanelGroup is a custom element used as a container for a group of ESLPanels. ESLPanelGroup provides group behavior, such as synchronized content state change.

ESLPanelGroup.register();

ESLPanelGroup Attributes | Properties:

  • panel-sel - child panels selector ('esl-panel' by default)
  • mode - rendering mode of the component (takes values from the list of supported modes; 'accordion' by default)
  • mode-cls - rendering mode class pattern (default: esl-{mode}-view). Uses ESLUtils format syntax for mode placeholder
  • mode-cls-target - Element ESLTraversingQuery selector to add class that identifies mode (ESLPanelGroup itself by default)
  • animation-class - class(es) to be added during animation ('animate' by default)
  • no-animate - list of breakpoints to disable collapse/expand animation (for both Group and Panel animations)
  • refresh-strategy - defines behaviour of active panel(s) in case of configuration change:
    • initial - activates initially opened panel(s)
    • last - maintain currently active panel(s) open
    • open - open max of available panels
    • close - close all the panels (to the min of open items)
  • min-open-items - defines minimum number ('0 | 1 | number | all') of panels that could be opened ('1' by default)
  • max-open-items - defines maximum number ('0 | 1 | number | all') of panels that could be opened ('1' by default)
  • transform-params - JSON of action params to pass into panels when executing reset action (happens when the mode is changed)

Readonly attributes

  • current-mode - readonly attribute that indicates the currently applied rendering mode of the panel group

Events

  • esl:change:mode - thrown when panel group changes mode

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko