Custom Сlasses Property

In some cases, it is useful to extend the default set of component’s HTML classes with custom ones. Every component in the UI Builder has Custom Classes property in the Element Style property group of the component Properties Editor to provide this option.

In HTML, class is an attribute that specifies one or more class names for an HTML element. If present, the class name can be used in CSS to apply styles to elements with the specified class name.

The property has a string value that allows adding multiple CSS classes divided with space.

The classes apply as attributes of the outermost element in the component's Container.

Adding New Classes

To add new HTML classes to a component:

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the classes to the Custom Classes property.

  1. The property is applied once the field is out of focus, and the result is visible in the component markup.

Applying CSS Using a Custom Class

Once the Custom Classes are added, you can use them in the component’s CSS rules.

The property rarely has any use while you’re adding styles directly in the component Properties Editor. As it doesn’t require taking into account the HTML outside of the component, there is no need to use a special class to target something inside. But it comes to the rescue when you’re targeting the component from the outside — say, from the dashboard’s Root Panel properties.

Let’s consider the case when you have several different components on a dashboard, and you want to apply a common style to some of them.

  1. In the UI Builder, for each component you want to apply a common style to, add a chosen class into its Custom Classes property as it was described in the Adding New Classes example. In our scenario, let’s add a fancy-look class to the components named Label2 and Timer0.

  1. In the Component Tree, select the Root node with the cursor. It will open its Properties Editor.

  2. In the Properties Editor, switch to the Element Style tab.

  1. In the Element Style tab, add the CSS rule to the Element CSS Style property using the added custom class:

.fancy-look {
  color: mediumorchid;
  text-align: center;
  font-style: italic;
  font-weight: bold;
}

  1. The property is applied to both components once each field is out of focus, and the result is visible on the dashboard.

Read more about this approach in the Writing Styles to a Root Panel article.

Advanced Property Usage

As all properties that are available in the component Properties Editor, the Custom Classes is bindable. You can perform a lot of tricks using the property with bindings by manipulating it on a condition and then implementing styles or logic based on the current value.

Have a glance at other possible binding applications in the Style Properties and Bindings article.

Was this page helpful?