Determines how to display the elements defined in the template.
The CSS Flexbox style is adopted for the style layout, and the CSS content is slightly expanded and modified for some native elements.
To achieve adaptive design, all size-related styles (such as those specified by width and font-size) are all defined based on the reference width (750 px by default) and scaled based on the screen width. For example, if width is set to 100 px, the actual width on a 1500 px wide screen is 200 px.
The following two methods are used to import external files:
<!-- Import an external file to replace the internal style.-->
<style src="./style.css"></style>
<!-- Merge external files. -->
<style>
@import './style.css';
.a{
}
</style> The style and class attributes can be used to control the element style.
<!-- Inline style --> <div style="color:red; margin: 10px;" /> <!-- Class declaration --> <div class="normal append" />
The following table describes the supported selectors.
Selector | Example | Description |
|---|---|---|
.class | .intro | Select all the elements whose class attribute is set to intro. |
#id | #firstname | Select all the elements whose id attribute is set to firstname. |
tag | div | Select all div elements. |
, | .a, .b | Select all the elements with both classes a and b. |
#id .class tag | #page .body text | Support the descendant selectors of the id, class, and tag selectors. The > symbol can also be used to represent direct descendant selectors. |
<style>
// A single selector
text {
}
.class-abc {
}
#idAbc {
}
// Select a descendant.
.doc-page #testTag div text {
}
.doc-page #test-class .class1 {
}
.doc-page #testId #testIdId1 {
}
// Select a direct descendant.
.doc-page #testTag .flex-column > text {
}
// The same style applies to multiple selectors.
.font-text, .font-comma {
}
</style> <template>
<div class="{{docBody}}">
<text class="{{rowDesc}}" value="Description"></text>
</div>
</template>
<style>
.doc-body .row-desc1 {
color: #ff0000;
};
.doc-body .row-desc2 {
color: #0000ff;
};
.doc-body2 .row-desc1 {
color: #00ff00;
};
</style>
<script>
export default {
data: {
rowDesc: "row-desc1",
docBody: "doc-body"
}
}
</script> In the preceding sample code, when the value of rowDesc is changed from row-desc1 to row-desc2, Native is notified to update the node style; when the value of docBody is changed from doc-body to doc-body2, DOM is also notified for update.
The doc-body selector is not the last one, and its change may affect many DOM elements and further affect the rendering performance.
The priority calculation of the selector in the current style is the same as that of the browser and a subset of the browser CSS rendering. Only the inline, id, class, tag, descendant, and direct descendant selectors are supported.
Selectors in descending order of priorities are inline > #id > .class > tag. If these selectors match multiple CSS declarations (for example, #page .class-div and .page .class-div) of the same div element, the declaration priority is determined by the total scores of each selector.
If the weights of the id, class, and tag selectors are 10000, 100, and 1 respectively, the scores of the CSS declarations are calculated as follows:
Therefore:
A declaration with a higher score has a higher priority. If two declarations have the same score, the latter overrides the former.
Currently, the precompilation of less and sass is supported. The sample code of less precompilation is as follows:
<!-- Import an external file to replace the internal style.-->
<style lang="less" src="./lessFile.less">
</style>
<!-- Merge external files. -->
<style lang="less">
@import './lessFile.less';
.page-less {
#testTag {
.less-font-text, .less-font-comma {
font-size: 60px;
}
}
}
</style> The sample code of sass precompilation is as follows:
<!-- Import an external file to replace the internal style.-->
<style lang="sass" src="./sassFile.scss">
</style>
<!-- Merge external files. -->
<style lang="sass">
@import './sassFile.scss';
.page-sass{
#testTag {
.sass-font-text, .sass-font-comma {
font-size: 60px;
}
}
}
</style> For an element, if an attribute is of the Boolean type and its default value is false, the attribute name can be used to declare a pseudo-class. After the attribute is set to true, the pseudo-class takes effect. The disabled attribute of all elements and the checked attribute of the input element are such attributes.
Other elements may support the pseudo-class in other forms. An example is the pseudo-class focus. For this pseudo-class to take effect, the input element needs to proactively call the focus method, or a focus is obtained upon user operations. For details, please refer to the element description.
A pseudo-class code sample is as follows:
<template>
<input type="button" class="btn" disabled="{{btndisabled}}">Click</input>
</template>
<style>
.btn {
width: 360px;
height: 180px;
background-color: red;
}
.btn:disabled {
background-color: green;
}
</style> When the disabled attribute of an element is set to true, the style of the pseudo-class disabled takes effect. In the sample code, the value of background-color will be changed from red to green. The following table describes the supported pseudo-classes.
Pseudo-Class | Element | Conditions for the Pseudo-Class to Take Effect |
|---|---|---|
:active | all | A user touches a phone screen. The pseudo-class becomes invalid when the user takes the finger off the screen. The pseudo-class style of each subelement under Tabs takes effect when a user touches a phone screen, and will not become invalid when the user takes the finger off the screen. NOTE: Vision products do not support the pseudo-class :active. |
:disabled | all | The value of the disabled attribute changes to true. |
:focus | input textarea | An element obtains the focus. |
:checked | input(type="checkbox") switch | The value of the checked attribute changes to true. |