提交 9739d4b3 编写于 作者: Y yaoyuchi

修改检视意见

Signed-off-by: Nyaoyuchi <yaoyuchi@huawei.com>
上级 9e2c566b
......@@ -41,7 +41,7 @@
| backdrop-filter<sup>5+</sup> | string | - | 语法:backdrop-filter:&nbsp;blur(px)<br/>通过这个样式可以设置当前组件布局范围的背景模糊,参数用于指定模糊半径,如果没有设置值,则默认是0(不模糊),不支持百分比。<br/>示例:<br/>-&nbsp;backdrop-filter:&nbsp;blur(10px) |
| window-filter<sup>5+</sup> | string | - | 语法:window-filter:&nbsp;blur(percent),&nbsp;style<sup>5+</sup><br/>通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式,如果没有设置值,则默认是0%(不模糊),多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值:small_light(默认值),&nbsp;medium_light,&nbsp;large_light,&nbsp;xlarge_light,&nbsp;small_dark,&nbsp;medium_dark,&nbsp;large_dark,&nbsp;xlarge_dark。<br/>示例:<br/>-&nbsp;window-filter:&nbsp;blur(50%)<br/>-&nbsp;window-filter:&nbsp;blur(10%),&nbsp;large_light |
| opacity | number | 1 | 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
| display | string | flex | 确定一个元素所产生的框的类型,可选值为:<br/>-&nbsp;flex:弹性布局。<br/>-&nbsp;none:不渲染此元素。<br />-inline:元素会被显示为内联元素,元素前后没有换行符<br />-block:元素将显示为块级元素,元素前后会带有换行符,容器组件默认为block<br />-inline-block:设置为行内盒子,在同一行展示,可以设置宽高,基础组件默认为inline-block |
| display | string | flex | 确定一个元素所产生的框的类型,可选值为:<br/>-&nbsp;flex:弹性布局。<br/>-&nbsp;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/>-&nbsp;visible:元素正常显示。<br/>-&nbsp;hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;visibility和display样式都设置时,仅display生效。 |
| flex | number&nbsp;\|&nbsp;string | - | 规定当前组件如何适应父组件中的可用空间。<br/>flex可以指定1个、2个<sup>5+</sup>或3个<sup>5+</sup>值。<br/>单值语法:<br/>-&nbsp;一个无单位数:用来设置组件的flex-grow。<br/>-&nbsp;一个有效的宽度值5+:用来设置组件的flex-basis。<br/>双值语法<sup>5+</sup><br/>第一个值必须是无单位数,用来设置组件的flex-grow。第二个值是以下之一:<br/>-&nbsp;一个无单位数:用来设置组件的flex-shrink。<br/>-&nbsp;一个有效的宽度值:用来设置组件的flex-basis。<br/>三值语法<sup>5+</sup><br/>第一个值必须是无单位数,用来设置组件的flex-grow;第二个值必须是无单位数,用来设置组件的flex-shrink;第三个值必须是一个有效的宽度值,用来设置组件的flex-basis。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;仅父容器为&lt;div&gt;&lt;list-item&gt;&lt;tabs&gt;&lt;refresh&gt;&lt;stepper-item&gt;<sup>5+</sup>时生效。 |
| flex-grow | number | 0 | 设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;仅父容器为&lt;div&gt;&lt;list-item&gt;&lt;tabs&gt;&lt;refresh&gt;&lt;stepper-item&gt;<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_image_0000001214837129](figures\zh-cn_image_0000001214837129)
![zh-cn_image_0000001214837129](figures\zh-cn_image_0000001214837129.png)
......@@ -31,7 +31,7 @@
| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有:<br/>-&nbsp;flex-start:项目位于容器的开头。<br/>-&nbsp;flex-end:项目位于容器的结尾。<br/>-&nbsp;center:项目位于容器的中心。<br/>-&nbsp;space-between:项目位于各行之间留有空白的容器内。<br/>-&nbsp;space-around:项目位于各行之前、之间、之后都留有空白的容器内。<br/>-&nbsp;space-evenly<sup>5+</sup>:&nbsp;&nbsp;均匀排列每个元素,每个元素之间的间隔相等。 |
| align-items | string | stretch<br/> | 否 | flex容器当前行的交叉轴对齐格式,可选值为:<br/>-&nbsp;stretch:弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start:元素向交叉轴起点对齐。<br/>-&nbsp;flex-end:元素向交叉轴终点对齐。<br/>-&nbsp;center:元素在交叉轴居中。 |
| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时,多行内容对齐格式,可选值为:<br/>-&nbsp;flex-start:所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。<br/>-&nbsp;flex-end:所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。<br/>-&nbsp;center:所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。<br/>-&nbsp;space-between:所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。<br/>-&nbsp;space-around:所有行在容器中平均分布,相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;none:不渲染此元素<br />-inline-flex:当设置为inline-flex 时,同时具备flex样式和inline-block的效果 |
| display | string | flex | 否 | 确定该元素视图框的类型,该值暂不支持动态修改。可选值为:<br/>-&nbsp;flex:弹性布局<br/>-&nbsp;grid:网格布局<br/>-&nbsp;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/>-&nbsp;50px&nbsp;100px&nbsp;60px:分三列,第一列50px,第二列100px,第三列60px;<br/>-&nbsp;1fr&nbsp;1fr&nbsp;2fr:分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份;<br/>-&nbsp;30%&nbsp;20%&nbsp;50%:分三列,将父组件允许的宽为基准,第一列占30%,第二列占20%,第三列占50%;<br/>-&nbsp;repeat(2,100px):分两列,第一列100px,第二列100px;<br/>-&nbsp;repeat(auto-fill,100px)<sup>5+</sup>:按照每列100px的大小和交叉轴大小计算最大正整数重复次数,按照该重复次数布满交叉轴;<br/>-&nbsp;auto&nbsp;1fr&nbsp;1fr:分三列,第一列自适应内部子组件所需宽度,剩余空间分为两等份,第二列占一份,第三列占一份。 |
| grid-[columns\|rows]-gap | &lt;length&gt; | 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.
先完成此消息的编辑!
想要评论请 注册