User guide: give examples for adding custom classes to elements

[damithc]

v1.9.2

Perhaps in the advanced tips section we can give detailed examples of how to use custom classes? These are the things I want to do in particular:

• Hide certain elements in a page
• Panels
  • hide border, increase thickness of border
  • set a background color for the panel header (different from the bootstrap colors)
• hide modals, tooltips (not possible?)

[damithc]

@Chng-Zhi-Xuan can give me example code fir the first item? Would like to try it out tomorrow.

[Chng-Zhi-Xuan]

With the help of Bootstrap utility classes

Note: I realised some components toggle the display class on their outermost element, so it might not permanently hide the component after a event trigger. (Modals is one example if I remember correctly)

1. Permenantly hide

<panel header="..." add-class="d-none">
   <p>Contents inside will be hidden too</p>
<panel>

2. CSS controlled hide

<panel header="..." add-class="ninja-turtle">
   <p>random text</p>
</panel>

Then in a page specific CSS (inserted via the head content feature)

/* your custom CSS file */
.ninja-turtle {
  display: none; /* 'block' or 'inline-block' if you want it to show */
}

This implementation allows you to use <include> and the elements will adapt to the destination's page CSS.

You can use the ninja-turtle class on normal HTML elements too, to hide / show them. However, since there is no eventListener to update the classes, it will be hidden (or shown) permanently, depending on your display: value.

[damithc]

Thanks. Did a small trial. Managed to hide a panel 👍