La fonction de suggestion automatique permet d'affiner rapidement votre recherche en suggérant des correspondances possibles au fur et à mesure de la frappe.
I might need more info to give you a better answer, but here is some info:
First, you should be using the custom module editor to create a module. You can get most of the same functionality using HubL tags but it is hackish and much hard to pull off.
In the custom module editor you have full control over your markup. You can use class controls, such as:
Now you need to make it an option to switch between these classes in the page editor. There are two possible options:
Boolean Field
Choice Field
The boolean field is a "true/false" toggle. This works well if there are two options, i.e. a default option and a special options.
The snippet for a boolean field looks like:
{% if boolean_field_name %} <!-- some markup --> {% else %} <!-- other markup --> {% endif %}
Where the statement is true if the boolean field is checked, and false if unchecked.
You would apply this to your markup like so:
<div class="{% if boolean %}bg-blue{% else %}bg-green{% endif %}">
</div>
The choice field is a good choice for multiple options. You would first create a choice field in the custom module editor. In the field options you would set up your choices. The choice name is for display purposes in the editor and the value is what you would use for your logic:
Choice Name: Blue
Choice Value: bg-blue
You can, and in most cases should, set a default value for the field. You can then copy the snippet. The snippet will look similar to:
{{ module.choice_field }}
and can be applied to your markup like so:
<div class="{{ module.choice_field }}">
</div>
which will print the chosen value to the html like this:
<div class="bg-blue">
<div>
A use case for the boolean field would be flex box ordering. a "reverse order" boolean check box can be used to apply or alter a class on an element: