Origami Frontend Components & Services

SassDoc: o-toggle

oToggle(opts)

Outputs toggle stlyes.

parameter type default description
opts (optional) ('display': true, 'visibility': true) A map of which default toggle classes to output, i.e. `o-toggle-display`, `o-toggle-visibility`.

Examples

Example #1

all default o-toggle features.

@include oToggle();

Example #2

only the styles for a toggle which applies display: none when inactive.

@include oToggle($opts: ('display': true));

Example #3

only the styles for a toggle which applies visibility: hidden when inactive.

@include oToggle($opts: ('visibility': true));

Example #4

Output all o-toggle features.

Links

oToggle(opts)

Outputs toggle stlyes.

parameter type default description
opts (optional) ('display': true, 'visibility': true) A map of which default toggle classes to output, i.e. `o-toggle-display`, `o-toggle-visibility`.

Examples

Example #1

all default o-toggle features.

@include oToggle();

Example #2

only the styles for a toggle which applies display: none when inactive.

@include oToggle($opts: ('display': true));

Example #3

only the styles for a toggle which applies visibility: hidden when inactive.

@include oToggle($opts: ('visibility': true));

Example #4

Output all o-toggle features.

Links

Status
active
Switch component view

GitHub: o-toggle@3.2.3

Install o-toggle

If using the Build Service, add o-toggle@^3.2.3 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-toggle@^3.2.3".

Help & Support

o-toggle is maintained directly by the Origami team. If you have any questions about o-toggle or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com