属性(样式)
组件属性(样式),在.gen
文件中由<style></style>
标签包裹,用于编写组件的属性。
属性部分会在编译期间合并到组件中,通过id
或class
进行索引。
语法
1<style>
2 $($($style_ident{
3 $prop_key: $prop_value;
4 })*)?
5</style>
$style_ident
:属性标识(id
或class
)
$prop_key
:属性
$prop_value
:属性值
使用<style>
1<template>
2 <view id="my_view">
3 <label class="my_label"></label>
4 </view>
5</template>
6
7<style>
8#my_view{
9 height: 100.0;
10 width: 100.0;
11 background_visible: true;
12 theme: Error;
13 .my_label{
14 text: "Hello World";
15 color: #f4b177;
16 }
17}
18</style>
索引原则
在<style>
中通过
#
索引组件id
.
索引组件class
- 支持并建议进行嵌套
权重原则
属性的权重原则很简单,嵌套越深权重值越大,权重值越大,属性优先级越高。
1<style>
2#my_view{
3 .my_label{ 2️⃣
4 text: "Hello World";
5 color: #f4b177;
6 }
7}
8
9.my_label{ 1️⃣
10 color: #FF0000;
11}
12</style>
在上面的例子中有两个.my_label
,其中 2️⃣ 比 1️⃣ 的权重值更大,优先级更高,因此当它们有相同属性color
时,采用了color: #f4b177;
,也就是优先级更高的。
合并原则
属性的合并原则适用于class
,当有多个同名class
时这些class
中的属性会合并为一个class
并也遵守权重原则。
1<style>
2#my_view{
3 .my_label{
4 text: "Hello World";
5 color: #f4b177;
6 }
7}
8
9.my_label{
10 font_size: 16.0;
11 color: #FF0000;
12}
13</style>
如上,根据合并原则最终.my_label
的所有属性为:
1<style>
2.my_label{
3 font_size: 16.0;
4 text: "Hello World";
5 color: #f4b177;
6}
7</style>