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), a custom color in hexadecimal format (#FF0000 for red, #FF00007F for red with 50% transparency), or a CSS color keyword or function (red, transparent, rgb(255, 0, 0)). background is the background color of the theme, not the CSS keyword.

A theme token can also carry its own alpha channel with the token/alpha notation: the token name, a slash, then a decimal number between 0 (fully transparent) and 1 (fully opaque), for example primary-500/0.6 for the primary-500 color at 60% opacity. This notation works on any color-altering directive.

  • An invalid number, size, token or enumeration value is rejected when the template is generated. Colors, font weights and free CSS keywords, such as style:cursor, are not checked: a value unknown to the browser has no effect, but a semicolon is rejected. As for the layout directives, a bound value or a constant is not checked, and a bound value that becomes empty removes the style.
  • On an input (textbox, combobox...), the style applies to the visible box of the input, not to its label. On an action or menu button, it applies to its buttons, not to the divider of a split button nor to the menu.
  • A directive written on the usage of a UI component (or of a UI view embedded with ui-view) applies to the root element of its template (on the visible box of a root input, ActionButton or MenuButton, like a directive written on it, except for a remote UI view) and replaces the same style written there, except the transformations and the shadows, which combine. A bound value of the usage that becomes empty does not cleanly remove a style:hover-* or style:border-color written as a literal value on the root (a hover background becomes transparent, for example).

Each directive below is described the same way: its values, then Rendering examples, a schema showing the same element with several values of the directive (written under each frame), then one or more Examples of templates, each followed by its Result when it helps. In the schemas:

  • the colors only stand for the colors of the theme, which depend on the application,
  • when the directive moves, rotates or resizes the element, a dashed outline shows where the element would be without the directive.

Background

Sets the background color of the element.

Directive name: style:background

Values: a color of the theme, with or without its own alpha, or a hexadecimal color.

Rendering examples:

Text
primary-500
Text
primary-500/0.2
Text
neutral-100

Examples:

<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.

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

In this example, the rendered form-field element will be filled with the primary-500 color at 20% opacity.

Color

Sets the text color of the element.

Directive name: style:color

Values: a color of the theme, with or without its own alpha, or a hexadecimal color.

Rendering examples:

Text
danger-500
Text
danger-500/0.5

Example:

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

In this example, the text of the rendered form-field element will have the danger-500 color.

Border Color

Sets the color of the element border.

Directive name: style:border-color

Values: 1 to 4 colors separated with spaces, in the same order as layout:margin.

Rendering examples:

Text
primary-500
Text
danger-500 transparent transparent transparent
Text
primary-500 danger-500 primary-500 danger-500

Examples:

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

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

<horizontal-layout style:border-color="neutral-500" style:border-style="solid" style:border-width="1 0 0 0">
    <text>Total</text>
</horizontal-layout>

In this example, the rendered element only has a top border, colored neutral-500.

Result:

Total
Note

style:border-color alone still gives the element a visible border (a solid 1px line) even without style:border-width/style:border-style. Either of those, when set, always takes priority over that default, regardless of which order the directives appear in the template.

Border Style

Sets the style of the element border.

Directive name: style:border-style

Values: solid, dashed, dotted

Rendering examples:

Text
solid
Text
dashed
Text
dotted

Example:

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

In this example, the rendered toolbar will have a dashed border.

Border Width

Sets the width of the element border, in pixels.

Directive name: style:border-width or style:hover-border-width

Values: 1 to 4 numbers of pixels separated with spaces, in the same order as layout:margin.

Rendering examples:

Text
1
Text
4
Text
4 0 0 0
Text
1 4 1 4

Examples:

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

In this example, the rendered toolbar will have a 2px border on every side.

<horizontal-layout style:border-color="neutral-500" style:border-style="solid" style:border-width="1 0 0 0" style:hover-border-width="2 0 0 0">
    <text>Total</text>
</horizontal-layout>

In this example, the rendered element has a 1px top border that thickens to 2px on hover.

Result:

Total
At rest
Total
On hover

Cursor

Sets the CSS cursor shown when hovering the element. Typically used alongside event:click on a component that isn't natively interactive (e.g. card, chip, text), since those don't get a pointer cursor on their own the way a native button does.

Directive name: style:cursor

Values: any valid CSS cursor value (e.g. pointer, not-allowed, grab, help).

Rendering examples (move the mouse over each element to see its cursor):

Hover me
pointer
Hover me
not-allowed
Hover me
grab
Hover me
help

Example:

<card event:click="OpenDetail" style:cursor="pointer">
    ...
</card>

In this example, the mouse pointer turns into a hand when hovering the card.

Hover Colors

Sets the text color, the background color or the border color of the element while it is hovered.

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.

Values: the same as style:color, style:background and style:border-color.

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.

Result:

TestAction
At rest
TestAction
On hover

Corner Radius

Set the corners radius of the element.

Directive name: style:corner-radius

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

Give 1 to 4 values separated with spaces, in the order of the CSS border-radius property: 1 value for all corners, 2 values for top-left and bottom-right then top-right and bottom-left, 3 values for top-left, then top-right and bottom-left, then bottom-right, 4 values for top-left, top-right, bottom-right then bottom-left. For example, style:corner-radius="large none" rounds only the top-left and bottom-right corners.

The value full rounds the corners as much as possible: the two short sides of the element become half circles (a pill shape), and a square element becomes a circle.

Rendering examples:

Text
none
Text
large
Text
large none small none
Text
full
Text
full on a square element

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.

Shadow Color

Sets the color of the element shadow.

Directive name: style:shadow-color

Values: a color of the theme, with or without its own alpha, or a hexadecimal color.

Rendering examples:

Text
neutral-200
Text
neutral-900/0.16
Text
primary-500/0.6

Examples:

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

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

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

In this example, the rendered toolbar will have a shadow with the neutral-900 color at 16% opacity.

Shadow Offset X, Shadow Offset Y, Shadow Blur, Shadow Spread

Sets one axis of the element's box shadow independently, alongside style:shadow-color. Each also has a hover-shadow-* counterpart, except style:shadow-color itself: the hover shadow always reuses the base shadow color, only the offset, blur or spread differs while hovered.

Directive name: style:shadow-offset-x, style:shadow-offset-y, style:shadow-blur, style:shadow-spread, or their style:hover-shadow-offset-x, style:hover-shadow-offset-y, style:hover-shadow-blur, style:hover-shadow-spread counterparts

Values: a number in pixels (style:shadow-spread and its hover counterpart can be negative).

Directive Effect
shadow-offset-x Moves the shadow to the right (positive value) or to the left (negative value).
shadow-offset-y Moves the shadow down (positive value) or up (negative value).
shadow-blur Blurs the edge of the shadow: the larger the value, the softer and wider the shadow.
shadow-spread Grows (positive value) or shrinks (negative value) the shadow before it is blurred.

Rendering examples:

Text
offset-x 6, offset-y 6
Text
offset-y 4, blur 12
Text
spread 6
Text
offset-y 12, blur 16, spread -6

Example:

<vertical-layout
    style:shadow-color="neutral-900/0.2"
    style:shadow-offset-x="0"
    style:shadow-offset-y="4"
    style:shadow-blur="8"
    style:shadow-spread="-2"
    style:hover-shadow-offset-y="12"
    style:hover-shadow-blur="24"
    style:hover-shadow-spread="-6"
>
    <text>Card</text>
</vertical-layout>

In this example, the rendered element has a soft shadow at rest that grows and softens further on hover, so the shadow itself transforms instead of just fading in or out.

Result:

Card
At rest
Card
On hover

Opacity

Sets the opacity of the element.

Directive name: style:opacity or style:hover-opacity

Values: a decimal number between 0 (fully transparent) and 1 (fully opaque).

Rendering examples:

Text
1
Text
0.6
Text
0.3

Example:

<vertical-layout style:opacity="0.3" style:hover-opacity="1">
    <text>Details</text>
</vertical-layout>

In this example, the rendered element is nearly invisible at rest and fully visible on hover.

Result:

Details
At rest
Details
On hover

Overflow

Sets what happens to the content of the element when it is larger than the element itself.

Directive name: style:overflow

Values:

  • visible: The content goes past the edges of the element and stays visible.
  • hidden: The content is cut at the edges of the element.
  • auto: The content is cut at the edges of the element, and scroll bars appear to reach the rest of it.

Rendering examples:

A text much longer than its container, on several lines
visible
A text much longer than its container, on several lines
hidden
A text much longer than its container, on several lines
auto

Example:

<vertical-layout layout:width="120" layout:height="36" style:border-color="neutral-900" style:overflow="hidden">
    <text>A text much longer than its container, on several lines</text>
</vertical-layout>

In this example, the text needs four lines, but the vertical layout is only high enough for two: the last two lines are cut at its bottom edge (the hidden frame above).

Note

style:overflow="hidden" is the way to cut the children of a canvas layout at its edges, and is required to animate the height of a collapsible panel.

Scale

Sets the scale transform of the element.

Directive name: style:scale or style:hover-scale

Values: a decimal scale factor, for example 1.2 for 120% of the element's original size.

The element is scaled from its center, and the scale does not change its place in the layout: its neighbors do not move, and a larger element overlaps them.

Rendering examples:

Text
Text
0.7
Text
1
Text
Text
1.5

Example:

<horizontal-layout style:scale="1" style:hover-scale="1.06">
    <text>Product</text>
</horizontal-layout>

In this example, the rendered element grows slightly larger on hover.

Result:

Product
At rest
Product
Product
On hover

Rotate

Sets the rotation of the element.

Directive name: style:rotate

Values: any number, positive or negative, interpreted as degrees. A positive value turns the element clockwise.

The element turns around its center, flat in the plane of the screen.

Rendering examples:

Text
Text
-8
Text
Text
45
Text
Text
90

Example:

<text style:rotate="-8">PROMO</text>

In this example, the rendered text is rotated 8 degrees counter-clockwise.

Rotate X, Rotate Y

Turns the element in depth, toward or away from the viewer, unlike style:rotate which turns it flat.

Directive name: style:rotate-x or style:rotate-y

Values: any number, positive or negative, interpreted as degrees.

  • style:rotate-x turns the element around its horizontal axis: its top or its bottom goes away from the viewer.
  • style:rotate-y turns the element around its vertical axis: its left or its right side goes away from the viewer.

A perspective is added automatically, so that the far side of the element looks smaller than the near side. Past 90 degrees, the element shows its back side, which is never drawn: the element disappears and shows what is behind it. Two elements stacked one over the other, one turned by 0 and the other by 180, therefore make the two faces of a card that can be flipped.

Rendering examples:

Text
Text
rotate-x 50
Text
Text
rotate-y 50
Text
Text
rotate-y -50

Example:

<canvas-layout layout:width="200" layout:height="120">
    <!-- Front face -->
    <vertical-layout style:background="primary-500" style:rotate-y="@Computeds.FrontRotation" transition:properties="rotate-y" transition:duration="500" canvas:top="0" canvas:right="0" canvas:bottom="0" canvas:left="0">
        <text>Front</text>
    </vertical-layout>
    <!-- Back face, turned by 180 degrees when the card shows its front face -->
    <vertical-layout style:background="neutral-200" style:rotate-y="@Computeds.BackRotation" transition:properties="rotate-y" transition:duration="500" canvas:top="0" canvas:right="0" canvas:bottom="0" canvas:left="0">
        <text>Back</text>
    </vertical-layout>
</canvas-layout>

In this example, FrontRotation returns "0" and BackRotation returns "180" while the front face is shown, and the opposite values while the back face is shown: the card turns around in 500 milliseconds.

Result, while the card turns from its front face to its back face:

Front
Start: front face
Front
During: the front face turns
Back
End: back face

Translate

Moves the element along the x and y axes without affecting the layout flow, unlike changing its margin would.

Directive name: style:translate

Values: two numbers separated by a space ("x y"). Each number is in pixels by default, or a percentage of the element's own size when suffixed with %. A positive x moves the element to the right, a positive y moves it down.

Rendering examples:

Text
Text
24 -16
Text
Text
50% 0 (half its own width)
Text
Text
0 100% (its own height)

Examples:

<vertical-layout style:translate="10 -5">
    <text>Text</text>
</vertical-layout>

In this example, the rendered element is shifted 10px right and 5px up.

<horizontal-layout layout:width="16" layout:height="16" canvas:left="@Computeds.ProgressPercent" style:translate="-50% 0" />

In this example, the element is moved back by half its own width: in a canvas layout, its center is then on the position given by canvas:left.

Combining transformations

style:translate, style:rotate, style:rotate-x, style:rotate-y and style:scale (or style:hover-scale while hovered) can be used together on the same element. They are always applied in the same order, whatever their order in the template, and on every element, in a canvas layout or not:

  1. in a canvas layout only, the center alignment moves the element back by half its size, to center it,
  2. style:translate moves the element,
  3. the automatic perspective of the 3D rotations (only when style:rotate-x or style:rotate-y is used),
  4. style:rotate-x turns the element in depth around its horizontal axis,
  5. style:rotate-y turns it in depth around its vertical axis,
  6. style:rotate turns it flat,
  7. style:scale resizes it.

These transformations combine even when some are written on the root element of the template of a UI component and others on its usage, and they win over a CSS animation of transform.

Each transformation applies to the element as left by the previous ones, around its center: the element is first moved, then turned where it now stands, then resized in its turned position. As a result:

  • the translation always moves the element along the axes of the screen: style:translate="0 -20" moves a rotated element straight up, not along its own tilted axis,
  • the distance of the translation is never scaled: style:translate="20 0" moves an element scaled by 2 by 20 pixels, not 40,
  • the percentages of the translation are a percentage of the size of the element before it is scaled,
  • the scale resizes the element along its own turned axes.

Example:

<text style:scale="1.5" style:rotate="-15" style:translate="40 0">PROMO</text>

In this example, the text is moved 40 pixels to the right, horizontally on the screen, then tilted where it stands, then enlarged in its tilted position. The order of the three directives in the template does not matter.

Result, step by step:

PROMO
PROMO
1. translate 40 0
PROMO
PROMO
2. then rotate -15
PROMO
PROMO
3. then scale 1.5
Note

A transformation has no effect on an element displayed inline, inside a line of text. When one of these directives is used on an inline text element, such as a span, the element is displayed as inline-block, so that the transformation applies.

Text alignment

Sets the text alignment in child Text elements.

Directive name: style:text-align

Values: start, center, end, justify

Rendering examples:

A text on more than one line
start
A text on more than one line
center
A text on more than one line
end
A text on more than one line
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

Rendering examples:

Some text
none
Some text
underline
Some text
line-through

Examples:

<text style:text-decoration="underline">
    Some underlined text
</text>

In this example, the rendered text is underlined.

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

In this example, the text of the rendered button is underlined while the button is hovered.

Text transform

Sets the case in which the text of the element is displayed, whatever the case of the text itself. The text keeps its own case when it is copied or read by a screen reader.

Directive name: style:text-transform

Values:

  • none: The text is displayed in its own case.
  • uppercase: Every letter is displayed in uppercase.
  • lowercase: Every letter is displayed in lowercase.
  • capitalize: The first letter of each word is displayed in uppercase, the other letters keep their own case.

Rendering examples:

Some text
none
Some text
uppercase
Some text
lowercase
Some text
capitalize

Example:

<text style:text-transform="uppercase" style:letter-spacing="1">
    @Fields.Category
</text>

In this example, the category is displayed in uppercase, with letters spaced out, as a section label.

Letter spacing

Sets the space added between the letters of the text of the element.

Directive name: style:letter-spacing

Values: a number of pixels, decimal or negative, for example 1 to space the letters out or -0.5 to tighten them.

Rendering examples:

Some text
-0.5
Some text
0
Some text
2

Example:

<heading level="1" style:letter-spacing="-0.5">
    Dashboard
</heading>

In this example, the letters of the large title are tightened.

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.

Rendering examples:

www.averylongaddressexample.com
normal: the word goes past the edge
www.averylongaddressexample.com
anywhere: the word is broken

Example:

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

In this example, a name made of a single very long word is broken over several lines instead of going past the edge of its container.

Font style

Sets the font style of the element.

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

Values: normal, italic

Rendering examples:

Some text
normal
Some text
italic

Examples:

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

In this example, the rendered text is in italic.

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

In this example, the text of the rendered button is in italic while the button is hovered.

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

Rendering examples:

Some text
regular
Some text
strong
Some text
stronger

Examples:

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

In this example, the text of the rendered button is strong.

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

In this example, the text of the rendered button becomes stronger while the button is hovered.

Font Scale

Sets a font-size multiplier that cascades onto every descendant with its own size (a heading, text with a size class, an input...). A descendant's own style:font-scale replaces the value it inherits from an ancestor instead of compounding with it.

Directive name: style:font-scale

Values: a decimal multiplier, for example 0.85 to shrink text to 85% of its normal size, or 2.2 to enlarge it to 220%.

Unlike style:scale, style:font-scale changes the size of the text itself: the element grows or shrinks with its text, and pushes or makes room for its neighbors.

Rendering examples:

Text
0.85
Text
1
Text
2.2

Example:

<vertical-layout style:font-scale="0.85">
    <text>Some smaller text</text>
</vertical-layout>

In this example, the rendered text (and any other descendant text with its own size) is shrunk to 85% of its normal size.

Note

style:font-scale only affects an element that already has a size of its own - every standard text component (text, headings, inputs...) does, with or without an explicit size= attribute (it falls back to its own default size otherwise). A raw, unstyled text node with no component of its own (for example, HTML rendered through html-viewer) does not have a size to replace, and is not affected.

User select

Sets whether the text content of the element can be selected. Typically used on a glyph or icon rendered as plain text (e.g. a chevron or a close "✕" inside a text node) so it doesn't look and behave like selectable text to the user.

Directive name: style:user-select

Values:

  • auto: The default behavior of the element.
  • text: The text can be selected.
  • none: The text cannot be selected.
  • all: A click selects the whole text of the element at once.

Rendering examples (try to select the text of each element with the mouse):

Select me
text
Select me
none
Select me
all

Example:

<text style:user-select="none">✕</text>

In this example, the "✕" glyph can no longer be selected by the user.

See also