Table of Contents

Style directives

Style directives are special attributes which can be used on template nodes in order to apply a specific style.

For the directives altering a color of an element, the allowed values are the standard colors of the application theme (primary-500) or a custom color in hexadecimal format (#FF0000 for red, #FF00007F for red with 50% transparency).

Background

Sets the background color of the element.

Directive name: style:background

Example:

<form-field property-name="CustomerName" style:background="neutral-500" />

In this example, the rendered form-field element will be filled with the neutral-500 color.

Color

Sets the text color of the element.

Directive name: style:color

Example:

<form-field property-name="CustomerName" style:color="danger-50" />

In this example, the rendered form-field element will be filled with the danger-50 color.

Border Color

Sets the color of the element border.

Directive name: style:border-color

Example:

<toolbar style:border-color="neutral-200" />

In this example, the rendered toolbar will have a border with the neutral-200 color.

Hover Colors

Text color, background color or even border color of an hover element can be set with the following directives:

Directive name:

  • style:hover-color: Sets the text color of an hovered element.
  • style:hover-background: Sets the background color of an hovered element.
  • style:hover-border-color: Sets the border color of an hovered element.

Example:

<button type="action" action-name="TestAction"
    style:hover-color="primary-500"
    style:hover-background="neutral-100"
    style:hover-border-color="primary-300"
/>

In this example, if the rendered button element is hovered:

  • The text color will be primary-500.
  • The background color will be neutral-100.
  • The border color will be primary-300.

Corner Radius

Set the corners radius of the element.

Directive name: style:corner-radius

Values: none, small, medium, large, extralarge, full.

If you use one value (ex: style:corner-radius="large"), all corners radius will be set according to this value.

If you want to specify each corner, you have to use a four values string separated with space (ex: style:corner-radius="large none small none") to set respectively top-left, top-right, bottom-right then bottom-left corner radius.

Examples:

<form-field property-name="CustomerName" style:corner-radius="large" />

In this example, the rendered form-field element should have all its corners with a large radius.

<form-field property-name="CustomerName" style:corner-radius="large none small none" />

In this example, the rendered form-field element should have a large radius on top left corner, a small radius on bottom right corner, and no radius for the remaining corners.

Last but not least, using the value full on all corners, will cause the element to take the shape of an ellipse (or a circle if the width and height of the element are equal).

Shadow Color

Sets the color of the element shadow.

Directive name: style:shadow-color

Example:

<toolbar style:shadow-color="neutral-200" />

In this example, the rendered toolbar will have a shadow with the neutral-200 color.

Text alignment

Sets the text alignment in child Text elements.

Directive name: style:text-align

Values: start, center, end, justify

Example:

<text style:text-align="center">
    Short text (centered)
</text>

Text decoration

Sets the text decoration of the element.

Directive name: style:text-decoration or style:hover-text-decoration

Values: none, underline, line-through

Examples:

<!-- Text decoration -->
<text style:text-decoration="none">
    Some text
</text>
<text style:text-decoration="underline">
    Some underlined text
</text>
<text style:text-decoration="line-through">
    Some line-through text
</text>

<!-- Hover text decoration -->
<button type="save" style:hover-text-decoration="underline" />

Results:

  • Some text
  • Some underlined text
  • Some line-through text

In this example, the rendered text will have a underline.

Overflow wrap

This directive indicates how a text should be broken into multiple lines when the it is wider than the element that contains it. This prevents the text from overflowing its container.

Directive name: style:overflow-wrap

Values:

  • normal: Lines may only break at normal word break points (such as a space between two words).
  • anywhere: To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
  • break-word: The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Example:

<text weight="strong" style:overflow-wrap="anywhere">
    @Fields.Name
</text>

Font style

Sets the font style of the element.

Directive name: style:font-style or style:hover-font-style

Values: normal, italic

Examples:

<!-- Font style -->
<text style:font-style="italic">
    Some text
</text>

<!-- Hover font style -->
<button type="save" style:hover-font-style="italic" />
Warning

The "Golos Text" font does not have an italic variant.

Font weight

Sets the font weight of the element.

Directive name: style:font-weight or style:hover-font-weight

Values: regular, strong, stronger

Examples:

<!-- Font weight -->
<button type="save" style:font-weight="strong" />

<!-- Hover font weight -->
<button type="save" style:hover-font-weight="stronger" />