Mobile Platform as a Service:Style syntax

In template mode, it is recommended to set styles within the `<template></template>` section using the `class` attribute, for example, `<text class="mytext">✅`.

CSS Style

Class, id, and type selectors are supported. More complex combinations such as parent-child and status are not supported. The following three types are supported:

// class
.class {
}

// id
#id {
}

// type
div {
}

Inline Style

The template pattern provides run time style injection capabilities, mainly through the component's built-in properties style fields.

The writing specification of inline style is the same as that of popular front-end frameworks (VueJS and ReactJS), and supports both bound and unbound formats.

• Bind inline styles

  • The style fields to be bound should converge uniformly into one JSONObject.

  • The KEY of the style field to be bound should conform to the camel-peak naming convention (for example, background-color should be converted to backgroundColor).

• Unbound inline style

  • The style field to be bound should converge into a string according to the writing specifications of CSS.

  • The KEY of the style field to be bound should be spliced by the hyphen-between words according to the CSS specification (such as background-color).

The priority of the style in descending order 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"
  }
}

The property value that the template receives on the inline style is a JS object.

<div class="root" :style="{height: height}"> // The preceding example

Dynamic binding class

The CSS style of the widget. You can dynamically bind different selectors.

<div :class="mydiv">

Media query @ media

The template mode introduces the media query capability in the CSS specification, which is mainly used to handle the work related to mobile UI adaptation.

Compared with the CSS specification, the media query capability supported in the template mode is limited, and there are some specific usages when using it. For more information, see the following aspects. For more information about media queries, see @media.

• Media type

  You do not need to specify this parameter. By default, all is used.

  Media Type	Supported
  all	Yes
  screen	No
  print	No
  speech	No

• Media Features

  In the card, the media features are mainly designed based on firmware features, which is different from the front-end browser.

  Media Features	Valid value	Description
  platform	ios | android	For platform adaptation, the use is different from the CSS specification. You can directly set the platform value after @ media, for example,@media android.
  support	safearea	It is suitable for the safe area of the iOS platform screen.

• Media Operators

  Operator	Supported
  and	Yes
  not	No
  only	No

The following is an example of style adaptation that combines CSS features with @ media media query capabilities.

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

Style Import

Before you import styles, learn about the following two different types of styles:

• Imported Styles: Styles that exist in the. css file for unified management and import.

• Qualified Styles: Styles that exist in the <style></style> section of the. vue file only apply to this template.

Syntax format

The syntax for style import is as follows:

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

• File structure

.
└ ── template_name // The template folder (named after the template ID)
    ├── main.vue // The template layout and style description files
    ├── manifest.json // The template configuration file.
    └ ── mock.json // The test data that can be bound to the template.
    └ ── common.css // The template common style file 

• Template code

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

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

<style>
        ... [Only the styles used in this template]
</style>

Cascading rules

When you compile the style resources in the .vue file in the template mode, only the style fields with the same selector are cascaded and integrated. Different selectors are completely retained.

Import Styles + Qualified Styles = Cascading Results, as shown in the following table.

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

Example code

Download the code sample FalconDemo.