Table of Contents

About

toggle is an animation that can:

  • hide (collapse) a component
    • automatically from a certain screen size
    • or with a click action
  • display (expand) a component
    • with a click action

The available control components (where the user can click) are:

This effect is also already automatically added:

Example

Block

<toggle light target-id="boxId" toggle-state="expanded">
    <expand><icon name="bi:arrows-expand"/> Expand</expand>
    <collapse><icon name="bi:arrows-collapse"/> Collapse</collapse>
</toggle>
<box id="boxId" toggle-state="expanded">
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.
</box>

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.

Text Toggle

<text>Lorem Ipsum
<itext id="collapsableTextId" toggle-state="collapsed">
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.
</itext><toggle link target-id="collapsableTextId" toggle-state="collapsed"><expand>More ...</expand><collapse>< Less</collapse></toggle>
</text>

Lorem Ipsum 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.

Syntax

This animation needs to set attributes:

  • on the target component to toggle (ie collapse or expand)
  • and the control (link or button).

Control

On the control component (link or button), you give the component id to toggle via the toggleTargetId 

<toggle 
    type="primary|secondary|success|danger|warning|info|light|dark|link"
    target-id="component-id-to-toggle" 
    toggle-state="collapsed|expanded"
>
    <collapse>Collapse</collapse>
    <expand>Expand</expand>
</toggle>

where:

  • type is the button type (Default is no styling to be able to use a icon).
  • target-id is the id of the target
  • toggle-state is the initial state of the toggle. Possible values:
    • collapsed: the target is hidden (default)
    • expanded: the target is visible
    • none: the element will never collapse (used to cancel the automatic_side_slot_toggle)

Target

On the component to toggle

  • you need to identify it by giving an unique value with the id attribute
  • and its initial state.
<component id="componentId"  toggle-state="collapsed|expanded"></component>
  • target-id is the id of the target
  • toggle-state is the initial state of the component. (This value should be the same than on the toggle) Possible values:
    • collapsed: the component is hidden
    • expanded: the component is visible

How to toggle automatically based on screen size ?

toggle-state allows breakpoint prefix such as 

<component toggle-state="collapsed md-expanded" />

The target component will then be:

  • collapsed on small device
  • and expanded in medium device. (You can't collapse it anymore)