Roles
Roles work by applying CSS classes to components. For example, a component with a role named foo
will get the .anvil-role-foo CSS class applied to it.
For themes that have Roles, you can add new roles in the Roles Editor (under “Roles” in the App Browser). You can write CSS rules in a CSS file in the Assets Editor to define how Roles affect components.
(For Material Design, theme.css is a good place: search for .anvil-role-card for examples.)
Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.
Creating Roles
You can add new roles by clicking “Theme” in the Sidebar Menu, then choosing “Roles”. This will bring up the Roles Editor in a new tab.
Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.
To add a new role, click on “+ Add a new role” button and choose a name for the role. Then, press enter.
Once added, you can change the roles name, restrict which component types a role can be added to (e.g. you can limit a role to only be available to Image Components) and delete the role entirely.
Create a new Anvil Role called submit and restrict it to Button components.
Setting a component’s role
When you set a component’s role property, Anvil will give the component a CSS class. The class name will be the Role name with the prefix anvil-role-. For example, a Role named "submit", would have the class name of .anvil-role-submit.
Setting a component’s role in the design view
To set the role of a component, select the desired component in the Form Editor and go to the Properties Panel. Scroll down in the Properties Panel to the appearance section and click on the role dropdown. This will display the list of available roles the component has.
Giving a button component the submit role.
Setting a component’s role in code
You can set the role of a component in code. In the Form Editor, open the Code view and set the role property of your component to the desired role.
# Setting the role of a component in client-code
self.button_1.role = "submit"Changing the component’s style in CSS
You can write CSS rules in a CSS file uploaded under Assets to define how Roles affect components. In the Material Design theme, theme.css is the default CSS file that you can write CSS in.
The theme.css file in assets.
For example, to select the anvil-role-submit class and change the background color, the font color and the font size you could write something like:
.anvil-role-submit {
background-color: lightblue;
color: white;
font-size: 22px;
}