提交 7047dd4f 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 cf7341d6
......@@ -57,12 +57,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
css选择器用于选择需要添加样式的元素,支持的选择器如下表所示:
| 选择器 | 样例 | 样例描述 |
| -------- | -------- | -------- |
| .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 |
| tag | text | 用于选择text组件。 |
| , | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
| 选择器 | 样例 | 样例描述 |
| ------------------------- | ------------------------------------- | ---------------------------------------- |
| .class | .container | 用于选择class="container"的组件。 |
| \#id | \#titleId | 用于选择id="titleId"的组件。 |
| tag | text | 用于选择text组件。 |
| , | .title,&nbsp;.content | 用于选择class="title"和class="content"的组件。 |
| \#id&nbsp;.class&nbsp;tag | \#containerId&nbsp;.content&nbsp;text | 非严格父子关系的后代选择器,选择具有id="containerId"作为祖先元素,class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系,可以使用“&gt;”代替空格,如:\#containerId&gt;.content。 |
示例:
......@@ -79,7 +79,7 @@ css选择器用于选择需要添加样式的元素,支持的选择器如下
```
/* 页面样式xxx.css */
/\* 对所有div组件设置样式 \*/
/* 对所有div组件设置样式 */
div {
flex-direction: column;
}
......@@ -95,13 +95,13 @@ div {
.title, .content {
padding: 5px;
}
/\* 对class="container"的组件下的所有text设置样式 \*/
/* 对class="container"的组件下的所有text设置样式 */
.container text {
color: \#007dff;
color: #007dff;
}
/\* 对class="container"的组件下的直接后代text设置样式 \*/
/* 对class="container"的组件下的直接后代text设置样式 */
.container &gt; text {
color: \#fa2a2d;
color: #fa2a2d;
}
```
......@@ -124,12 +124,12 @@ css伪类是选择器中的关键字,用于指定要选择元素的特殊状
除了单个伪类之外,还支持伪类的组合,例如,:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示,按照优先级降序排列:
| 名称 | 支持组件 | 描述 |
| -------- | -------- | -------- |
| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素(不支持动画样式的设置)。 |
| :active | 支持click事件的组件<br/> | 表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。 |
| :waiting | button | 表示waiting属性为true的元素(不支持动画样式的设置)。 |
| :checked | input[type="checkbox"、type="radio"]、&nbsp;switch | 表示checked属性为true的元素(不支持动画样式的设置)。 |
| 名称 | 支持组件 | 描述 |
| --------- | ---------------------------------------- | ---------------------------------------- |
| :disabled | 支持disabled属性的组件 | 表示disabled属性变为true时的元素(不支持动画样式的设置)。 |
| :active | 支持click事件的组件<br/> | 表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。 |
| :waiting | button | 表示waiting属性为true的元素(不支持动画样式的设置)。 |
| :checked | input[type="checkbox"、type="radio"]、&nbsp;switch | 表示checked属性为true的元素(不支持动画样式的设置)。 |
伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式:
......
......@@ -8,7 +8,10 @@
引用rawfile下资源时使用```"$rawfile('filename')"```的形式,当前$rawfile仅支持Image控件引用图片资源,filename需要表示为rawfile目录下的文件相对路径,文件名需要包含后缀,路径开头不可以以"/"开头。
> **说明:**
>
> 资源描述符不能拼接使用,仅支持普通字符串如`'app.type.name'`。
>
> `$r`返回值为Resource对象,可通过[getString](../../reference/apis/js-apis-resource-manager.md#getstring) 方法获取对应的字符串。
在xxx.ets文件中,可以使用在resources目录中定义的资源。
......
......@@ -52,9 +52,7 @@ Switch为开关选择器,切换开启或关闭状态。具体用法请参考[S
background-color: #F1F3F5;
}
switch{
// 选中时的字体颜色
texton-color: #002aff;
// 未选中时的字体颜色
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
......
......@@ -75,7 +75,7 @@ base目录与限定词目录下面可以创建资源组目录(包括element、
| ------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean,布尔型<br/>-&nbsp;color,颜色<br/>-&nbsp;float,浮点型<br/>-&nbsp;intarray,整型数组<br/>-&nbsp;integer,整型<br/>-&nbsp;pattern,样式<br/>-&nbsp;plural,复数形式<br/>-&nbsp;strarray,字符串数组<br/>-&nbsp;string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 |
| profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 |
| rawfile | 表示其他类型文件,在应用构建为hap包后,以原始文件形式保存,不会被集成到resources.index文件中。 | 文件名可自定义。 |
### 媒体资源类型说明
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册