未验证 提交 cbb1a93a 编写于 作者: O openharmony_ci 提交者: Gitee

!9395 updata js-components-svg-line

Merge pull request !9395 from wangshuainan1/master
......@@ -24,24 +24,24 @@
除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外,还支持如下样式:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ---------------------------------------- |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:<br/>-&nbsp;nowrap:不换行,单行显示。<br/>-&nbsp;wrap:换行,多行显示。 |
| 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<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)。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局,可选值为:<br/>-&nbsp;row:逐行填充元素,如果行空间不够,则新增行;<br/>-&nbsp;column:逐列填充元素,如果列空间不够,则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible:多个子元素内容超过元素大小时,显示在元素外面;<br/>-&nbsp;hidden:元素内容超过元素大小时,进行裁切显示;<br/>-&nbsp;scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小,默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式:<br/>-&nbsp;stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;<br/>-&nbsp;flex-start:Flex布局容器内元素向交叉轴起点对齐;<br/>-&nbsp;flex-end:Flex布局容器内元素向交叉轴终点对齐;<br/>-&nbsp;center:Flex布局容器内元素在交叉轴居中对齐;<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果,可选值为:<br/>-&nbsp;spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;<br/>-&nbsp;fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;<br/>-&nbsp;none:滑动到边缘后无效果 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ |
| flex-direction | string | row | 否 | flex容器主轴方向。可选项有:<br/>-&nbsp;column:垂直方向从上到下。<br/>-&nbsp;row:水平方向从左到右。 |
| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示,该值暂不支持动态修改。可选项有:<br/>-&nbsp;nowrap:不换行,单行显示。<br/>-&nbsp;wrap:换行,多行显示。 |
| 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:元素在交叉轴居中。<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与’flex-start‘等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| 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<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)。 |
| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号,仅当父组件display样式为grid时生效(仅div支持display样式设置为grid)。 |
| grid-auto-flow<sup>5+</sup> | string | - | 否 | 使用框架自动布局算法进行网格的布局,可选值为:<br/>-&nbsp;row:逐行填充元素,如果行空间不够,则新增行;<br/>-&nbsp;column:逐列填充元素,如果列空间不够,则新增列。 |
| overflow<sup>6+</sup> | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。<br/>-&nbsp;visible:多个子元素内容超过元素大小时,显示在元素外面;<br/>-&nbsp;hidden:元素内容超过元素大小时,进行裁切显示;<br/>-&nbsp;scroll:元素内容超过元素大小时,进行滚动显示并展示滚动条(当前只支持纵向)。<br/>overflow:&nbsp;scroll样式需要元素设置固定的大小,默认滚动方向与容器方向一致。 |
| align-items<sup>6+</sup> | string | - | 否 | 设置容器中元素交叉轴上的对齐方式:<br/>-&nbsp;stretch:Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度;<br/>-&nbsp;flex-start:Flex布局容器内元素向交叉轴起点对齐;<br/>-&nbsp;flex-end:Flex布局容器内元素向交叉轴终点对齐;<br/>-&nbsp;center:Flex布局容器内元素在交叉轴居中对齐;<br/>-&nbsp;baseline:如Flex布局纵向排列,则该值与'flex-start'等效。横向布局时,内容元素存在文本时按照文本基线对齐,否则底部对齐。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
| scrollbar-width<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置滚动条的宽度。 |
| overscroll-effect<sup>6+</sup> | string | - | 否 | 设置滚动边缘效果,可选值为:<br/>-&nbsp;spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹;<br/>-&nbsp;fade:渐隐物理动效,滑动到边缘后展示一个波浪形的渐隐,根据速度和滑动距离的变化渐隐也会发送一定的变化;<br/>-&nbsp;none:滑动到边缘后无效果 |
## 事件
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -14,7 +14,7 @@
| stroke-dasharray | &lt;string&gt; | - | 否 | 指定短划线和缺口的长度。格式为[length&nbsp;length&nbsp;length&nbsp;length],短划线和缺口的长度中间空格隔开成对出现。 |
| stroke-dashoffset | &lt;length&gt; | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 |
| stroke-linejoin | [bevel&nbsp;\|&nbsp;miter&nbsp;\|&nbsp;round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。<br/>bevel:使用斜角连接路径段;<br/>miter:使用尖角连接路径段;<br/>round:使用圆角连接路径段。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt:不在路径两端扩展;<br/>round:在路径的末端延伸半个圆,直径等于线度。<br/>square:在路径的末端延伸半个圆,宽度等于线宽的一半,高度等于线宽。 |
| stroke-linecap | [butt&nbsp;\|&nbsp;round&nbsp;\|&nbsp;square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。<br/>butt:不在路径两端扩展;<br/>round:在路径的末端延伸半个圆,直径等于线宽;<br/>square:在路径的末端延伸一个矩形,宽度等于线宽的一半,高度等于线宽。 |
| stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 |
| stroke-opacity | number | 1 | 否 | 轮廓线条的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。支持属性动画 |
| stroke-width | &lt;length&gt; | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 |
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......@@ -38,8 +38,11 @@
<line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
<line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
// round:在路径的末端延伸半个圆,直径等于线宽
<line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
// butt:不在路径两端扩展
<line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
// square:在路径的末端延伸一个矩形,宽度等于线宽的一半,高度等于线宽
<line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
</svg>
</div>
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性,设置的通用属性会传递给子组件。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持所列的Svg组件通用属性和以下表格的属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -13,12 +13,12 @@
## 子组件
支持animate、animateMotion、animateTransform
支持[animate](js-components-svg-animate.md)[animateMotion](js-components-svg-animatemotion.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
支持Svg组件[通用属性](../arkui-js/js-components-svg-common-attributes.md)和以下属性。
支持Svg组件[通用属性](js-components-svg-common-attributes.md)和以下属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
......
......@@ -19,7 +19,7 @@
## 子组件
支持tspan、textpath、animate、animateTransform
支持[tspan](js-components-svg-tspan.md)[textpath](js-components-svg-textpath.md)[animate](js-components-svg-animate.md)[animateTransform](js-components-svg-animatetransform.md)
## 属性
......
......@@ -17,7 +17,7 @@
## 子组件
tspan
[tspan](js-components-svg-tspan.md)
## 属性
......
......@@ -17,7 +17,7 @@
## 子组件
支持tspan
支持[tspan](js-components-svg-tspan.md)
支持以下表格中的属性。
......
......@@ -15,7 +15,7 @@
## 子组件
支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform
支持[svg](js-components-svg.md)[rect](js-components-svg-rect.md)[circle](js-components-svg-circle.md)[ellipse](../arkui-js/js-components-svg-ellipse.md)[path](js-components-svg-path.md)[line](../arkui-js/js-components-svg-line.md)[polygon](../arkui-js/js-components-svg-polygon.md)[polyline](js-components-svg-polyline.md)[text](js-components-svg-text.md)[animate](js-components-svg-animate.md)[animateTransform](js-components-svg-animateTransform.md)
## 属性
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册