ComboStrap UI - Collapse

1 - About

collapse can refers to

  • a navbar component that will collapse its children.
  • or an attribute that defines a UI component to collapse.

3 - Type

3.1 - Attribute

This example comes from the Collapse bootstrap documentation and shows a button that will expand and collapse a card with the help of collapse attribute. since 1.11


<button collapse="#collapseExample">
Click Me to Expand and re-click me to Collapse
</button>
<box class="collapse" id="collapseExample">
  <card>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </card>
</box>

where the following attributes are mandatory:

  • on the control element (the element to click)
    • collapse=“#collapseExample” defines the id of the element to collapse. In this case, #collapseExample
  • on the target element (the element to collapse)
    • class=“collapse” will cache the block by default if present
    • id=“collapseExample” should define the same value than the collapse value of the control.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

in a navbar, a collapse element will collapse its children . All the element that are inside a collapse will be collapsed when the width of the page becomes a mobile size.

More… see the navbar documentation

Powered by ComboStrap