Using Presets

Presets allow you to reuse styles. They are based on CSS classes and serve as an alternative to roles.

---

Defining Presets

NUI offers three ways of declaring Presets

Global Presets

Global presets are declared as simple classes in the theme.css

.card {
    padding: 20px;
    border-radius: 15px
}

---

Form Presets

Form Presets are the easiest way of defining presets within the designer. You can define presets for a specific form if multiple components in it (and any forms nested inside it) are using the same type of styles.

To add a form preset, drag and drop the Preset component anywhere in the form. You can define a name and css for the preset in the component properties. The css property follows a simpler syntax

Using Custom CSS

The above example can be rewritten in form preset as name - "card" css - "padding: 20px"

A preset bar is added on top of your component (only in Anvil Designer) that lets you see all the presets added to the form. You can use the bar to quickly view and edit presets

Presets Bar

Any style from the Form presets is removed when the form is removed from the screen,

---

Local Presets

You can also define component-specific presets in the designer. These presets are local and won't be applied to any other component (even if the other component uses the same preset name)

These can be defined in the css property of the component and used for managing specific states for a component

.on-clicked
background: theme:Primary
font-weight: 600

---

Presets within Presets

You can also define another preset within a preset. The child preset will only be applied when a component already has the parent preset. You can use it to manage specific states for a component

In Global Presets

.user_input {
   font-size: 16px;
   border: solid black 2px;
}

.user_input.error {
   border: solid red 2px;
}

In Form Presets

In the css property

font-size: 16px
border: solid black 2px

.error
border: solid red 2px

In Local Presets

In the css property

.user_input
font-size: 16px
border: solid black 2px

.user_input.error
border: solid red 2px

Adding and Managing Presets

Both global and local can be added and managed using both the designer and code.

Adding Presets to a component

In Designer

You can define presets in the Anvil Designer by adding one preset per line

In Code

self.label_1.preset = ["big-text"] #Single Preset
self.label_1.preset = ["nice-label", "big-text"] #Multiple presets

Appending Presets

You can append a new preset to the component using the add_preset method. If the preset is not there, it will be added.

def button_1_click(self, **event_args):
   self.button_1.add_preset("on-clicked")

Removing Presets

You can remove a preset from the component by using the remove_preset method. If the preset exists, it will be removed.

def button_2_click(self, **event_args):
   self.button_1.remove_preset("on-clicked")

Toggling Presets

You can also directly toggle a preset using the toggle_preset method. If the preset is already applied, it will be removed. Otherwise, it will be added.

def button_1_click(self, **event_args):
   self.button_1.toggle_preset("on-clicked")