Toggle

Undraw My Documents

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)




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap Styling - Dimension (Width and Height)

Every Box components and even the whole main page dimension may be resized with the styling attributes: and . The width attributes support the following values: length - a length (in pixel,...
Undraw My Documents
ComboStrap UI - Collapse

collapse is a menubar component that will collapse its children on a smaller screen making them only visible by clicking on the sandwich icon. the toggle the accordion All the element that are...
Undraw My Documents
How to animate your component in ComboStrap

ComboStrap offers animation such as on scroll and on hover. This article list them all.
Undraw Website Builder Re Ii6e
How to create a accordion layout ?

The accordion component is a widget that layouts it children component in an accordion fashion. This article shows you how to do it.
Layout Element
What is a side slot ?

The sidebar is a slot that replaces the content of the sidebar. The cache of the side slot is automatically deleted when a page in the same namespace is created, added or deleted. See The...



Task Runner