ExpansionPanel

Accordion that turns child sections into labeled panels which open and close on click, optionally several at once

Live preview

Open in new tab ↗

Configuration:

  • multiple {Boolean} allows multiple opening of panels (default: false)
  • icon {String} a label icon for every panel (default: ti ti-caret-right)

How to define panels?

<ui-component name="expansionpanel" path="*tab" config="multiple:0" class="invisible">

    <section data-id="logs" title="Logs" data-icon="ti ti-history">

        HTML CONTENT

    </section>

    <section data-id="parts" title="Parts" data-icon="ti ti-code-branch">

        HTML CONTENT

    </section>

</ui-component>

Attributes:

  • data-id required, it must contain an identifier of the panel
  • title required, it must contain a panel name
  • icon optional, it can contain Total.js Icon (default: config.icon)

More UI components

Browse all 348