Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
23ffa54f
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
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看板
提交
23ffa54f
编写于
4月 22, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改检视意见
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
9739d4b3
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
14 addition
and
14 deletion
+14
-14
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
...ion-dev/reference/arkui-js/js-components-common-styles.md
+14
-14
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @
23ffa54f
...
...
@@ -41,7 +41,7 @@
| backdrop-filter
<sup>
5+
</sup>
| string | - | 语法：backdrop-filter:
blur(px)
<br/>
通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。
<br/>
示例：
<br/>
-
backdrop-filter:
blur(10px) |
| window-filter
<sup>
5+
</sup>
| string | - | 语法：window-filter:
blur(percent),
style
<sup>
5+
</sup><br/>
通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值),
medium_light,
large_light,
xlarge_light,
small_dark,
medium_dark,
large_dark,
xlarge_dark。
<br/>
示例：
<br/>
-
window-filter:
blur(50%)
<br/>
-
window-filter:
blur(10%),
large_light |
| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：
<br/>
-
flex：弹性布局。
<br/>
-
none：不渲染此元素。
<br
/>
-inline
<sup>
9+
</sup>
：元素会被显示为内联元素，元素前后没有换行符
<br
/>
-block
<sup>
9+
</sup>
：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block
<br
/>
-inline-block
<sup>
9+
</sup>
：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block
|
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：
<br/>
-
flex：弹性布局。
<br/>
-
none：不渲染此元素。
<br
/>
-inline
<sup>
9+
</sup>
：元素会被显示为内联元素，元素前后没有换行符
。
<br
/>
-block
<sup>
9+
</sup>
：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block。
<br
/>
-inline-block
<sup>
9+
</sup>
：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为inline-block。
|
| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：
<br/>
-
visible：元素正常显示。
<br/>
-
hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
<br/>
>
**说明：**
<br/>
>
visibility和display样式都设置时，仅display生效。 |
| flex | number
\|
string | - | 规定当前组件如何适应父组件中的可用空间。
<br/>
flex可以指定1个、2个
<sup>
5+
</sup>
或3个
<sup>
5+
</sup>
值。
<br/>
单值语法：
<br/>
-
一个无单位数：用来设置组件的flex-grow。
<br/>
-
一个有效的宽度值5+：用来设置组件的flex-basis。
<br/>
双值语法
<sup>
5+
</sup>
：
<br/>
第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：
<br/>
-
一个无单位数：用来设置组件的flex-shrink。
<br/>
-
一个有效的宽度值：用来设置组件的flex-basis。
<br/>
三值语法
<sup>
5+
</sup>
：
<br/>
第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。
<br/>
>
**说明：**
<br/>
>
仅父容器为
<
div
>
、
<
list-item
>
、
<
tabs
>
、
<
refresh
>
、
<
stepper-item
>
<sup>
5+
</sup>
时生效。 |
| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。
<br/>
>
**说明：**
<br/>
>
仅父容器为
<
div
>
、
<
list-item
>
、
<
tabs
>
、
<
refresh
>
、
<
stepper-item
>
<sup>
5+
</sup>
时生效。 |
...
...
@@ -71,19 +71,19 @@
## 示例
### box-sizing 示例：
-
box-sizing
```
html
<div
class=
"container"
onswipe=
"touchMove"
>
<text
style=
"margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border: blue; border-width: 20px;"
>
contentBox
</text>
<text
style=
"margin: 10px; box-sizing: border-box; width: 300px;height: 300px;border: blue; border-width: 20px;"
>
borderBox
</text>
</div>
```
```html
<div class="container" onswipe="touchMove">
<text style="margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border: blue; border-width: 20px;">
contentBox
</text>
<text style="margin: 10px; box-sizing: border-box; width: 300px;height: 300px;border: blue; border-width: 20px;">
borderBox
</text>
</div>
```
### box-sizing
运行效果：
-
运行效果：
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
