属性(样式)

组件属性(样式),在.gen文件中由<style></style>标签包裹,用于编写组件的属性。

属性部分会在编译期间合并到组件中,通过idclass进行索引。

语法

1<style>
2    $($($style_ident{
3        $prop_key: $prop_value;
4    })*)?
5</style>
  • $style_ident:属性标识(idclass)
  • $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>