Component documentation

Interactions

You can make use of utility classes to quickly make minor style changes.

Toggle element class by clocking buttons group

#

This interaction toggles any buttons between different states.

To toggle a button toolbar between primary and secondary button states, just add data-toggle="big" data-switch-target="c-table" to both buttons, and automatically, by pressing the buttons, you will toggle the target element c-table with the class combining the two attributes c-table--big

Nom de la formation Contact Matière(s) Status
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon
Structurer son activité avec le business Model Canvas example@site.com Economie / Marketing Brouillon

Toggle disabled state onclick

#

This interaction toggles hte disabled state on another element by clicking the initial one.

To toggle a the disabled attribute of an element, just add data-toggle="disabled" data-switch-target="target-element-classname", and automatically, by pressing the element, you will toggle the disabled state of the element target-element-classname

Scroll to

#

This interaction scroll to an specific element by clicking the initial one

To add the interaction, simply add data-scroll-to data-scroll-target-id="id-of-the-target-element" to the initial element. This will automatically scroll the page to the #id-of-the-target-element element. The scroll effect will be smooth.

Check out the real example here

Nom de la formation Contact Matière(s) Status
Lorem Ipsum someone@gmail.com Economie / Marketing Brouillon
Lorem Ipsum someone@gmail.com Economie / Marketing Brouillon

Copy to clipboard button

#

This interaction copy a text into the navigator clipboard by clicking a button

SmartBE-050-623