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:
- in the accordion
- in the tabs
- in a constrained by height component (with the toggle scroll mechanism)
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:
- 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>
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)