Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 cdb6cf82 编写于 作者: H HelloCrease
浏览文件
操作

geshi 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 8994549b
展开全部 隐藏空白更改
内联 并排
Showing with 3119 addition and 3123 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ cdb6cf82
# button # button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 | | type | string | - | 否 | 不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 | | value | string | - | 否 | button的文本值。 |
| icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 | | icon | string | - | 否 | button的图标路径，图标格式为jpg，png和svg。 |
| placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 | | placement<sup>5+</sup> | string | end | 否 | 仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：<br/>-&nbsp;start：图标位于文本起始处；<br/>-&nbsp;end：图标位于文本结束处；<br/>-&nbsp;top：图标位于文本上方；<br/>-&nbsp;bottom：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 | | waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
## 样式 ## 样式
...@@ -31,38 +31,38 @@ ...@@ -31,38 +31,38 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 | | text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 | | font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 | | font-style | string | normal | 否 | 按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 | | icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 | | icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 | | radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 胶囊按钮（type=capsule）时，不支持border相关样式； > - 胶囊按钮（type=capsule）时，不支持border相关样式；
> >
> - 圆形按钮（type=circle）时，不支持文本相关样式； > - 圆形按钮（type=circle）时，不支持文本相关样式；
> >
> - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 > - 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。
### type设置为arc ### type设置为arc
除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 | | text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 | | font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | | allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 | | font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 弧形按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | &lt;string&gt; | sans-serif | 否 | 按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
...@@ -76,13 +76,13 @@ ...@@ -76,13 +76,13 @@
类型为download时，支持如下方法： 类型为download时，支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ----------- | ------------------------------ | ---------------------------------------- |
| setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;浮在进度条上的文字通过value值进行变更。 | | setProgress | {&nbsp;progress:percent&nbsp;} | 设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。<br/>浮在进度条上的文字通过value值进行变更。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="div-button"> <div class="div-button">
<button class="first" type="capsule" value="Capsule button"></button> <button class="first" type="capsule" value="Capsule button"></button>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.div-button { .div-button {
flex-direction: column; flex-direction: column;
...@@ -137,8 +137,8 @@ ...@@ -137,8 +137,8 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
count: 5, count: 5,
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-divider.md
浏览文件 @ cdb6cf82
# divider # divider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。
...@@ -19,31 +19,31 @@ ...@@ -19,31 +19,31 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ----- | ---- | -------------------- |
| vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 | | vertical | boolean | false | 否 | 使用水平分割线还是垂直分割线，默认水平。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 不支持focusable、disabled属性。 > 不支持focusable、disabled属性。
## 样式 ## 样式
仅支持如下样式： 仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 | | margin | &lt;length&gt; | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 |
| margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 | | margin-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | 否 | 使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。 |
| color | &lt;color&gt; | \#08000000 | 否 | 设置分割线颜色。 | | color | &lt;color&gt; | \#08000000 | 否 | 设置分割线颜色。 |
| stroke-width | &lt;length&gt; | 1 | 否 | 设置分割线宽度。 | | stroke-width | &lt;length&gt; | 1 | 否 | 设置分割线宽度。 |
| display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 | | display | string | flex | 否 | 确定分割线所产生的框的类型。值flex/none，默认值flex。 |
| visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 | | visibility | string | visible | 否 | 是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。 |
| line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：<br/>-&nbsp;butt：分割线两端为平行线；<br/>-&nbsp;round：分割线两端额外添加半圆；<br/>-&nbsp;square：分割线两端额外添加半方形；<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;round和square会额外增加一个线宽的分割线长度。 | | line-cap | string | butt | 否 | 设置分割线条的端点样式，默认为butt，可选值为：<br/>-&nbsp;butt：分割线两端为平行线；<br/>-&nbsp;round：分割线两端额外添加半圆，额外增加一个线宽的分割线长度；<br/>-&nbsp;square：分割线两端额外添加半方形，额外增加一个线宽的分割线长度； |
| flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 | | flex | number | - | 否 | 规定了分割线如何适应父组件中的可用空间，用来设置组件的flex-grow。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| 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;时生效。 | | flex-grow | number | 0 | 否 | 设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数，0为不伸展。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，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;时生效。 | | flex-shrink | number | 1 | 否 | 设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。<br/>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
| flex-basis | &lt;length&gt; | - | 否 | 设置分割线在主轴方向上的初始大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 | | flex-basis | &lt;length&gt; | - | 否 | 设置分割线在主轴方向上的初始大小。<br>仅父容器为&lt;div&gt;、&lt;list-item&gt;、&lt;tabs&gt;时生效。 |
## 事件 ## 事件
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
margin: 20px; margin: 20px;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image-animator.md
浏览文件 @ cdb6cf82
# image-animator # image-animator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片帧动画播放器。 图片帧动画播放器。
...@@ -15,26 +15,26 @@ ...@@ -15,26 +15,26 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------- | -------------------------- | -------- | ---- | ---------------------------------------- |
| images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如images&nbsp;=&nbsp;{{images}}，js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png"},&nbsp;{src:&nbsp;"/common/heart-rate02.png"}]。<br/>>&nbsp;<br/>>&nbsp;js中声明相应变量：images:&nbsp;[{src:&nbsp;"/common/heart-rate01.png",&nbsp;duration:&nbsp;"100"},&nbsp;{src:&nbsp;"/common/heart-rate02.png",&nbsp;duration:&nbsp;"200"}]。支持配置每一帧图片的时长，单位毫秒。<sup>6+</sup> | | images | Array&lt;ImageFrame&gt; | - | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表 ImageFrame说明。<br/>使用时需要使用数据绑定的方式：<br>- hml文件中引用图片资源：`images = {{images}}`，<br>- js文件中声明相应变量：<br>`images: [{src: "/common/heart-rate01.png",duration:"100"}]`。从API Version 6 开始，支持配置每一帧图片的时长，单位毫秒。 |
| predecode<sup>6+</sup> | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | | predecode<sup>6+</sup> | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 |
| iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 | | iteration | number&nbsp;\|&nbsp;string | infinite | 否 | 设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。 |
| reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 | | reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。 |
| fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 | | fixedsize | boolean | true | 否 | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的&nbsp;width&nbsp;、height&nbsp;、top和left属性都要单独设置。 |
| duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 | | duration | string | - | 是 | 设置单次播放时长。单位支持[s(秒)\|ms(毫秒)]，默认单位为ms。&nbsp;duration为0时，不播放图片。&nbsp;值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。 |
| fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 | | fillmode<sup>5+</sup> | string | forwards | 否 | 指定帧动画执行结束后的状态。可选项有：<br/>-&nbsp;none：恢复初始状态。<br/>-&nbsp;forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。 |
**表1** ImageFrame说明 **表1** ImageFrame说明
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------------- | -------------- | ---- | ---- | ---------------------- |
| src | &lt;uri&gt; | - | 是 | 图片路径，图片格式为svg，png和jpg。 | | src | &lt;uri&gt; | - | 是 | 图片路径，图片格式为svg，png和jpg。 |
| width | &lt;length&gt; | 0 | 否 | 图片宽度。 | | width | &lt;length&gt; | 0 | 否 | 图片宽度。 |
| height | &lt;length&gt; | 0 | 否 | 图片高度。 | | height | &lt;length&gt; | 0 | 否 | 图片高度。 |
| top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 | | top | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的纵向坐标。 |
| left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 | | left | &lt;length&gt; | 0 | 否 | 图片相对于组件左上角的横向坐标。 |
| duration<sup>6+</sup> | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 | | duration<sup>6+</sup> | number | - | 否 | 每一帧图片的播放时长，单位毫秒。 |
## 样式 ## 样式
...@@ -46,30 +46,30 @@ ...@@ -46,30 +46,30 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---- | --------- |
| start | - | 帧动画启动时触发。 | | start | - | 帧动画启动时触发。 |
| pause | - | 帧动画暂停时触发。 | | pause | - | 帧动画暂停时触发。 |
| stop | - | 帧动画结束时触发。 | | stop | - | 帧动画结束时触发。 |
| resume | - | 帧动画恢复时触发。 | | resume | - | 帧动画恢复时触发。 |
## 方法 ## 方法
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | ---- | ---------------------------------------- |
| start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 | | start | - | 开始播放图片帧动画。再次调用，重新从第1帧开始播放。 |
| pause | - | 暂停播放图片帧动画。 | | pause | - | 暂停播放图片帧动画。 |
| stop | - | 停止播放图片帧动画。 | | stop | - | 停止播放图片帧动画。 |
| resume | - | 继续播放图片帧。 | | resume | - | 继续播放图片帧。 |
| getState | - | 获取播放状态。可能值有：<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 | | getState | - | 获取播放状态。<br/>-&nbsp;playing：播放中<br/>-&nbsp;paused：已暂停<br/>-&nbsp;stopped：已停止。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /> <image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" />
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
} }
``` ```
``` ```js
//xxx.js //xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ cdb6cf82
# image # image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。 图片组件，用来渲染展示图片。
...@@ -15,55 +15,55 @@ ...@@ -15,55 +15,55 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 | | src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>- 支持Base64字符串<sup>6+</sup>。格式为data:image/[png&nbsp;\|&nbsp;jpeg&nbsp;\|&nbsp;bmp&nbsp;\|&nbsp;webp];base64,&nbsp;[base64&nbsp;data],&nbsp;其中[base64&nbsp;data]为Base64字符串数据。<br/>- 支持dataability://的路径前缀，用于访问通过data&nbsp;ability提供的图片路径<sup>6+</sup>。 |
| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | | alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） | | object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit 类型说明。 |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持svg格式） | | match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 |
| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。 | | fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 |
| object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 | | object-position<sup>7+</sup> | string | 0px&nbsp;0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1.&nbsp;像素，单位px，示例&nbsp;15px&nbsp;15px&nbsp;代表X轴或者Y轴移动的位置<br/>2.&nbsp;字符，可选值：<br/>-&nbsp;left&nbsp;图片显示在组件左侧；<br/>-&nbsp;top&nbsp;图片显示在组件顶部位置；<br/>-&nbsp;right&nbsp;图片显示在组件右侧位置；<br/>-&nbsp;bottom 图片显示在组件底部位置。 |
**表1** object-fit 类型说明 **表1** object-fit 类型说明
| 类型 | 描述 | | 类型 | 描述 |
| -------- | -------- | | ---------- | ------------------------------------ |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | | cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | | contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | | fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 | | none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | | scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 使用svg图片资源时： > 使用svg图片资源时：
> >
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； > - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
> >
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； > - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
> >
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： > - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
> >
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； > 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
> >
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 > 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | | complete(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 | | error(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
## 方法 ## 方法
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;"> <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
justify-content: center; justify-content: center;
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
浏览文件 @ cdb6cf82
# input # input
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
交互式组件，包括单选框，多选框，按钮和单行文本输入框。 交互式组件，包括单选框，多选框，按钮和单行文本输入框。
...@@ -19,29 +19,29 @@ ...@@ -19,29 +19,29 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- |
| type | string | text<br/> | 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。<br/>其中text，email，date，time，number，password这六种类型之间支持动态切换修改。<br/>button，checkbox，radio不支持动态修改。可选值定义如下：<br/>-&nbsp;button：定义可点击的按钮；<br/>-&nbsp;checkbox：定义多选框；<br/>-&nbsp;radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；<br/>-&nbsp;text：定义一个单行的文本字段；<br/>-&nbsp;email：定义用于e-mail地址的字段；<br/>-&nbsp;date：定义&nbsp;date&nbsp;控件（包括年、月、日，不包括时间）；<br/>-&nbsp;time：定义用于输入时间的控件（不带时区）；<br/>-&nbsp;number：定义用于输入数字的字段；<br/>-&nbsp;password：定义密码字段（字段中的字符会被遮蔽）。 | | type | string | text<br/> | 否 | input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。<br/>其中text，email，date，time，number，password这六种类型之间支持动态切换修改。<br/>button，checkbox，radio不支持动态修改。可选值定义如下：<br/>-&nbsp;button：定义可点击的按钮；<br/>-&nbsp;checkbox：定义多选框；<br/>-&nbsp;radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；<br/>-&nbsp;text：定义一个单行的文本字段；<br/>-&nbsp;email：定义用于e-mail地址的字段；<br/>-&nbsp;date：定义&nbsp;date&nbsp;控件（包括年、月、日，不包括时间）；<br/>-&nbsp;time：定义用于输入时间的控件（不带时区）；<br/>-&nbsp;number：定义用于输入数字的字段；<br/>-&nbsp;password：定义密码字段（字段中的字符会被遮蔽）。 |
| checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 | | checked | boolean | false | 否 | 当前组件是否选中，仅type为checkbox和radio生效。 |
| name | string | - | 否 | input组件的名称。 | | name | string | - | 否 | input组件的名称。 |
| value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 | | value | string | - | 否 | input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。 |
| placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 | | placeholder | string | - | 否 | 设置提示文本的内容，仅在type为text\|email\|date\|time\|number\|password时生效。 |
| maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 | | maxlength | number | - | 否 | 输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。 |
| enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>-&nbsp;default：默认<br/>-&nbsp;next：下一项<br/>-&nbsp;go：前往<br/>-&nbsp;done：完成<br/>-&nbsp;send：发送<br/>-&nbsp;search：搜索<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;除“next”外，点击后会自动收起软键盘。 | | enterkeytype | string | default | 否 | 不支持动态修改。<br/>设置软键盘Enter按钮的类型，可选值为：<br/>-&nbsp;default：默认<br/>-&nbsp;next：下一项<br/>-&nbsp;go：前往<br/>-&nbsp;done：完成<br/>-&nbsp;send：发送<br/>-&nbsp;search：搜索<br/>除“next”外，点击后会自动收起软键盘。 |
| headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 | | headericon | string | - | 否 | 在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 | | showcounter<sup>5+</sup> | boolean | false | 否 | 文本输入框是否显示计数下标，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MeunOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | | menuoptions<sup>5+</sup> | Array&lt;MeunOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 | | autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。<br/>应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 | | selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 | | selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | | softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
| showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 | | showpasswordicon<sup>6+</sup> | boolean | true | 否 | 是否显示密码框末尾的图标（仅type为password时生效）。 |
**表1** MenuOption<sup>5+</sup> **表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 | | icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 | | content | string | 菜单选项中的文本内容。 |
...@@ -49,14 +49,14 @@ ...@@ -49,14 +49,14 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 单行输入框或者按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 单行输入框或者按钮的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 单行输入框或者按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 | | placeholder-color | &lt;color&gt; | \#99000000 | 否 | 单行输入框的提示文本的颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 单行输入框或者按钮的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 | | caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件 ## 事件
...@@ -64,35 +64,35 @@ ...@@ -64,35 +64,35 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
- 当input类型为text、email、date、time、number、password时，支持如下事件： - 当input类型为text、email、date、time、number、password时，支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;value:inputValue&nbsp;} | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。 | | change | {<br>&nbsp;value: inputValue<br>&nbsp;} | 输入框输入内容发生变化时触发该事件，返回用户当前输入值。<br/>改变value属性值不会触发该回调。 |
| enterkeyclick | {&nbsp;value:enterKey&nbsp;} | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：<br/>-&nbsp;2：设置enterkeytype属性为go时生效。<br/>-&nbsp;3：设置enterkeytype属性为search时生效。<br/>-&nbsp;4：设置enterkeytype属性为send时生效。<br/>-&nbsp;5：设置enterkeytype属性为next时生效。<br/>-&nbsp;6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 | | enterkeyclick | {<br>&nbsp;value: enterKey<br>&nbsp;} | 软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：<br/>-&nbsp;2：设置enterkeytype属性为go时生效。<br/>-&nbsp;3：设置enterkeytype属性为search时生效。<br/>-&nbsp;4：设置enterkeytype属性为send时生效。<br/>-&nbsp;5：设置enterkeytype属性为next时生效。<br/>-&nbsp;6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | | translate<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | | share<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | search<sup>5+</sup> | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | | optionselect<sup>5+</sup> | {<br>&nbsp;index: optionIndex,<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
| selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 | | selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | 文本选择变化时触发事件。 |
- 当input类型为checkbox、radio时，支持如下事件： - 当input类型为checkbox、radio时，支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 | | change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | checkbox多选框或radio单选框的checked状态发生变化时触发该事件。 |
## 方法 ## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ---------------------------------------- |
| focus | {&nbsp;focus:&nbsp;true\|false&nbsp;}，focus不传默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 | | focus | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}，<br>focus不传值时，默认为true。 | 使组件获得或者失去焦点，type为text\|email\|date\|time\|number\|password时，可弹出或收起输入法。 |
| showError | {&nbsp;error:&nbsp;string&nbsp;} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 | | showError | {<br>&nbsp;error:&nbsp;string&nbsp;<br>} | 展示输入错误提示，type为text\|email\|date\|time\|number\|password时生效。 |
| delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 | | delete<sup>6+</sup> | - | type为text\|email\|date\|time\|number\|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。 |
## 示例 ## 示例
1. type为text 1. type为text
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send" <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content { .content {
width: 60%; width: 60%;
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -146,14 +146,14 @@ ...@@ -146,14 +146,14 @@
![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png) ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png)
2. type为button 2. type为button
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="div-button"> <div class="div-button">
<input class="button" type="button" value="Input-Button"></input> <input class="button" type="button" value="Input-Button"></input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.div-button { .div-button {
flex-direction: column; flex-direction: column;
...@@ -168,14 +168,14 @@ ...@@ -168,14 +168,14 @@
![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png) ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png)
3. type为checkbox 3. type为checkbox
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input onchange="checkboxOnChange" checked="true" type="checkbox"></input> <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content{ .content{
width: 100%; width: 100%;
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png) ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png)
4. type为radio 4. type为radio
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="content"> <div class="content">
<input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input> <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.content{ .content{
width: 100%; width: 100%;
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
浏览文件 @ cdb6cf82
# label # label
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。 为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。
...@@ -19,33 +19,33 @@ ...@@ -19,33 +19,33 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ---- | ---- | ----------- |
| target | string | - | 否 | 目标组件的属性id值。 | | target | string | - | 否 | 目标组件的属性id值。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 | | color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果需要支持动态生效，请参看config描述文件中config-changes标签。 | | allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 | | letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 | | font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 | | text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | | text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt; | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 | | line-height | &lt;length&gt; | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | | text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number | - | 否 | 设置文本的最大行数。 | | max-lines | number | - | 否 | 设置文本的最大行数。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | | font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px | | prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
## 事件 ## 事件
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
## 示例 ## 示例
``` ```html
<!--xxx.hml --> <!--xxx.hml -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</div> </div>
``` ```
``` ```css
/*xxx.css */ /*xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ cdb6cf82
# marquee # marquee
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
跑马灯组件，用于展示一段单行滚动的文字。 跑马灯组件，用于展示一段单行滚动的文字。
...@@ -19,49 +19,49 @@ ...@@ -19,49 +19,49 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------ | ------ | ---- | ---- | ---------------------------------------- |
| scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 | | scrollamount | number | 6 | 否 | 跑马灯每次滚动时移动的最大长度。 |
| loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 | | loop | number | -1 | 否 | 跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。 |
| direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 | | direction | string | left | 否 | 设置跑马灯的文字滚动方向，可选值为left和right。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 | | color | &lt;color&gt; | \#e5000000 | 否 | 设置跑马灯中文字的文本颜色。 |
| font-size | &lt;length&gt; | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 | | font-size | &lt;length&gt; | 37.5 | 否 | 设置跑马灯中文字的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置跑马灯中文字的字体的粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------ | ---- | ---------------------------------------- |
| bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 | | bounce(Rich) | - | 当文本滚动到末尾时触发该事件。 |
| finish(Rich) | - | 当完成滚动次数时触发该事件。需要在&nbsp;loop&nbsp;属性值大于&nbsp;0&nbsp;时触发。 | | finish(Rich) | - | 当完成滚动次数时触发该事件。需要在&nbsp;loop&nbsp;属性值大于&nbsp;0&nbsp;时触发。 |
| start(Rich) | - | 当文本滚动开始时触发该事件。 | | start(Rich) | - | 当文本滚动开始时触发该事件。 |
## 方法 ## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法： 除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ----- | ---- | ----- |
| start | - | 开始滚动。 | | start | - | 开始滚动。 |
| stop | - | 停止滚动。 | | stop | - | 停止滚动。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-menu.md
浏览文件 @ cdb6cf82
# menu # menu
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。 提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。
...@@ -19,52 +19,52 @@ ...@@ -19,52 +19,52 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------ | ------ | ----- | ---- | ---------------------------------------- |
| target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 | | target | string | - | 否 | 目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 |
| type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：<br/>-&nbsp;click：点击弹窗。<br/>-&nbsp;longpress：长按弹窗。 | | type | string | click | 否 | 目标元素触发弹窗的方式，可选值有：<br/>-&nbsp;click：点击弹窗。<br/>-&nbsp;longpress：长按弹窗。 |
| title | string | - | 否 | 菜单标题内容。 | | title | string | - | 否 | 菜单标题内容。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 不支持focusable、disabled属性。 > 不支持focusable、disabled属性。
## 样式 ## 样式
仅支持如下样式： 仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | 否 | 设置菜单的文本颜色。 | | text-color | &lt;color&gt; | - | 否 | 设置菜单的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置菜单的文本尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置菜单的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 设置菜单的字符间距。 | | letter-spacing | &lt;length&gt; | 0 | 否 | 设置菜单的字符间距。 |
| font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 设置菜单的字体样式。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置菜单的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
仅支持如下事件： 仅支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | -------- | ------------------------- | ---------------------------------------- |
| selected | {&nbsp;value:value&nbsp;} | 菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。 | | selected | {&nbsp;value:value&nbsp;} | 菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。 |
| cancel | - | 用户取消。 | | cancel | - | 用户取消。 |
## 方法 ## 方法
仅支持如下方法。 仅支持如下方法。
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ---- | --------------------------------- | ---------------------------------------- |
| show | {&nbsp;x:x,&nbsp;&nbsp;y:y&nbsp;} | 显示menu菜单。(x,&nbsp;y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的&nbsp;X&nbsp;轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的&nbsp;Y&nbsp;轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 | | show | {&nbsp;x:x,&nbsp;&nbsp;y:y&nbsp;} | 显示menu菜单。(x,&nbsp;y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的&nbsp;X&nbsp;轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的&nbsp;Y&nbsp;轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text onclick="onTextClick" class="title-text">Show popup menu.</text> <text onclick="onTextClick" class="title-text">Show popup menu.</text>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-option.md
浏览文件 @ cdb6cf82
# option # option
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
当作为&lt;[select](../arkui-js/js-components-basic-select.md)&gt;的子组件时用来展示下拉选择的具体项目。 当作为&lt;[select](../arkui-js/js-components-basic-select.md)&gt;的子组件时用来展示下拉选择的具体项目。
...@@ -23,25 +23,25 @@ ...@@ -23,25 +23,25 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：↵
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ---- | ---- | ---------------------------------------- |
| selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 | | selected | boolean | - | 否 | 选择项是否为下拉列表的默认项，仅在父组件是select时生效。 |
| value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;option选项的UI展示值需要放在标签内，如&lt;option&nbsp;value="10"&gt;十月&lt;/option&gt; | | value | string | - | 是 | 选择项的值，作为select、menu父组件的selected事件中的返回值。<br/>option选项的UI展示值需要放在标签内，如：<br>`<option value="10">十月</option>` |
| icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 | | icon | string | - | 否 | 图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。 |
## 样式 ## 样式
支持如下样式。 支持如下样式。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 选择项的文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 选择项的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 选择项的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 选择项的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 选择项的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | none | 否 | 选择项的文本修饰，见[text组件text-decoration的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ cdb6cf82
# picker-view # picker-view
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。 嵌入页面的滑动选择器。
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- | | --------------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置文本选择器的取值范围。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 | | range | Array | - | 否 | 设置文本选择器的取值范围。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 | | selected | string | 0 | 否 | 设置文本选择器的默认选择值，该值需要为range的索引。 |
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 | | indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 | | indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | | ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 | | containsecond | boolean | false | 否 | 时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为&nbsp;HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 | | selected | string | 当前时间 | 否 | 设置时间选择器的默认取值，格式为&nbsp;HH:mm；<br/>当包含秒时，格式为HH:mm:ss。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
日期选择器：type=date 日期选择器：type=date
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 | | lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- | | -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 | | columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 | | range | 二维Array | - | 否 | 设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
...@@ -121,7 +121,7 @@ type=multi-text： ...@@ -121,7 +121,7 @@ type=multi-text：
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container" @swipe="handleSwipe"> <div class="container" @swipe="handleSwipe">
<text class="title"> <text class="title">
...@@ -131,7 +131,7 @@ type=multi-text： ...@@ -131,7 +131,7 @@ type=multi-text：
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -153,7 +153,7 @@ type=multi-text： ...@@ -153,7 +153,7 @@ type=multi-text：
} }
``` ```
``` ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ cdb6cf82
# picker # picker
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------ | ---- | ---- | ---------------------------------------- | | -------- | ------ | ---- | ---- | ---------------------------------------- |
| range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：["15",&nbsp;"20",&nbsp;"25"]。 | | range | Array | - | 否 | 设置普通选择器的取值范围，如["15",&nbsp;"20",&nbsp;"25"]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是&nbsp;range&nbsp;的索引值，该取值表示选择器弹窗界面的默认选择值。 | | selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是&nbsp;range&nbsp;的索引值，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置普通选择器的值。 | | value | string | - | 否 | 设置普通选择器的值。 |
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
| selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为&nbsp;YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 | | selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为&nbsp;YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期选择器的值。 | | value | string | - | 是 | 设置日期选择器的值。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | | lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
### 时间选择器 ### 时间选择器
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
| containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | | containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 |
| selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为&nbsp;HH:mm；当包含秒时，格式为HH:mm:ss，<br/>该取值表示选择器弹窗界面的默认选择值。 | | selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为&nbsp;HH:mm；当包含秒时，格式为HH:mm:ss，<br/>该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 否 | 设置时间选择器的值。 | | value | string | - | 否 | 设置时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
### 日期时间选择器 ### 日期时间选择器
...@@ -70,9 +70,9 @@ ...@@ -70,9 +70,9 @@
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。<br/>-&nbsp;月日时分：MM-DD-HH-mm<br/>-&nbsp;年月日时分：YYYY-MM-DD-HH-mm<br/>不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。<br/>-&nbsp;月日时分：MM-DD-HH-mm<br/>-&nbsp;年月日时分：YYYY-MM-DD-HH-mm<br/>不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 |
| value | string | - | 是 | 设置日期时间选择器的值。 | | value | string | - | 是 | 设置日期时间选择器的值。 |
| hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。<sup>5+</sup> | | hours | number | 24<sup>1-4</sup><br/>-<sup>5+</sup> | 否 | 设置日期时间选择器采用的时间格式，可选值：<br/>-&nbsp;12：按照12小时制显示，用上午和下午进行区分；<br/>-&nbsp;24：按照24小时制显示。<br/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。<br/>当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 |
### 多列文本选择器 ### 多列文本选择器
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- | | -------- | ------- | --------- | ---- | ---------------------------------------- |
| columns | number | - | 是 | 设置多列文本选择器的列数。 | | columns | number | - | 是 | 设置多列文本选择器的列数。 |
| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;使用时需要使用数据绑定的方式，如range&nbsp;=&nbsp;{{data}}，js中声明相应变量：data：[["a","b"],&nbsp;["c","d"]]。 | | range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range&nbsp;为二维数组。长度表示多少列，数组的每项表示每列的数据，如&nbsp;&nbsp;[["a","b"],&nbsp;["c","d"]]。<br/>使用时需要使用数据绑定的方式`range ={{data}}`，js中声明相应变量`data：["15","20","25"]`。 |
| selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 |
| value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 | | value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 |
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
| -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | | -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | - | 否 | 选择器的文本颜色。 | | text-color | &lt;color&gt; | - | 否 | 选择器的文本颜色。 |
| font-size | &lt;length&gt; | - | 否 | 选择器的文本尺寸。 | | font-size | &lt;length&gt; | - | 否 | 选择器的文本尺寸。 |
| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| letter-spacing | &lt;length&gt; | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | letter-spacing | &lt;length&gt; | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- | | ------ | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;month值范围为：&nbsp;0（1月）~11（12月）。<sup>5+</sup> | | change | {&nbsp;year:&nbsp;year,&nbsp;month:&nbsp;month,&nbsp;day:&nbsp;day&nbsp;} | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。<br/>从API Version 5开始，month值范围为：&nbsp;0（1月）~11（12月）。 |
| cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | | cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 |
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<select @change="selectChange"> <select @change="selectChange">
...@@ -187,7 +187,7 @@ ...@@ -187,7 +187,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -214,7 +214,7 @@ ...@@ -214,7 +214,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md
浏览文件 @ cdb6cf82
# piece # piece
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。
...@@ -15,28 +15,28 @@ ...@@ -15,28 +15,28 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ----- | ---- | ---------------------------------------- |
| content | string | - | 是 | 操作块文本内容。 | | content | string | - | 是 | 操作块文本内容。 |
| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 | | closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 |
| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 | | icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 |
## 样式 ## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。 支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 文本和图片默认在整个piece组件中居中。 > 文本和图片默认在整个piece组件中居中。
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ----- | ---- | ----------------------------------- |
| close | - | 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。 | | close | - | 当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。 |
## 方法 ## 方法
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml--> <!-- xxx.hml-->
<div class="container" > <div class="container" >
<piece if="{{first}}" content="example"></piece> <piece if="{{first}}" content="example"></piece>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-progress.md
浏览文件 @ cdb6cf82
# progress # progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
进度条，用于显示内容加载或操作处理进度。 进度条，用于显示内容加载或操作处理进度。
...@@ -19,27 +19,27 @@ ...@@ -19,27 +19,27 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---- | ------ | ---------- | ---- | ---------------------------------------- |
| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>-&nbsp;horizontal：线性进度条；<br/>-&nbsp;circular：loading样式进度条；<br/>-&nbsp;ring：圆环形进度条；<br/>-&nbsp;scale-ring：带刻度圆环形进度条<br/>-&nbsp;arc：弧形进度条。<br/>-&nbsp;eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。 | | type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>-&nbsp;horizontal：线性进度条；<br/>-&nbsp;circular：loading样式进度条；<br/>-&nbsp;ring：圆环形进度条；<br/>-&nbsp;scale-ring：带刻度圆环形进度条<br/>-&nbsp;arc：弧形进度条。<br/>-&nbsp;eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。 |
不同类型的进度条还支持不同的属性： 不同类型的进度条还支持不同的属性：
- 类型为horizontal、ring、scale-ring时，支持如下属性： - 类型为horizontal、ring、scale-ring时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ------ | ---- | ---- | ---------------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
| secondarypercent | number | 0 | 否 | 次级进度。取值范围为0-100。 | | secondarypercent | number | 0 | 否 | 次级进度。取值范围为0-100。 |
- 类型为ring、scale-ring时，支持如下属性： - 类型为ring、scale-ring时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------- | ------- | ---- | ---- | -------------- |
| clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 | | clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 |
- 类型为arc、eclipse5+时，支持如下属性： - 类型为arc、eclipse5+时，支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---- | ---------------- |
| percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 |
## 样式 ## 样式
...@@ -48,49 +48,49 @@ ...@@ -48,49 +48,49 @@
type=horizontal type=horizontal
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | -------------- | ---------- | ---- | ----------- |
| color | &lt;color&gt; | \#ff007dff | 否 | 设置进度条的颜色。 | | color | &lt;color&gt; | \#ff007dff | 否 | 设置进度条的颜色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 设置进度条的宽度。 | | stroke-width | &lt;length&gt; | 4px | 否 | 设置进度条的宽度。 |
| background-color | &lt;color&gt; | - | 否 | 设置进度条的背景色。 | | background-color | &lt;color&gt; | - | 否 | 设置进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 设置次级进度条的颜色。 | | secondary-color | &lt;color&gt; | - | 否 | 设置次级进度条的颜色。 |
type=circular type=circular
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------------- | ---- | ---- | ----------------- |
| color | &lt;color&gt; | - | 否 | loading进度条上的圆点颜色。 | | color | &lt;color&gt; | - | 否 | loading进度条上的圆点颜色。 |
type=ring, scale-ring type=ring, scale-ring
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;线性渐变色仅支持两个颜色参数设置格式，如color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)。 | | color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>线性渐变色仅支持两个颜色参数设置格式，如color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)。 |
| background-color | &lt;color&gt; | - | 否 | 环形进度条的背景色。 | | background-color | &lt;color&gt; | - | 否 | 环形进度条的背景色。 |
| secondary-color | &lt;color&gt; | - | 否 | 环形次级进度条的颜色。 | | secondary-color | &lt;color&gt; | - | 否 | 环形次级进度条的颜色。 |
| stroke-width | &lt;length&gt; | 10px | 否 | 环形进度条的宽度。 | | stroke-width | &lt;length&gt; | 10px | 否 | 环形进度条的宽度。 |
| scale-width | &lt;length&gt; | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 | | scale-width | &lt;length&gt; | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 |
| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 | | scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 |
type=arc type=arc
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | -------------- | ------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | - | 否 | 弧形进度条的颜色。 | | color | &lt;color&gt; | - | 否 | 弧形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 | | background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
| stroke-width | &lt;length&gt; | 4px | 否 | 弧形进度条的宽度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。 | | stroke-width | &lt;length&gt; | 4px | 否 | 弧形进度条的宽度，始终在半径区域内。<br/>进度条宽度越大，进度条越靠近圆心。 |
| start-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。 | | start-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。 |
| total-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | | total-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
| center-x | &lt;length&gt; | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。 | | center-x | &lt;length&gt; | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-y和radius一起使用。 |
| center-y | &lt;length&gt; | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。 | | center-y | &lt;length&gt; | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-x和radius一起使用。 |
| radius | &lt;length&gt; | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起使用。 | | radius | &lt;length&gt; | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起使用。 |
type=eclipse<sup>5+</sup> type=eclipse<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ------------- | ---- | ---- | ---------- |
| color | &lt;color&gt; | - | 否 | 圆形进度条的颜色。 | | color | &lt;color&gt; | - | 否 | 圆形进度条的颜色。 |
| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 | | background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
## 事件 ## 事件
...@@ -104,7 +104,7 @@ type=eclipse<sup>5+</sup> ...@@ -104,7 +104,7 @@ type=eclipse<sup>5+</sup>
## 示例 ## 示例
``` ```html
<!--xxx.hml --> <!--xxx.hml -->
<div class="container"> <div class="container">
<progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress> <progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress>
...@@ -114,7 +114,7 @@ type=eclipse<sup>5+</sup> ...@@ -114,7 +114,7 @@ type=eclipse<sup>5+</sup>
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
浏览文件 @ cdb6cf82
# qrcode # qrcode
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
生成并显示二维码。 生成并显示二维码。
...@@ -19,26 +19,26 @@ ...@@ -19,26 +19,26 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | 是 | 用来生成二维码的内容。 | | value | string | - | 是 | 用来生成二维码的内容。 |
| type | string | rect | 否 | 二维码类型。可能选项有：<br/>-&nbsp;rect：矩形二维码。<br/>-&nbsp;circle：圆形二维码。 | | type | string | rect | 否 | 二维码类型。可能选项有：<br/>-&nbsp;rect：矩形二维码。<br/>-&nbsp;circle：圆形二维码。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------- | ------------- | -------- | ---- | -------- |
| color | &lt;color&gt; | \#000000 | 否 | 二维码颜色。 | | color | &lt;color&gt; | \#000000 | 否 | 二维码颜色。 |
| background-color | &lt;color&gt; | \#ffffff | 否 | 二维码背景颜色。 | | background-color | &lt;color&gt; | \#ffffff | 否 | 二维码背景颜色。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 > - width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
> >
> >
> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 > - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。
> >
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<qrcode value="{{qr_value}}" type="{{qr_type}}" <qrcode value="{{qr_value}}" type="{{qr_type}}"
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
width: 100%; width: 100%;
...@@ -90,7 +90,7 @@ select{ ...@@ -90,7 +90,7 @@ select{
} }
``` ```
``` ```js
/* index.js */ /* index.js */
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-rating.md
浏览文件 @ cdb6cf82
# rating # rating
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
评分条，表示用户使用感受的衡量标准条。 评分条，表示用户使用感受的衡量标准条。
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
| height | &lt;length&gt;\|&lt;percentage&gt; | 24px<br/>12px（不可操作） | 否 | 默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。 | | height | &lt;length&gt;\|&lt;percentage&gt; | 24px<br/>12px（不可操作） | 否 | 默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。 |
| rtl-flip | boolean | true | 否 | 在RTL文字方向下是否自动翻转图源。 | | rtl-flip | boolean | true | 否 | 在RTL文字方向下是否自动翻转图源。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。 > star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<rating numstars="5" rating="5" @change="changeRating" id="rating"> <rating numstars="5" rating="5" @change="changeRating" id="rating">
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -81,7 +81,7 @@ rating { ...@@ -81,7 +81,7 @@ rating {
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-richtext.md
浏览文件 @ cdb6cf82
# richtext # richtext
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
| start | - | 开始加载时触发。 | | start | - | 开始加载时触发。 |
| complete | - | 加载完成时触发。 | | complete | - | 加载完成时触发。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 不支持focus、blur、key事件。 > - 不支持focus、blur、key事件。
> >
> - 不支持无障碍事件。 > - 不支持无障碍事件。
...@@ -52,14 +52,14 @@ ...@@ -52,14 +52,14 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="flex-direction: column;width: 100%;"> <div style="flex-direction: column;width: 100%;">
<richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext> <richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext>
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ cdb6cf82
# search # search
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。 提供搜索框组件，用于提供用户搜索内容的输入区域。
...@@ -15,19 +15,19 @@ ...@@ -15,19 +15,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 | | icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 | | hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 | | value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 | | searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
**表1** MenuOption<sup>5+</sup> **表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 | | icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 | | content | string | 菜单选项中的文本内容。 |
...@@ -35,28 +35,28 @@ ...@@ -35,28 +35,28 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 | | placeholder-color | &lt;color&gt; | \#99000000<br/> | 否 | 搜索框的提示文本颜色。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 搜索框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 | | caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。 | | change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>改变value属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 | | submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | | translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | | share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | | optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<search hint="请输入搜索内容" searchbutton="搜索" @search="search"> <search hint="请输入搜索内容" searchbutton="搜索" @search="search">
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-select.md
浏览文件 @ cdb6cf82
# select # select
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉选择按钮，可让用户在多个选项之间选择。 下拉选择按钮，可让用户在多个选项之间选择。
...@@ -24,22 +24,22 @@ ...@@ -24,22 +24,22 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ------ | ---------- | ---- | ---------------------------------------- |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------------- | ---------------------------------------- |
| change | {newValue:&nbsp;newValue} | 下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。 | | change | {newValue:&nbsp;newValue} | 下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - select组件不支持click事件。 > select组件不支持click事件。
## 方法 ## 方法
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<select @change="changeFruit"> <select @change="changeFruit">
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ cdb6cf82
# slider # slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。 滑动条组件，用来快速调节设置值，如音量、亮度等。
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <text>slider start value is {{startValue}}</text>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ cdb6cf82
# span # span
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
作为&lt;[text](../arkui-js/js-components-basic-text.md)&gt;子组件提供文本修饰能力。 作为&lt;[text](../arkui-js/js-components-basic-text.md)&gt;子组件提供文本修饰能力。
...@@ -19,23 +19,23 @@ ...@@ -19,23 +19,23 @@
支持[通用属性](../arkui-js/js-components-common-attributes.md)。 支持[通用属性](../arkui-js/js-components-common-attributes.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 不支持focusable和disabled属性。 > 不支持focusable和disabled属性。
## 样式 ## 样式
仅支持如下样式： 仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | - | 否 | 设置文本段落的文本颜色。 | | color | &lt;color&gt; | - | 否 | 设置文本段落的文本颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本段落的文本尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本段落的文本尺寸。 |
| allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
浏览文件 @ cdb6cf82
# switch # switch
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。 开关选择器，通过开关，开启或关闭某个功能。
...@@ -19,12 +19,12 @@ ...@@ -19,12 +19,12 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | ------- | ----- | ---- | ---------- |
| checked | boolean | false | 否 | 是否选中。 | | checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 | | showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 | | texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 | | textoff | string | "Off" | 否 | 未选中时显示的文本。 |
## 样式 ## 样式
...@@ -33,24 +33,24 @@ ...@@ -33,24 +33,24 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 | | texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 | | textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 |
| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 | | text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
| font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 | | font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
| allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale(Rich) | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style(Rich) | string | normal | 否 | 字体样式，仅设置texton和textoff生效。见[text组件font-style的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-weight(Rich) | number&nbsp;\|&nbsp;string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight(Rich) | number&nbsp;\|&nbsp;string | normal | 否 | 字体粗细，仅设置texton和textoff生效。见[text组件的font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 | | font-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ---------------------------------------- | ------------- |
| change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 | | change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 |
## 方法 ## 方法
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<switch showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange"> <switch showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -81,7 +81,7 @@ switch{ ...@@ -81,7 +81,7 @@ switch{
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ cdb6cf82
# text # text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> >
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> >
> - 文本的展示内容需要写在元素标签内。 > - 文本的展示内容需要写在元素标签内。
文本，用于呈现一段信息。 文本，用于呈现一段信息。
...@@ -27,43 +27,43 @@ ...@@ -27,43 +27,43 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 | | color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 | | font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果需要支持动态生效，请参看config描述文件中config-changes标签。 | | allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 | | letter-spacing | &lt;length&gt; | 0px | 否 | 设置文本的字符间距。 |
| word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 | | word-spacing<sup>7+</sup> | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;&nbsp;\|&nbsp;string | normal | 否 | 设置文本之间的间距，string可选值为：<br/>normal：默认的字间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 | | font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，默认为400，取值越大，字体越粗。number取值必须为100的整数倍。<br/>string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 | | text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：<br/>-&nbsp;underline：文字下划线修饰；<br/>-&nbsp;line-through：穿过文本的修饰线n<br/>-&nbsp;none：标准文本。 |
| text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 | | text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | 否 | 设置文本修饰线的颜色。 |
| text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 | | text-align | string | start<br/> | 否 | 设置文本的文本对齐方式，可选值为：<br/>-&nbsp;left：文本左对齐；<br/>-&nbsp;center：文本居中对齐；<br/>-&nbsp;right：文本右对齐；<br/>-&nbsp;start：根据文字书写相同的方向对齐；<br/>-&nbsp;end：根据文字书写相反的方向对齐。<br/>如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 | | line-height | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt;<sup>7+</sup>&nbsp;\|&nbsp;string<sup>7+</sup> | 0px<sup>1-6</sup><br/>normal<sup>7+</sup> | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：<br/>normal<sup>7+</sup>：默认的行高。 |
| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 | | text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：<br/>-&nbsp;clip：将文本根据父容器大小进行裁剪显示；<br/>-&nbsp;ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
| font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 | | max-lines | number&nbsp;\|&nbsp;string<sup>7+</sup> | - | 否 | 设置文本的最大行数，string类型可选值为：<br/>-&nbsp;auto<sup>7+</sup>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 | | max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 | | font-size-step | &lt;length&gt; | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
| prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px | | prefer-font-sizes | &lt;array&gt; | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。<br/>如：prefer-font-sizes:&nbsp;12px,14px,16px |
| word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 | | word-break<sup>6+</sup> | string | normal | 否 | 设置文本折行模式，可选值为：<br/>-&nbsp;normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。<br/>-&nbsp;break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。<br/>-&nbsp;break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
| text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 | | text-indent<sup>7+</sup> | &lt;length&gt; | - | 否 | 设置首行缩进量。 |
| white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 | | white-space<sup>7+</sup> | string | pre | 否 | 设置处理元素中空白的模式，可选值为：<br/>-&nbsp;normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；<br/>-&nbsp;nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；<br/>-&nbsp;pre：所有东西原样输出；<br/>-&nbsp;pre-wrap：所有东西原样输出，文本换行；<br/>-&nbsp;pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。 |
| adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置字体大小自适应相关样式后生效。 | | adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>设置字体大小自适应相关样式后生效。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 > - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
> >
> - 文本换行：文本可以通过转义字符\r\n进行换行。 > - 文本换行：文本可以通过转义字符\r\n进行换行。
> >
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。 > - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
> >
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 > - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
> >
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 > - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
> >
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容) > - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
## 事件 ## 事件
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png) ![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text1"> <text class="text1">
...@@ -131,7 +131,7 @@ export default { ...@@ -131,7 +131,7 @@ export default {
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-textarea.md
浏览文件 @ cdb6cf82
# textarea # textarea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
多行文本输入的文本框。 多行文本输入的文本框。
...@@ -20,25 +20,25 @@ ...@@ -20,25 +20,25 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | -------------------------------- | ----------------------- | ----- | ---- | ---------------------------------------- |
| placeholder | string | - | 否 | 多行文本框的提示文本内容。 | | placeholder | string | - | 否 | 多行文本框的提示文本内容。 |
| maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 | | maxlength | number | - | 否 | 多行文本框可输入的最多字符数量。 |
| headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 | | headericon | string | - | 否 | 在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。 |
| extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 | | extend | boolean | false | 否 | 文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。 |
| value<sup>5+</sup> | string | - | 否 | 多行文本框的内容。 | | value<sup>5+</sup> | string | - | 否 | 多行文本框的内容。 |
| showcounter<sup>5+</sup> | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 | | showcounter<sup>5+</sup> | boolean | false | 否 | 文本框是否需要开启计数下标功能，需要配合maxlength一起使用。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。 | | autofocus<sup>6+</sup> | boolean | false | 否 | 是否自动获焦。 |
| selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 | | selectedstart<sup>6+</sup> | number | -1 | 否 | 开始选择文本时初始选择位置。 |
| selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 | | selectedend<sup>6+</sup> | number | -1 | 否 | 开始选择文本时结尾选择位置。 |
| softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 | | softkeyboardenabled<sup>6+</sup> | boolean | true | 否 | 编辑时是否弹出系统软键盘。 |
**表1** MenuOption<sup>5+</sup> **表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| -------- | -------- | -------- | | ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 | | icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 | | content | string | 菜单选项中的文本内容。 |
...@@ -46,29 +46,29 @@ ...@@ -46,29 +46,29 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 多行文本框的文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 多行文本框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 多行文本框的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 多行文本框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| placeholder-color | &lt;color&gt; | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 | | placeholder-color | &lt;color&gt; | \#99000000 | 否 | 多行文本框的提示文本颜色，type为text\|email\|date\|time\|number\|password时生效。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 多行文本框的字体粗细，见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 | | caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:&nbsp;newText,&nbsp;lines:&nbsp;textLines,&nbsp;height:&nbsp;textHeight&nbsp;} | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;改变value属性值不会触发该回调。<sup>5+</sup> | | change | {&nbsp;text:&nbsp;newText,&nbsp;lines:&nbsp;textLines,&nbsp;height:&nbsp;textHeight&nbsp;} | 输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。<br/>从API Version 5开始，改变value属性值不会触发该回调。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 | | translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 | | share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
| search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 | | search<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 | | optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
| selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 | | selectchange<sup>6+</sup> | {&nbsp;start:&nbsp;number，end:&nbsp;number&nbsp;} | 文本选择变化时触发事件。 |
## 方法 ## 方法
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<textarea id="textarea" class="textarea" extend="true" maxlength="20" <textarea id="textarea" class="textarea" extend="true" maxlength="20"
headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text" headericon="/common/navigation_menu1_icon.svg" placeholder="Please input text"
...@@ -86,14 +86,14 @@ ...@@ -86,14 +86,14 @@
</textarea> </textarea>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.textarea { .textarea {
placeholder-color: gray; placeholder-color: gray;
} }
``` ```
``` ```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md
浏览文件 @ cdb6cf82
# toggle # toggle
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。
...@@ -20,32 +20,32 @@ ...@@ -20,32 +20,32 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | ------- | ----- | ---- | ---------- |
| value | string | - | 是 | 状态按钮的文本值。 | | value | string | - | 是 | 状态按钮的文本值。 |
| checked | boolean | false | 否 | 状态按钮是否被选中。 | | checked | boolean | false | 否 | 状态按钮是否被选中。 |
## 样式 ## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#E5000000 | 否 | 状态按钮的文本颜色。 | | text-color | &lt;color&gt; | \#E5000000 | 否 | 状态按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 状态按钮的文本尺寸。 | | font-size | &lt;length&gt; | 16px | 否 | 状态按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | allow-scale | boolean | true | 否 | 状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 状态按钮的字体样式。 | | font-style | string | normal | 否 | 状态按钮的字体样式。 |
| font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-weight | number&nbsp;\|&nbsp;string | normal | 否 | 状态按钮的字体粗细。见[text组件font-weight的样式属性](../arkui-js/js-components-basic-text.md#样式)。 |
| font-family | &lt;string&gt; | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | &lt;string&gt; | sans-serif | 否 | 状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
## 事件 ## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 | | 名称 | 参数 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------------------- | -------------- |
| change | {&nbsp;checked：isChecked&nbsp;} | 组件选中状态发生变化时触发。 | | change | {&nbsp;checked：isChecked&nbsp;} | 组件选中状态发生变化时触发。 |
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="flex-direction: column;"> <div style="flex-direction: column;">
<text class="margin">1. Multiple choice example</text> <text class="margin">1. Multiple choice example</text>
...@@ -71,14 +71,14 @@ ...@@ -71,14 +71,14 @@
</div> </div>
``` ```
``` ```css
/* xxx.css */ /* xxx.css */
.margin { .margin {
margin: 7px; margin: 7px;
} }
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
浏览文件 @ cdb6cf82
# toolbar-item # toolbar-item
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。
...@@ -15,34 +15,34 @@ ...@@ -15,34 +15,34 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ----- | ------ | ---- | ---- | ---------------------------------------- |
| value | string | - | 是 | 该操作项文本内容。 | | value | string | - | 是 | 该操作项文本内容。 |
| icon | string | - | 是 | 该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。 | | icon | string | - | 是 | 该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。 |
## 样式 ## 样式
仅支持如下样式： 仅支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 文本颜色。 | | color | &lt;color&gt; | \#e6000000 | 否 | 文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 文本大小。 | | font-size | &lt;length&gt; | 16px | 否 | 文本大小。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 | | allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 文本字体样式，可选值为：<br/>1.&nbsp;normal:&nbsp;标准的字体样式；<br/>2.&nbsp;italic:&nbsp;斜体的字体样式。 | | font-style | string | normal | 否 | 文本字体样式，可选值为：<br/> -&nbsp;normal:&nbsp;标准的字体样式；<br/>- &nbsp;italic:&nbsp;斜体的字体样式。 |
| font-weight | number\|string | normal | 否 | 文本字体粗细，number类型取值[100,&nbsp;900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。 | | font-weight | number\|string | normal | 否 | 文本字体粗细，number类型取值[100,&nbsp;900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。 |
| text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>1.&nbsp;underline:&nbsp;文本下划线修饰；<br/>2.&nbsp;line-through:&nbsp;穿过文本的修饰线；<br/>3.&nbsp;none:&nbsp;标准文本。 | | text-decoration | string | none | 否 | 文本修饰，可选值为：<br/>- underline:&nbsp;文本下划线修饰；<br/>- &nbsp;line-through:&nbsp;穿过文本的修饰线；<br/>- &nbsp;none:&nbsp;标准文本。 |
| font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 | | font-family | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 | | background | &lt;linear-gradient&gt; | - | 否 | 仅支持设置[渐变样式](../arkui-js/js-components-common-gradient.md)，与background-color、background-image不兼容。 |
| background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 | | background-color | &lt;color&gt; | - | 否 | 设置背景颜色。 |
| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。 | | background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。 |
| background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length值参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>&nbsp;&nbsp;以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 | | background-size | -&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | auto | 否 | 设置背景图片的大小。<br/>-&nbsp;string可选值：<br/>&nbsp;&nbsp;-&nbsp;contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/>&nbsp;&nbsp;-&nbsp;cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/>&nbsp;&nbsp;-&nbsp;auto：保持原图的比例不变。<br/>-&nbsp;length参数方式：<br/>&nbsp;&nbsp;设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。<br/>-&nbsp;百分比参数方式：<br/>以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为&nbsp;"auto"。 |
| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 | | background-repeat | string | repeat | 否 | 针对重复背景图篇的样式进行设置，背景图篇默认在水平和垂直方向上重复。<br/>-&nbsp;repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>-&nbsp;repeat-x：只在水平轴上重复绘制图片。<br/>-&nbsp;repeat-y：只在竖直轴上重复绘制图片。<br/>-&nbsp;no-repeat：不会重复绘制图片。 |
| background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | -&nbsp;关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 | | background-position | -&nbsp;string&nbsp;string<br/>-&nbsp;&lt;length&gt;&nbsp;&lt;length&gt;<br/>-&nbsp;&lt;percentage&gt;&nbsp;&lt;percentage&gt; | 0px&nbsp;0px | 否 | 设置背景图片位置。<br>- 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/>&nbsp;&nbsp;-&nbsp;left：水平方向上最左侧。<br/>&nbsp;&nbsp;-&nbsp;right：水平方向上最右侧。<br/>&nbsp;&nbsp;-&nbsp;top：竖直方向上最顶部。<br/>&nbsp;&nbsp;-&nbsp;bottom：竖直方向上最底部。<br/>&nbsp;&nbsp;-&nbsp;center：水平方向或竖直方向上中间位置。<br/>-&nbsp;length值参数方式：第一个值是水平位置，第二个值是垂直位置。&nbsp;左上角是&nbsp;0&nbsp;0。单位是像素&nbsp;(0px&nbsp;0px)&nbsp;&nbsp;。如果仅规定了一个值，另外一个值将是50%。<br/>-&nbsp;百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是&nbsp;0%&nbsp;0%。右下角是&nbsp;100%&nbsp;100%。如果仅规定了一个值，另外一个值为50%。<br/>-&nbsp;可以混合使用&lt;percentage&gt;和&lt;length&gt;。 |
| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | | 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：不渲染此元素。 |
| 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生效。 | | visibility | string | visible | 否 | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：<br/>-&nbsp;visible：元素正常显示。<br/>-&nbsp;hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。<br/>visibility和display样式都设置时，仅display生效。 |
## 事件 ## 事件
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<toolbar style="position: fixed; bottom: 0px; "> <toolbar style="position: fixed; bottom: 0px; ">
<toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item> <toolbar-item icon='common/Icon/location.png' value='Option 1' > </toolbar-item>
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar.md
浏览文件 @ cdb6cf82
# toolbar # toolbar
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
工具栏。放在界面底部，用于展示针对当前界面的操作选项。 工具栏。放在界面底部，用于展示针对当前界面的操作选项。
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
支持&lt;toolbar-item&gt;子组件。 支持&lt;toolbar-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 工具栏最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item子组件，则保留前面4个子组件，后续的子组件收纳到工具栏上的更多项中，通过点击更多项弹窗展示剩下的子组件，更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。 > 工具栏最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item子组件，则保留前面4个子组件，后续的子组件收纳到工具栏上的更多项中，通过点击更多项弹窗展示剩下的子组件，更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
支持[通用样式](../arkui-js/js-components-common-styles.md)。 支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 不支持height样式，高度固定为56px。 > 不支持height样式，高度固定为56px。
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-web.md
浏览文件 @ cdb6cf82
...@@ -38,7 +38,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。 ...@@ -38,7 +38,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
| reload | - | 重新加载页面。 | | reload | - | 重新加载页面。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column;"> <div style="height: 500px; width: 500px; flex-direction: column;">
<button onclick="reloadWeb">click to reload</button> <button onclick="reloadWeb">click to reload</button>
...@@ -46,7 +46,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。 ...@@ -46,7 +46,7 @@ web组件不跟随转场动画。一个页面仅支持一个web组件。
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
reloadWeb() { reloadWeb() {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md
浏览文件 @ cdb6cf82
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 参数类型 | 必填 | 描述 | | 名称 | 参数类型 | 必填 | 描述 |
| ----------- | -------- | ---- | ------------------------------------------------------------ | | ----------- | ------ | ---- | ---------------------------------------- |
| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | | id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 |
| type | string | 是 | 用于指定xcomponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。<br/> | | type | string | 是 | 用于指定xcomponent组件类型，可选值为：<br/>- surface：组件内容单独送显，直接合成到屏幕。<br/>- component：组件内容与其他组件合成后统一送显。<br/> |
| libraryname | string | 否 | 应用Native层编译输出动态库名称。 | | libraryname | string | 否 | 应用Native层编译输出动态库名称。 |
## 样式 ## 样式
...@@ -31,26 +31,26 @@ ...@@ -31,26 +31,26 @@
除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
| 名称 | 功能描述 | | 名称 | 功能描述 |
| ------------------------------- | ------------------------------- | | -------------------------------- | ---------------------------------------- |
| onLoad(context?: object) => void | 插件加载完成时回调事件。<br/>context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 | | onLoad(context?: object) => void | 插件加载完成时回调事件。<br/>context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 |
| onDestroy() => void | 插件卸载完成时回调事件。 | | onDestroy() => void | 插件卸载完成时回调事件。 |
## 方法 ## 方法
除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 返回值类型 | 描述 | | 名称 | 参数 | 返回值类型 | 描述 |
| ------------------------ | ------------------------------------------------------------ | ---------- | ------------------------------------------------------------ | | ------------------------ | ---------------------------------------- | ------ | ---------------------------------------- |
| getXComponentSurfaceId | - | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 | | getXComponentSurfaceId | - | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 |
| setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number <br/>} | - | 设置xcomponent持有Surface的宽度和高度。 | | setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number <br/>} | - | 设置xcomponent持有Surface的宽度和高度。 |
| getXComponentContext | - | object | 获取开发者扩展的xcomponent方法的实例对象。 | | getXComponentContext | - | object | 获取开发者扩展的xcomponent方法的实例对象。 |
## 示例 ## 示例
提供surface类型xcomponent，支持相机预览等能力。 提供surface类型xcomponent，支持相机预览等能力。
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;"> <div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
<text id = 'camera' class = 'title'>camera_display</text> <text id = 'camera' class = 'title'>camera_display</text>
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera';
export default { export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
浏览文件 @ cdb6cf82
# canvas组件 # canvas组件
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供画布组件。用于自定义绘制图形。 提供画布组件。用于自定义绘制图形。
...@@ -41,22 +41,22 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext ...@@ -41,22 +41,22 @@ getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
获取canvas绘图上下文。不支持在onInit和onReady中进行调用。 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | -------------------- | ------------------ | ---- | ---------------------------------------- |
| type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 | | type | string | 是 | 设置为'2d'，返回值为2D绘制对象，该对象可用于在画布组件上绘制矩形、文本、图片等。 |
| options<sup>6+</sup> | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 | | options<sup>6+</sup> | ContextAttrOptions | 否 | 当前仅支持配置是否开启抗锯齿功能，默认为关闭。 |
**表1** ContextAttrOptions **表1** ContextAttrOptions
| 参数名 | 类型 | 说明 |
| -------- | -------- | -------- |
| antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
- 返回值 | 参数名 | 类型 | 说明 |
| 类型 | 说明 | | --------- | ------- | ------------------- |
| -------- | -------- | | antialias | boolean | 是否开启抗锯齿功能，默认为false。 |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | -------------------- |
| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 用于在画布组件上绘制矩形、文本、图片等。 |
### toDataURL<sup>6+</sup> ### toDataURL<sup>6+</sup>
...@@ -64,20 +64,20 @@ toDataURL(type?: string, quality?: number): string ...@@ -64,20 +64,20 @@ toDataURL(type?: string, quality?: number): string
生成一个包含图片展示的URL。 生成一个包含图片展示的URL。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | | type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
- 返回值 **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | --------- |
| string | 图像的URL地址。 | | string | 图像的URL地址。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
...@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string ...@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
浏览文件 @ cdb6cf82
# CanvasGradient对象 # CanvasGradient对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
渐变对象。 渐变对象。
...@@ -12,32 +12,32 @@ addColorStop(offset: number, color: string): void ...@@ -12,32 +12,32 @@ addColorStop(offset: number, color: string): void
设置渐变断点值，包括偏移和颜色。 设置渐变断点值，包括偏移和颜色。
- 参数 **参数：**
| 参数 | 类型 | 描述 | | 参数 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | ---------------------------- |
| offset | number | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | | offset | number | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
| color | string | 设置渐变的颜色。 | | color | string | 设置渐变的颜色。 |
- 示例 **示例：**
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"</canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" /> <input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div> </div>
``` ```
``` ```js
// xxx.js // xxx.js
export default { export default {
handleClick() { handleClick() {
const el =this.$refs.canvas; const el =this.$refs.canvas;
const ctx =el.getContext('2d'); const ctx =el.getContext('2d');
const gradient = ctx.createLinearGradient(0,0,100,0); const gradient = ctx.createLinearGradient(0,0,100,0);
gradient.addColorStop(0,'#00ffff'); gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00'); gradient.addColorStop(1,'#ffff00');
}
} }
}
``` ```
![zh-cn_image_0000001152610806](figures/zh-cn_image_0000001152610806.png) ![zh-cn_image_0000001152610806](figures/zh-cn_image_0000001152610806.png)
zh-cn/application-dev/reference/arkui-js/js-components-canvas-image.md
浏览文件 @ cdb6cf82
# Image对象 # Image对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片对象。 图片对象。
## 属性 ## 属性
| 属性 | 类型 | 默认值 | 必填 | 描述 | | 属性 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------- | -------------- | ---- | ---- | ----------------- |
| src | string | - | 是 | 图片资源的路径。 | | src | string | - | 是 | 图片资源的路径。 |
| width | &lt;length&gt; | 0px | 否 | 图片的宽度。 | | width | &lt;length&gt; | 0px | 否 | 图片的宽度。 |
| height | &lt;length&gt; | 0px | 否 | 图片的高度。 | | height | &lt;length&gt; | 0px | 否 | 图片的高度。 |
| onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 | | onload | Function | - | 否 | 图片加载成功后触发该事件，无参数。 |
| onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 | | onerror | Function | - | 否 | 图片加载失败后触发该事件，无参数。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 500px; height: 500px; "></canvas> <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
</div> </div>
``` ```
``` ```js
//xxx.js // xxx.js
export default { export default {
onShow(){ onShow(){
const el =this.$refs.canvas; const el =this.$refs.canvas;
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md
浏览文件 @ cdb6cf82
# ImageBitmap对象 # ImageBitmap对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-imagedata.md
浏览文件 @ cdb6cf82
# ImageData对象 # ImageData对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
ImageData对象可以存储canvas渲染的像素数据。 ImageData对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------------------------- | ---------------------------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | 矩形区域实际像素高度。 |
| data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | | data | &lt;Uint8ClampedArray&gt; | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
``` ```js
//xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
onShow() { onShow() {
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md
浏览文件 @ cdb6cf82
# OffscreenCanvas对象 # OffscreenCanvas对象
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
可以离屏渲染的canvas对象。 可以离屏渲染的canvas对象。
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | ------ | ------ | --------------------------- |
| width | number | offscreen&nbsp;canvas对象的宽度。 | | width | number | offscreen&nbsp;canvas对象的宽度。 |
| height | number | offscreen&nbsp;canvas对象的高度。 | | height | number | offscreen&nbsp;canvas对象的高度。 |
...@@ -24,16 +24,16 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC ...@@ -24,16 +24,16 @@ getContext(type: string, options?: CanvasRenderingContext2DSettings): OffscreenC
获取offscreen canvas绘图上下文，返回值为2D绘制对象。 获取offscreen canvas绘图上下文，返回值为2D绘制对象。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | --------- | ---------------------------------------- | ---- | ---------------------- |
| contextId | string | 是 | 仅支持&nbsp;'2d'。 | | contextId | string | 是 | 仅支持&nbsp;'2d'。 |
| options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 | | options | [CanvasRenderingContext2DSettings](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 否 | 用于在离屏画布上进行绘制矩形、文本、图片等。 |
- 返回值 **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ---------------------------------------- | --------------------------- |
| [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 | | [OffscreenCanvasRenderingContext2D](../arkui-js/js-offscreencanvasrenderingcontext2d.md) | 2D绘制对象，用于在画布组件上绘制矩形、文本、图片等。 |
### toDataURL ### toDataURL
...@@ -42,16 +42,16 @@ toDataURL(type?: string, quality?:number): ...@@ -42,16 +42,16 @@ toDataURL(type?: string, quality?:number):
生成一个包含图片展示的URL。 生成一个包含图片展示的URL。
- 参数 **参数：**
| 参数名 | 参数类型 | 必填 | 描述 | | 参数名 | 参数类型 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | | ------- | ------ | ---- | ---------------------------------------- |
| type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 | | type | string | 否 | 可选参数，用于指定图像格式，默认格式为image/png。 |
| quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 | | quality | number | 否 | 在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。 |
- 返回值 **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ------ | --------- |
| string | 图像的URL地址。 | | string | 图像的URL地址。 |
### transferToImageBitmap ### transferToImageBitmap
...@@ -60,22 +60,22 @@ transferToImageBitmap(): ImageBitmap ...@@ -60,22 +60,22 @@ transferToImageBitmap(): ImageBitmap
在离屏画布最近渲染的图像上创建一个ImageBitmap对象。 在离屏画布最近渲染的图像上创建一个ImageBitmap对象。
- 返回值 **返回值：**
| 类型 | 说明 | | 类型 | 说明 |
| -------- | -------- | | ---------------------------------------- | --------------- |
| [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 | | [ImageBitmap](../arkui-js/js-components-canvas-imagebitmap.md) | 存储离屏画布上渲染的像素数据。 |
## 示例 ## 示例
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div> <div>
<canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <canvas ref="canvasId" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div> </div>
``` ```
``` ```js
//xxx.js //xxx.js
export default { export default {
onShow() { onShow() {
...@@ -93,3 +93,4 @@ export default { ...@@ -93,3 +93,4 @@ export default {
} }
} }
``` ```
zh-cn/application-dev/reference/arkui-js/js-components-common-atomic-layout.md
浏览文件 @ cdb6cf82
# 原子布局 # 原子布局
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。
......
zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md
浏览文件 @ cdb6cf82
# 通用属性 # 通用属性
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 常规属性 ## 常规属性
常规属性是指组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 常规属性是指组件普遍支持的用来设置组件基本标识和外观显示特征的属性。
| 名称 | 类型 | 默认值 | 必填 | 描述 | | 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- | | ------------------------- | ------- | ----- | ---- | ---------------------------------------- |
| id | string | - | 否 | 组件的唯一标识。 | | id | string | - | 否 | 组件的唯一标识。 |
| style | string | - | 否 | 组件的样式声明。 | | style | string | - | 否 | 组件的样式声明。 |
| class | string | - | 否 | 组件的样式类，用于引用样式表。 | | class | string | - | 否 | 组件的样式类，用于引用样式表。 |
| ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 | | ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs&nbsp;属性对象上。 |
| disabled | boolean | false | 否 | 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。 | | disabled | boolean | false | 否 | 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。 |
| data | string | - | 否 | 给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.attr.data&nbsp;读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过attr.data&nbsp;进行访问。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;从API&nbsp;Version&nbsp;6&nbsp;开始，建议使用data-\*。 | | data | string | - | 否 | 给当前组件设置data属性，进行相应的数据存储和读取。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.attr.data&nbsp;读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过attr.data&nbsp;进行访问。<br/>从API&nbsp;Version&nbsp;6&nbsp;开始，建议使用data-\*。 |
| data-\*<sup>6+</sup> | string | - | 否 | 给当前组件设置data-\*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.dataSet.a读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过dataSet.a进行访问。 | | data-\*<sup>6+</sup> | string | - | 否 | 给当前组件设置data-\*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：<br/>-&nbsp;在事件回调中使用&nbsp;e.target.dataSet.a读取数据，e为事件回调函数入参。<br/>-&nbsp;使用`$element`或者`$refs`获取DOM元素后，通过dataSet.a进行访问。 |
| click-effect<sup>5+</sup> | string | - | 否 | 通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：<br/>-&nbsp;spring-small：建议小面积组件设置，缩放(90%)。<br/>-&nbsp;spring-medium：建议中面积组件设置，缩放(95%)。<br/>-&nbsp;spring-large：建议大面积组件设置，缩放(95%)。 | | click-effect<sup>5+</sup> | string | - | 否 | 通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：<br/>-&nbsp;spring-small：建议小面积组件设置，缩放(90%)。<br/>-&nbsp;spring-medium：建议中面积组件设置，缩放(95%)。<br/>-&nbsp;spring-large：建议大面积组件设置，缩放(95%)。 |
| dir<sup>6+</sup> | string | auto | 否 | 设置元素布局模式，支持设置rtl、ltr和auto三种属性值：<br/>-&nbsp;rtl：使用从右往左布局模式。<br/>-&nbsp;ltr：使用从左往右布局模式。<br/>-&nbsp;auto：跟随系统语言环境。 | | dir<sup>6+</sup> | string | auto | 否 | 设置元素布局模式，支持设置rtl、ltr和auto三种属性值：<br/>-&nbsp;rtl：使用从右往左布局模式。<br/>-&nbsp;ltr：使用从左往右布局模式。<br/>-&nbsp;auto：跟随系统语言环境。 |
## 渲染属性 ## 渲染属性
渲染属性是指组件普遍支持的用来设置组件是否渲染的属性。 渲染属性是指组件普遍支持的用来设置组件是否渲染的属性。
| 名称 | 类型 | 默认值 | 描述 | | 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- | | ---- | ------- | ---- | ------------------------ |
| for | Array | - | 根据设置的数据列表，展开当前元素。 | | for | Array | - | 根据设置的数据列表，展开当前元素。 |
| if | boolean | - | 根据设置的boolean值，添加或移除当前元素。 | | if | boolean | - | 根据设置的boolean值，添加或移除当前元素。 |
| show | boolean | - | 根据设置的boolean值，显示或隐藏当前元素。 | | show | boolean | - | 根据设置的boolean值，显示或隐藏当前元素。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 属性和样式不能混用，不能在属性字段中进行样式设置。 > 属性和样式不能混用，不能在属性字段中进行样式设置。
zh-cn/application-dev/reference/arkui-js/js-components-container-list-item.md
浏览文件 @ cdb6cf82
# list-item # list-item
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
&lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 &lt;[list](../arkui-js/js-components-container-list.md)&gt;的子组件，用来展示列表具体item。由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或