Style syntax

Apply styles to components in the <template></template> section by using classes. For example, <text class="mytext">✅.

CSS styles

Only the `class`, `id`, and `type` selectors are supported. More complex combinations, such as parent-child or state selectors, are not supported.

// class
.class {
}

// id
#id {
}

// type
div {
}

Inline styles

Template mode lets you inject styles at runtime using the built-in style field of a component.

The inline style syntax follows the same conventions as VueJS and ReactJS. Both bound and non-bound formats are supported.

• Bound inline styles

  • Group the style fields for binding into a single JSONObject.

  • Style field keys must be in camelCase. For example, convert `background-color` to `backgroundColor`.

• Non-bound inline styles

  • Group the style fields into a single string that follows CSS syntax.

  • Style field keys must use hyphen-separated words as specified in CSS, for example, `background-color`.

The order of style priority from highest to lowest is inline style, id, class, and type.

// main.vue
<template>
  <div class="root">
    <div class="div1" :style="style"></div>
    <div class="div2" style="width: 100px; background-color: blue"></div>
  </div>
</template>

// mock.json
{
  "style": {
    "height": "100px",
    "backgroundColor": "red"
  }
}

Inline styles accept a JavaScript (JS) object as the attribute value.

<div class="root" :style="{height: height}"> // Example from above

Dynamic class binding

You can dynamically bind different selectors to a component's CSS styles.

<div :class="mydiv">

Media queries (@media)

Template mode supports CSS media queries, primarily for mobile UI adaptation.

Media query capabilities are more limited than the full CSS specification. For more information, see Introduction to @media.

• Media types

  You do not need to specify the media type. The default value is `all`.

  Media type	Supported
  all	Yes
  screen	No
  print	No
  speech	No

• Media features

  In cards, media features are based on firmware attributes, which is different from how they work in frontend browsers.

  Media feature	Value	Description
  platform	ios | android	Adapts to a specific platform. The usage differs from the CSS specification. Set the platform value directly after `@media`. For example, `@media android`.
  support	safearea	Adapts to the safe area on the iOS platform.

• Media operators

  Operator	Support
  and	Yes
  not	No
  only	No

The following example combines CSS attributes with `@media` queries to adapt styles per platform.

<template>
    <div class="banner"></div>
</template>
<style>
    @media android {
        .banner {
                  width: 100px;
                        height: 100px;
            background-color: #00fff0;
        }
    }
    @media ios and (support: safearea) {
        .banner {
            width: 100px;
                        height: 100px;
            background-color: #00fafb;
        }
    }
    .banner {
              width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

Importing styles

Template mode distinguishes between two types of styles:

• Imported styles: Styles defined in a .css file that can be centrally managed and reused.

• Scoped styles: Styles in the <style></style> section of a .vue file that apply only to that template.

Syntax format

Use the following syntax to import styles:

<style src="[relative path to .css file]" />

• File structure

.
└── template_name                                                 // Template folder (named after the template ID)
    ├── main.vue                                                       // Template layout and style description file
    ├── manifest.json                                                // Template configuration file
    └── mock.json                                                     // Test data for template binding
    └── common.css                                                 // Common template style file

• Template code

<template>
        ... [Template layout description]
</template>

<style src="./common.css" />

<style>
        ... [Styles that apply only to this template]
</style>

Cascading rules

When compiling style resources in a .vue file, template mode cascades and merges only style fields that share the same selector. Different selectors remain unchanged.

The cascaded result combines imported styles and scoped styles.

.special {
 color: red;
 width: 100px;
}
.others {
 color: red;
 width: 100px;
}

.special {
 background-color: red;
 width: 200px;
}
.scoped {
 background-color: red;
 width: 200px;
}

.special {
 color: red;
 background-color: red;
 width: 200px;
}
.scoped {
 background-color: red;
 width: 200px;
}
.others {
 color: red;
 width: 100px;
}

Code example

You can download the FalconDemo code example.