Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 9e2c566b 编写于 作者: Y yaoyuchi
浏览文件
操作

update display and box-sizing 

Signed-off-by: Nyaoyuchi <yaoyuchi@huawei.com>
上级 28ea6c2a
显示空白变更内容
内联 并排
Showing with 77 addition and 58 deletion
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @ 9e2c566b
......@@ -7,7 +7,7 @@
| 名称 | 类型 | 默认值 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ------------ | ---------------------------------------- |
| ----------------------------------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------------------------ |
| width | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的宽度。<br/>缺省时使用元素自身内容需要的宽度。<br/> |
| height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 设置组件自身的高度。<br/>缺省时使用元素自身内容需要的高度。<br/> |
| min-width<sup>5+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>6+</sup> | 0 | 设置元素的最小宽度。 |
......@@ -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：不渲染此元素。 |
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：<br/>-&nbsp;flex：弹性布局。<br/>-&nbsp;none：不渲染此元素。<br />-inline：元素会被显示为内联元素，元素前后没有换行符<br />-block：元素将显示为块级元素，元素前后会带有换行符，容器组件默认为block<br />-inline-block：设置为行内盒子，在同一行展示，可以设置宽高，基础组件默认为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>时生效。 |
......@@ -63,8 +63,27 @@
| border-image-outset<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | 0 | 指定边框图像可超出边框的大小。<br/>指定一个值时，边框图像在四个方向超出边框的距离。<br/>指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的&nbsp;。<br/>指定三个值时，第一个指定上边的边框图像超出边框的距离&nbsp;，第二个指定左右两边的边框图像超出边框的距离&nbsp;，第三个指定下边的边框图像超出边框的距离&nbsp;。<br/>指定四个值时分别为上、右、下、左边的边框图像超出边框的距离&nbsp;（顺时针顺序）。 |
| border-image-repeat<sup>7+</sup> | string | stretch | 定义图片如何填充边框。<br/>stretch:&nbsp;拉伸图片以填充边框。<br/>repeat：平铺图片以填充边框。<br/>round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。<br/> |
| border-image<sup>7+</sup> | string | - | 简写属性，可以选择以下两种设置方式：<br/>-&nbsp;设置图片边框的每个属性。包含图像的边界向内偏移，图像边界的宽度，边框图像可超出边框盒的大小，图片如何填充边框，顺序设置为&nbsp;border-image-source&nbsp;,border-image-slice,border-image-width,border-image-outset,border-image-repeat，不设置的值为默认值。<br/>-&nbsp;渐变色边框<br/>&nbsp;&nbsp;示例:<br/>&nbsp;&nbsp;border-image:&nbsp;linear-gradient(red,&nbsp;yellow)&nbsp;10px |
| box-sizing<sup>8+</sup> | string | border-box | -border-box：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。<br />-content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。<br />示例：<br />box-sizing: border-box\|content-box<br /> |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 通用样式都不是必填项。
## 示例
### box-sizing 示例：
```js
<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运行效果：
![zh-cn_image_0000001214837129](figures\zh-cn_image_0000001214837129)
zh-cn/application-dev/reference/arkui-js/js-components-container-div.md
浏览文件 @ 9e2c566b
......@@ -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：不渲染此元素 |
| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：<br/>-&nbsp;flex：弹性布局<br/>-&nbsp;grid：网格布局<br/>-&nbsp;none：不渲染此元素<br />-inline-flex：当设置为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.
先完成此消息的编辑！
想要评论请 注册 或