Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
9739d4b3
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看板
提交
9739d4b3
编写于
4月 22, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改检视意见
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
9e2c566b
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
4 addition
and
4 deletion
+4
-4
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
...ion-dev/reference/arkui-js/js-components-common-styles.md
+3
-3
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
...ion-dev/reference/arkui-js/js-components-container-div.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @
9739d4b3
...
...
@@ -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
:元素会被显示为内联元素,元素前后没有换行符
<br
/>
-block:元素将显示为块级元素,元素前后会带有换行符,容器组件默认为block
<br
/>
-inline-block
:设置为行内盒子,在同一行展示,可以设置宽高,基础组件默认为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>
时生效。 |
...
...
@@ -73,7 +73,7 @@
### box-sizing 示例:
```
js
```
html
<div
class=
"container"
onswipe=
"touchMove"
>
<text
style=
"margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border: blue; border-width: 20px;"
>
contentBox
...
...
@@ -86,4 +86,4 @@
### box-sizing运行效果:


zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @
9739d4b3
...
...
@@ -31,7 +31,7 @@
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:
<br/>
-
flex-start:项目位于容器的开头。
<br/>
-
flex-end:项目位于容器的结尾。
<br/>
-
center:项目位于容器的中心。
<br/>
-
space-between:项目位于各行之间留有空白的容器内。
<br/>
-
space-around:项目位于各行之前、之间、之后都留有空白的容器内。
<br/>
-
space-evenly
<sup>
5+
</sup>
:
均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch
<br/>
| 否 | flex容器当前行的交叉轴对齐格式,可选值为:
<br/>
-
stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
<br/>
-
flex-start:元素向交叉轴起点对齐。
<br/>
-
flex-end:元素向交叉轴终点对齐。
<br/>
-
center:元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:
<br/>
-
flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
<br/>
-
flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
<br/>
-
center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
<br/>
-
space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
<br/>
-
space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
<br/>
-
flex:弹性布局
<br/>
-
grid:网格布局
<br/>
-
none:不渲染此元素
<br
/>
-inline-flex:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:
<br/>
-
flex:弹性布局
<br/>
-
grid:网格布局
<br/>
-
none:不渲染此元素
<br
/>
-inline-flex
<sup>
9+
</sup>
:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| grid-template-[columns
\|
rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量,不设置时默认1行1列,仅当display为grid时生效。
<br/>
示例:如设置grid-template-columns为:
<br/>
-
50px
100px
60px:分三列,第一列50px,第二列100px,第三列60px;
<br/>
-
1fr
1fr
2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;
<br/>
-
30%
20%
50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;
<br/>
-
repeat(2,100px):分两列,第一列100px,第二列100px;
<br/>
-
repeat(auto-fill,100px)
<sup>
5+
</sup>
:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;
<br/>
-
auto
1fr
1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns
\|
rows]-gap |
<
length
>
| 0 | 否 | 用于设置行与行的间距或者列与列的间距,也可以支持通过grid-gap设置相同的行列间距,仅当display为grid时生效。 |
| grid-row-[start
\|
end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录