Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
7047dd4f
D
Docs
项目概览
OpenHarmony
/
Docs
8 个月 前同步成功
通知
158
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
7047dd4f
编写于
8月 12, 2022
作者:
H
HelloCrease
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs
Signed-off-by:
N
HelloCrease
<
lian15@huawei.com
>
上级
cf7341d6
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
21 addition
and
20 deletion
+21
-20
zh-cn/application-dev/ui/js-framework-syntax-css.md
zh-cn/application-dev/ui/js-framework-syntax-css.md
+17
-17
zh-cn/application-dev/ui/ts-resource-access.md
zh-cn/application-dev/ui/ts-resource-access.md
+3
-0
zh-cn/application-dev/ui/ui-js-components-switch.md
zh-cn/application-dev/ui/ui-js-components-switch.md
+0
-2
zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
...pplication-dev/ui/ui-ts-basic-resource-file-categories.md
+1
-1
未找到文件。
zh-cn/application-dev/ui/js-framework-syntax-css.md
浏览文件 @
7047dd4f
...
...
@@ -57,12 +57,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认
css选择器用于选择需要添加样式的元素,支持的选择器如下表所示:
| 选择器
| 样例 | 样例描述
|
| --------
| -------- |
-------- |
| .class
| .container | 用于选择class="container"的组件。
|
|
\#
id
|
\#
titleId | 用于选择id="titleId"的组件。
|
| tag
| text | 用于选择text组件。
|
| ,
| .title,
.content | 用于选择class="title"和class="content"的组件。
|
| 选择器
| 样例 | 样例描述
|
| --------
----------------- | ------------------------------------- | --------------------------------
-------- |
| .class
| .container | 用于选择class="container"的组件。
|
|
\#
id
|
\#
titleId | 用于选择id="titleId"的组件。
|
| tag
| text | 用于选择text组件。
|
| ,
| .title,
.content | 用于选择class="title"和class="content"的组件。
|
|
\#
id
.class
tag |
\#
containerId
.content
text | 非严格父子关系的后代选择器,选择具有id="containerId"作为祖先元素,class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系,可以使用“
>
”代替空格,如:\#containerId
>
.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 > 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"]、
switch | 表示checked属性为true的元素(不支持动画样式的设置)。
|
| 名称
| 支持组件 | 描述
|
| --------
- | ---------------------------------------- | --------------------------------
-------- |
| :disabled | 支持disabled属性的组件
| 表示disabled属性变为true时的元素(不支持动画样式的设置)。
|
| :active
| 支持click事件的组件
<br/>
| 表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。 |
| :waiting
| button | 表示waiting属性为true的元素(不支持动画样式的设置)。
|
| :checked
| input[type="checkbox"、type="radio"]、
switch | 表示checked属性为true的元素(不支持动画样式的设置)。
|
伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式:
...
...
zh-cn/application-dev/ui/ts-resource-access.md
浏览文件 @
7047dd4f
...
...
@@ -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目录中定义的资源。
...
...
zh-cn/application-dev/ui/ui-js-components-switch.md
浏览文件 @
7047dd4f
...
...
@@ -52,9 +52,7 @@ Switch为开关选择器,切换开启或关闭状态。具体用法请参考[S
background-color: #F1F3F5;
}
switch{
// 选中时的字体颜色
texton-color: #002aff;
// 未选中时的字体颜色
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
...
...
zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @
7047dd4f
...
...
@@ -75,7 +75,7 @@ base目录与限定词目录下面可以创建资源组目录(包括element、
| ------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。
<br/>
-
boolean,布尔型
<br/>
-
color,颜色
<br/>
-
float,浮点型
<br/>
-
intarray,整型数组
<br/>
-
integer,整型
<br/>
-
pattern,样式
<br/>
-
plural,复数形式
<br/>
-
strarray,字符串数组
<br/>
-
string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。
<br/>
-
boolean.json
<br/>
-
color.json
<br/>
-
float.json
<br/>
-
intarray.json
<br/>
-
integer.json
<br/>
-
pattern.json
<br/>
-
plural.json
<br/>
-
strarray.json
<br/>
-
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录