How can I hide widgets in a Slate document?

479 views Asked by At

In Slate, I want to be able to toggle and show/hide widgets on a page (i.e. Containers widgets full of widgets or specific widgets based on a user interaction like clicking a toggle).

It's unclear to me how to do this. Is it possible with CSS?

Also, can I do this based on which user views the page?

1

There are 1 answers

0
amy.bananagrams On

You can definitely do this with CSS. Slate widgets have an "Additional CSS Classes" section that can conditionally apply any CSS class that you've created.

To do this, you would need to create a CSS class that hides your widget appropriately (i.e. hidden), and conditionally apply it based off of the state of the toggle.

For example:

{{#if w_toggle.on}} hidden {{/if}}

To do this based off of which user is on the page would be similar. You would just need a way to determine if the specified user is okay to view the page or not, which can be done in a function or something similar.

NOTE: Hiding widgets based off of CSS is NOT SECURE. Anything that can be done with CSS can be undone with CSS. If you choose to hide widgets using CSS, please be advised that CSS-savvy users can un-hide the widget if they so choose.

For other patterns related to showing and hiding or conditionally styling widgets, check out the section on UX/UI Considerations in the Slate Development Best Practices guide in the Foundry documentation.