diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md index 5e090b96c37548888a4bf4c22c5d63d276b9a368..0d51d6238b8e1434efadbde33b288a87ee950d88 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md @@ -1,7 +1,7 @@ # div -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> **说明：** +> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 基础容器，用作页面结构的根节点或将内容进行分组。 @@ -24,24 +24,24 @@ 除支持组件[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：
- column：垂直方向从上到下。
- row：水平方向从左到右。 | -| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。 | -| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：
- flex-start：项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+:  均匀排列每个元素，每个元素之间的间隔相等。 | -| align-items | string | stretch
| 否 | flex容器当前行的交叉轴对齐格式，可选值为：
- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。 | -| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：
- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | -| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：
- flex：弹性布局
- grid：网格布局
- none：不渲染此元素 | -| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。
示例：如设置grid-template-columns为：
- 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
- 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
- 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
- repeat(2,100px)：分两列，第一列100px，第二列100px；
- repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
- auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 | -| grid-[columns\|rows]-gap | <length> | 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-flow5+ | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：
- row：逐行填充元素，如果行空间不够，则新增行；
- column：逐列填充元素，如果列空间不够，则新增列。 | -| overflow6+ | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。
- visible：多个子元素内容超过元素大小时，显示在元素外面；
- hidden：元素内容超过元素大小时，进行裁切显示；
- scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 | -| align-items6+ | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：
- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；
- flex-start：Flex布局容器内元素向交叉轴起点对齐；
- flex-end：Flex布局容器内元素向交叉轴终点对齐；
- center：Flex布局容器内元素在交叉轴居中对齐；
- baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | -| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | -| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | -| overscroll-effect6+ | string | - | 否 | 设置滚动边缘效果，可选值为：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；
- none：滑动到边缘后无效果 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------------------------ | -------------- | ------------ | ---- | ------------------------------------------------------------ | +| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：
- column：垂直方向从上到下。
- row：水平方向从左到右。 | +| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。 | +| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：
- flex-start：项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+:  均匀排列每个元素，每个元素之间的间隔相等。 | +| align-items | string | stretch
| 否 | flex容器当前行的交叉轴对齐格式，可选值为：
- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
- baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | +| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：
- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 | +| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：
- flex：弹性布局
- grid：网格布局
- none：不渲染此元素
-inline-flex9+：当设置为inline-flex 时，同时具备flex样式和inline-block的效果 | +| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。
示例：如设置grid-template-columns为：
- 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
- 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
- 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
- repeat(2,100px)：分两列，第一列100px，第二列100px；
- repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
- auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 | +| grid-[columns\|rows]-gap | <length> | 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-flow5+ | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：
- row：逐行填充元素，如果行空间不够，则新增行；
- column：逐列填充元素，如果列空间不够，则新增列。 | +| overflow6+ | string | visible | 否 | 设置元素内容区超过元素本身大小时的表现形式。
- visible：多个子元素内容超过元素大小时，显示在元素外面；
- hidden：元素内容超过元素大小时，进行裁切显示；
- scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。
overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。 | +| align-items6+ | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：
- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；
- flex-start：Flex布局容器内元素向交叉轴起点对齐；
- flex-end：Flex布局容器内元素向交叉轴终点对齐；
- center：Flex布局容器内元素在交叉轴居中对齐；
- baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 | +| scrollbar-color6+ | <color> | - | 否 | 设置滚动条的颜色。 | +| scrollbar-width6+ | <length> | - | 否 | 设置滚动条的宽度。 | +| overscroll-effect6+ | string | - | 否 | 设置滚动边缘效果，可选值为：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；
- none：滑动到边缘后无效果 | ## 事件 @@ -50,42 +50,42 @@ 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： -| 名称 | 参数 | 描述 | -| -------- | -------- | -------- | -| reachstart6+ | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。 | -| reachend6+ | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。 | -| reachtop6+ | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。 | -| reachbottom6+ | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。 | +| 名称 | 参数 | 描述 | +| ------------------------ | ---- | ---------------------------------------- | +| reachstart6+ | - | 当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。 | +| reachend6+ | - | 当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。 | +| reachtop6+ | - | 当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。 | +| reachbottom6+ | - | 当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。 | ## 方法 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： -| 名称 | 参数 | 返回值 | 描述 | -| -------- | -------- | -------- | -------- | -| getScrollOffset6+ | - | ScrollOffset | 获取元素内容的滚动偏移。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 需要设置overflow样式为scroll。 | -| scrollBy6+ | ScrollParam | - | 指定元素内容的滚动偏移。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 需要设置overflow样式为scroll。 | +| 名称 | 参数 | 返回值 | 描述 | +| ---------------------------- | ----------- | ------------ | --------------------------------------- | +| getScrollOffset6+ | - | ScrollOffset | 获取元素内容的滚动偏移。
需要设置overflow样式为scroll。 | +| scrollBy6+ | ScrollParam | - | 指定元素内容的滚动偏移。
需要设置overflow样式为scroll。 | **表1** ScrollOffset6+ -| 名称 | 类型 | 描述 | -| -------- | -------- | -------- | -| x | number | 在x轴方向的偏移，单位为px。 | -| y | number | 在y轴方向的偏移，单位为px。 | +| 名称 | 类型 | 描述 | +| ---- | ------ | --------------- | +| x | number | 在x轴方向的偏移，单位为px。 | +| y | number | 在y轴方向的偏移，单位为px。 | **表2** ScrollParam6+ -| 名称 | 类型 | 描述 | -| -------- | -------- | -------- | -| dx | number | 水平方向滑动的偏移量，单位px。 | -| dy | number | 垂直方向滑动的偏移量，单位px。 | -| smooth | boolean | 是否平滑处理。 | +| 名称 | 类型 | 描述 | +| ------ | ------- | ---------------- | +| dx | number | 水平方向滑动的偏移量，单位px。 | +| dy | number | 垂直方向滑动的偏移量，单位px。 | +| smooth | boolean | 是否平滑处理。 | ## 示例 1. Flex样式 - ``` + ```html
@@ -96,7 +96,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -131,7 +131,7 @@ ![zh-cn_image_0000001127285076](figures/zh-cn_image_0000001127285076.png) 2. Flex Wrap样式 - ``` + ```html
@@ -142,7 +142,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -178,8 +178,8 @@ ![zh-cn_image_0000001213396721](figures/zh-cn_image_0000001213396721.png) 3. Grid样式 - - ``` + + ```html
@@ -188,8 +188,8 @@
``` - - ``` + + ```css /* xxx.css */ .common { width: 400px; @@ -244,7 +244,7 @@ ![zh-cn_image_0000001213276619](figures/zh-cn_image_0000001213276619.png) 4. 拖拽7+ - ``` + ```html
@@ -252,7 +252,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -264,7 +264,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt'; export default { @@ -291,7 +291,7 @@ ![zh-cn_image_0000001213284927](figures/zh-cn_image_0000001213284927.gif) - ``` + ```html
@@ -301,7 +301,7 @@
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -317,7 +317,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt'; export default { @@ -355,7 +355,7 @@ ![zh-cn_image_0000001168005276](figures/zh-cn_image_0000001168005276.gif) 5. 手指捏合7+ - ``` + ```html
``` - ``` + ```css /* xxx.css */ .container { flex-direction: column; @@ -380,7 +380,7 @@ } ``` - ``` + ```js // xxx.js import prompt from '@system.prompt'; export default { diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md index 7ee5c552aa7540d8d2be194c726cc3e675e38c48..79c6068e49ba8880e88cc0ba0677732290bc8347 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-circle.md @@ -1,7 +1,7 @@ # circle -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 圆形形状。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -30,7 +30,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md index 4a07df766144fb030132dbf03a0eaa061896542d..70f7ab9bd10572e14617697c9129be88e9c4b62a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-common-attributes.md @@ -1,6 +1,6 @@ # 通用属性 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -14,7 +14,7 @@ | stroke-dasharray | <string> | - | 否 | 指定短划线和缺口的长度。格式为[length length length length]，短划线和缺口的长度中间空格隔开成对出现。 | | stroke-dashoffset | <length> | 0 | 否 | 设置关联虚线数组渲染时的偏移量。支持属性动画 | | stroke-linejoin | [bevel \| miter \| round] | miter | 否 | 进行描边时在路径的拐角处使用的形状。
bevel：使用斜角连接路径段；
miter：使用尖角连接路径段；
round：使用圆角连接路径段。 | -| stroke-linecap | [butt \| round \| square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。
butt：不在路径两端扩展；
round：在路径的末端延伸半个圆，直径等于线度。
square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。 | +| stroke-linecap | [butt \| round \| square] | butt | 否 | 路径描边时在它们的结尾处使用的形状。
butt：不在路径两端扩展；
round：在路径的末端延伸半个圆，直径等于线宽；
square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。 | | stroke-miterlimit | number | 4 | 否 | 设置将锐角绘制成斜角的极限值。支持属性动画 | | stroke-opacity | number | 1 | 否 | 轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画 | | stroke-width | <length> | 1px | 否 | 设置轮廓线条的宽度。支持属性动画 | diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md index 9c69504f6a8a8488958f9c088fc7755359c5ae65..5cdcf8e52a74d1557b88e2d4ea8f10f71348233c 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-ellipse.md @@ -1,7 +1,7 @@ # ellipse -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 椭圆形状。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -31,7 +31,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md index ae898c10942f3eb31793a5cfcaeb4705fd94fc2c..754b50e7c59254615367556910d04b6a89c55eb3 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-line.md @@ -1,7 +1,7 @@ # line -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制线条。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -31,15 +31,18 @@ ## 示例 -``` +```html
+ // round：在路径的末端延伸半个圆，直径等于线宽 + // butt：不在路径两端扩展 + // square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md index ba7ba55af69649a3eeb813b18b6e24a5111726c4..5d5c0efe75f5fc341451079b28f5671c72078838 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-path.md @@ -1,7 +1,7 @@ # path -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制路径。 @@ -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)和以下属性，设置的通用属性会传递给子组件。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -28,7 +28,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md index 1f4c4870badaeef483b402e52a2ba7ff5cb280df..fbcfea9ab868d48a21cd2571c508cb6dbae6f1c7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polygon.md @@ -1,7 +1,7 @@ # polygon -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制多边形。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -28,7 +28,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md index 4b39e2e6192a6f6b12914fa9a2fcf0efeb752a4b..92b11c267dab527521d0b24a8627795b7402ac3d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-polyline.md @@ -1,7 +1,7 @@ # polyline -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 绘制折线。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -28,7 +28,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md index 5acb102656db19d94b4aa713cf78725e49318504..a7aed7172a3e925ecccd285b745bce4cb8cb80d4 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-rect.md @@ -1,7 +1,7 @@ # rect -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 用于绘制矩形、圆角矩形。 @@ -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)和以下属性。 | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | -------- | -------- | -------- | -------- | @@ -33,7 +33,7 @@ ## 示例 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md index 4df75ebf6511acbe66d25da3d0f012541c8bdee9..664953f5fcbcfada13d8424701773fe14b40627a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-text.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)。 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md index eb9ffb6b56a46074c29f4017ba3a0b2fcd78ade6..cf6779fb5069197f1913c192007e776a2070334d 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md @@ -3,12 +3,12 @@ 沿路径绘制文本。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> -> - 按指定的路径绘制文本，可嵌套子标签tspan分段。 -> -> - 只支持被父元素标签text嵌套。 +> **说明：** +> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> - 按指定的路径绘制文本，可嵌套子标签tspan分段。 +> +> - 只支持被父元素标签text嵌套。 ## 权限列表 @@ -17,7 +17,7 @@ ## 子组件 -tspan。 +[tspan](js-components-svg-tspan.md)。 ## 属性 @@ -26,37 +26,26 @@ tspan。 支持以下表格中的属性。 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| id | string | - | 否 | 组件的唯一标识。 | -| path | string | 0 | 是 | 设置路径的形状。
字母指令表示的意义如下：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath | -| startOffset | <length>\|<percentage> | 0 | 否 | 设置文本沿path绘制的起始偏移。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| fill | <color> | black | 否 | 字体填充颜色 | -| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 | -| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | -| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | -| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | -| stroke-width | number | 1px | 否 | 字体边框宽度 | -| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | +| id | string | - | 否 | 组件的唯一标识。 | +| path | string | 0 | 是 | 设置路径的形状。
字母指令表示的意义如下：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath | +| startOffset | <length>\|<percentage> | 0 | 否 | 设置文本沿path绘制的起始偏移。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| fill | <color> | black | 否 | 字体填充颜色 | +| by | number | - | 否 | 相对被指定动画的属性偏移值，from默认为原属性值。 | +| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | +| fill-opacity | number | 1.0 | 否 | 字体填充透明度 | +| stroke | <color> | black | 否 | 绘制字体边框并指定颜色 | +| stroke-width | number | 1px | 否 | 字体边框宽度 | +| stroke-opacity | number | 1.0 | 否 | 字体边框透明度 | ## 示例 textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素<path>曲线仅做参照） -``` -/* xxx.css */ -.container { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - height: 1200px; - width: 600px; -} -``` - -``` +```html
@@ -70,11 +59,23 @@ textspan属性示例，textpath文本内容沿着属性path中的路径绘制文
``` +```css +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; +} +``` + + ![zh-cn_image_0000001173164775](figures/zh-cn_image_0000001173164775.png) textpath与tspan组合示例与效果图 -``` +```html
@@ -92,7 +93,7 @@ textpath与tspan组合示例与效果图 ![zh-cn_image_0000001173324691](figures/zh-cn_image_0000001173324691.png) -``` +```html
@@ -112,7 +113,7 @@ textpath与tspan组合示例与效果图 ![zh-cn_image_0000001173324689](figures/zh-cn_image_0000001173324689.png) -``` +```html
@@ -135,7 +136,7 @@ textpath与tspan组合示例与效果图 startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -146,7 +147,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘 } ``` -``` +```html
@@ -167,7 +168,7 @@ startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘 textpath与tspan组合属性动画与效果图 -``` +```html
@@ -204,7 +205,7 @@ textpath与tspan组合属性动画与效果图 textpath与tspan组合属性动画与效果图 -``` +```html
@@ -242,7 +243,7 @@ textpath与tspan组合属性动画与效果图 textpath与tspan组合属性动画与效果图 -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md index 0a1cb24abbce6d468d31e08aba802c1d1c4b3367..cb38ce4b167157441a7d4c572c94ab87a1ed0298 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg-tspan.md @@ -3,12 +3,12 @@ 添加文本样式。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> -> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 -> -> - 文本分段，只支持被父元素标签svg嵌套。 +> **说明：** +> - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> - 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 +> +> - 文本分段，只支持被父元素标签svg嵌套。 ## 权限列表 @@ -17,43 +17,31 @@ ## 子组件 -支持tspan。 +支持[tspan](js-components-svg-tspan.md)。 支持以下表格中的属性。 -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | -------- | -------- | -------- | -------- | -| id | string | - | 否 | 组件的唯一标识。 | -| x | <length>\|<percentage> | 0 | 否 | 设置组件左上角x轴坐标。 | -| y | <length>\|<percentage> | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 | -| dx | <length>\|<percentage> | 0 | 否 | 设置文本x轴偏移。 | -| dy | <length>\|<percentage> | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 | -| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 | -| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | -| fill | <color> | black | 否 | 字体填充颜色。 | -| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | -| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 | -| stroke | <color> | black | 否 | 绘制字体边框并指定颜色。 | -| stroke-width | number | 1px | 否 | 字体边框宽度。 | -| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 | - +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| -------------- | ---------------------------------- | ----- | ---- | ---------------------------------------- | +| id | string | - | 否 | 组件的唯一标识。 | +| x | <length>\|<percentage> | 0 | 否 | 设置组件左上角x轴坐标。 | +| y | <length>\|<percentage> | 0 | 否 | 设置组件左上角y轴坐标。作为textpath子组件时失效。 | +| dx | <length>\|<percentage> | 0 | 否 | 设置文本x轴偏移。 | +| dy | <length>\|<percentage> | 0 | 否 | 设置文本y轴偏移。作为textpath子组件时失效。 | +| rotate | number | 0 | 否 | 字体以左下角为圆心旋转角度，正数顺时针，负数逆时针。 | +| font-size | <length> | 30px | 否 | 设置文本的尺寸。 | +| fill | <color> | black | 否 | 字体填充颜色。 | +| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。 | +| fill-opacity | number | 1.0 | 否 | 字体填充透明度。 | +| stroke | <color> | black | 否 | 绘制字体边框并指定颜色。 | +| stroke-width | number | 1px | 否 | 字体边框宽度。 | +| stroke-opacity | number | 1.0 | 否 | 字体边框透明度。 | ## 示例 -``` -/* xxx.css */ -.container { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - height: 1000px; - width: 1080px; -} -``` - -``` +```html
@@ -73,22 +61,22 @@
``` -![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png) - -属性动画示例 - -``` +```css /* xxx.css */ -.container { +.container { flex-direction: row; justify-content: flex-start; align-items: flex-start; - height: 3000px; + height: 1000px; width: 1080px; } ``` -``` +![zh-cn_image_0000001127125196](figures/zh-cn_image_0000001127125196.png) + +属性动画示例 + +```html
@@ -111,9 +99,20 @@
``` +```css +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + ![zh-cn_image_0000001127285008](figures/zh-cn_image_0000001127285008.gif) -``` +```html
@@ -130,7 +129,7 @@ ![zh-cn_image_0000001127125198](figures/zh-cn_image_0000001127125198.gif) -``` +```html
@@ -146,7 +145,7 @@ ![zh-cn_image_0000001173164863](figures/zh-cn_image_0000001173164863.gif) -``` +```html
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md index 85eeaf0f798849d7f018066e8f7344d6339e2d40..a44fed0e5caee70217c41e0f045ff4a1d0074a78 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-svg.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-svg.md @@ -3,7 +3,7 @@ 基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** > - 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > > - svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 @@ -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)。 ## 属性 @@ -34,7 +34,7 @@ ## 示例 -``` +```html