Ui XML Reference\Style

This object allows you to define a css-like style sheet that can be used to automatically apply CSS attributes to your text. By using classes, you can also define specific rules for certain kinds of text.

See the Styles With Custom UI guide.

Example Usage

<!-- Style object that applies to all frames -->
<Style>
    <![CDATA[
    /* Style for all text frames */
    Text {
        color: #ff0000;
        font-size: 64px;
        -dcei-text-shadow: false;
        -dcei-text-outline: false;
    }
    .small {
        color: #00ff00;
        font-size: 32px;
    }
    .large {
        color: #0000ff20;
        font-size: 128px;
    }
    ]]>
</Style>

<!-- A different object utilizing the style -->
<Frame layout="flex" flexDirection="column">
    <Text text="test" />
    <Text class="large" text="test" />
    <Text class="small" text="test" />
</Frame>

####Supported Attributes

color: #FF0000;
font-size: 16px;
white-space: normal | nowrap;
overflow: visible | hidden;
-dcei-font-size-min: 16px;
-dcei-font-size-max: 32px;
-dcei-text-rtl-support: false;
-dcei-text-alignment: start | end | ...;
-dcei-text-shadow: true;
-dcei-text-shadow-width: 1;
-dcei-text-shadow-softness: 2;
-dcei-text-shadow-color: #FF0000;
-dcei-text-shadow-direction: 1 2;
-dcei-text-outline: true;
-dcei-text-outline-color: #ff0000;
-dcei-text-outline-width: 2;
-dcei-text-outline-softness: 1;

This frame doesn't support common attributes.

name

Value type: string

Description


Allows you to assign a name to a style.

See the Styles With Custom UI guide.

Example Usage

<!-- Style object that applies to all frames -->
<Style name="DefaultStyle">
    <![CDATA[
    /* Style for all text frames */
    Text {
        color: #ff0000;
        font-size: 64px;
        -dcei-text-shadow: false;
        -dcei-text-outline: false;
    }
    .small {
        color: #00ff00;
        font-size: 32px;
    }
    .large {
        color: #0000ff20;
        font-size: 128px;
    }
    ]]>
</Style>

<!-- A different object utilizing the style -->
<Frame layout="flex" flexDirection="column">
    <Text text="test" />
    <Text class="large" text="test" />
    <Text class="small" text="test" />
</Frame>