Styling

This documentation describes how styling works for TWV elements in Margee.

Automatic Class Naming

• If an element is named HMI_DISPLAY_VALUE, the class name HMI_DISPLAY_VALUE is automatically added to its root element.
• This allows you to target these elements directly in your CSS.

Adding Custom Classes

You can add custom classes to any element by appending them after the element call. For example:

HMI_TEXT_H1("MARGEE <strong>Sample</strong> Program")<class-one class-two>;

In this example, the root element will have the following classes:

• The default class for the element (e.g., HMI_TEXT_H1)
• Any custom classes you specify (e.g., class-one, class-two)

This makes it easy to style elements directly in your CSS:

.HMI_TEXT_H1 {
  font-size: 2rem;
}

.class-one {
  color: red;
}

.class-two {
  background: yellow;
}

Example Usage

// Basic usage with default class
HMI_DISPLAY_VALUE("123.45");

// Usage with custom classes
HMI_DISPLAY_VALUE("123.45")<highlight large-text>;

In the second example, the root element will have the classes: HMI_DISPLAY_VALUE, highlight, and large-text.

Summary

• Every element gets a class matching its name.
• You can add more classes by appending them after the element call.
• All classes are applied to the root element, making CSS styling straightforward.