Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
提交 57d4e906 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 0fb2649f
展开全部 隐藏空白更改
内联 并排
Showing with 941 addition and 667 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ 57d4e906
# button
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
## 子组件
......@@ -15,13 +15,13 @@
除支持[通用属性](../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：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 |
| 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：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| type | string | - | 否 | 不支持动态修改。默认展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定。该属性可选值包括：<br/>-&nbsp;capsule：胶囊型按钮，带圆角按钮，有背景色和文本；<br/>-&nbsp;circle：圆形按钮，支持放置图标；<br/>-&nbsp;text：文本按钮，仅包含文本显示；<br/>-&nbsp;arc：弧形按钮，仅支持智能穿戴；<br/>-&nbsp;download：下载按钮，额外增加下载进度条功能。 |
| value | string | - | 否 | button的文本值。 |
| 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：图标位于文本下方。 |
| waiting | boolean | false | 否 | waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。 |
## 样式
......@@ -31,31 +31,31 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#ff007dff<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标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 |
| 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)指定的字体，会被选中作为文本的字体。 |
| icon-width | &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/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#007dff<br/> | 否 | 按钮的文本颜色。 |
| font-size | &lt;length&gt; | 16px<br/> | 否 | 按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| font-style | string | normal | 否 | 按钮的字体样式。 |
| 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)指定的字体，会被选中作为文本的字体。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
### type设置为arc
除支持[通用样式](../arkui-js/js-components-common-styles.md)中background-color、opacity、display、visibility、position、[left|top|right|bottom]外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| 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)指定的字体，会被选中作为文本的字体。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#de0000 | 否 | 弧形按钮的文本颜色。 |
| font-size | &lt;length&gt; | 37.5px | 否 | 弧形按钮的文本尺寸。 |
| allow-scale | boolean | true | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
| font-style | string | normal | 否 | 弧形按钮的字体样式。 |
| 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)指定的字体，会被选中作为文本的字体。 |
## 事件
......@@ -69,13 +69,13 @@
类型为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 -->
<div class="div-button">
<button class="first" type="capsule" value="Capsule button"></button>
......@@ -87,7 +87,7 @@
</div>
```
```
```css
/* xxx.css */
.div-button {
flex-direction: column;
......@@ -130,8 +130,8 @@
}
```
```
// xxx.js
```js
// xxx.js
export default {
data: {
count: 5,
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 57d4e906
# image
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
......@@ -15,55 +15,55 @@
除支持[通用属性](../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>。 |
| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| 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 | - | 否 | 占位图，当指定图片在加载中时显示。 |
## 样式
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式） |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向。（不支持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-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit类型说明。 |
| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持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 图片显示在组件底部位置。 |
**表1** object-fit 类型说明
| 类型 | 描述 |
| -------- | -------- |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用svg图片资源时：
>
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
>
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
>
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
>
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
>
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
| 类型 | 描述 |
| ---------- | ------------------------------------ |
| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 |
| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 |
| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
| none | 保持原有尺寸进行居中显示。 |
| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 |
> **说明：**
> 使用svg图片资源时：
>
> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制；
>
> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域；
>
> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下：
>
> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分；
>
> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| complete(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {&nbsp;width：width，&nbsp;height：height&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
| 名称 | 参数 | 描述 |
| -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 |
| error(Rich) | {<br>&nbsp;width：width，<br>&nbsp;height：height<br>&nbsp;} | 图片加载出现异常时触发该回调，异常时长宽为零。 |
## 方法
......@@ -72,7 +72,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<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;">
......@@ -81,7 +81,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
justify-content: center;
......@@ -96,7 +96,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 57d4e906
# picker-view
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。
......@@ -19,24 +19,24 @@
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：<br/>-&nbsp;text：文本选择器。<br/>-&nbsp;time：时间选择器。<br/>-&nbsp;date：日期选择器。<br/>-&nbsp;datetime：日期时间选择器。<br/>-&nbsp;multi-text：多列文本选择器。 |
文本选择器：type=text
### 文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- |
| 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的索引。 |
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
时间选择器：type=time
### 时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | 否 | 时间选择器是否包含秒。 |
| 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
### 日期选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
......@@ -46,21 +46,21 @@
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
日期时间选择器：type=datetime，日期的选择范围为本年的日月。
### 日期时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| 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 | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
多列文本选择器：type=multi-text
### 多列文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
| 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,…] | 否 | 设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。 |
......@@ -70,7 +70,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------------------------------- | -------------- | ---------- | ---- | ---------------------------------------- |
| color | &lt;color&gt | \#ffffff | 否 | 候选项字体颜色。 |
| color | &lt;color&gt; | \#ffffff | 否 | 候选项字体颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 候选项字体尺寸，类型length，单位px。 |
| selected-color | &lt;color&gt; | #ff0a69f7 | 否 | 选中项字体颜色。 |
| selected-font-size | &lt;length&gt; | 20px | 否 | 选中项字体尺寸，类型length，单位px。 |
......@@ -83,31 +83,31 @@
仅支持如下事件：
type=text：
### 文本选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;newValue:&nbsp;newValue,&nbsp;newSelected:&nbsp;newSelected&nbsp;} | 文本选择器选定值后触发该事件。 |
type=time：
### 时间选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ------------------------------- |
| change | {&nbsp;hour:&nbsp;hour,&nbsp;minute:&nbsp;minute,&nbsp;[second:second]} | 时间选择器选定值后触发该事件。<br/>包含秒时，返回时分秒。 |
type=date：
### 日期选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | --------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day&nbsp;} | 日期选择器选择值后触发该事件。 |
type=datetime：
### 日期时间选择器
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ----------------- |
| change | {&nbsp;year:year,&nbsp;month:month,&nbsp;day:day,&nbsp;&nbsp;hour:hour,&nbsp;minute:minute&nbsp;} | 日期时间选择器选择值后触发该事件。 |
type=multi-text：
### 多列文本选择器
| 名称 | 参数 | 描述 |
| ------------ | ---------------------------------------- | ---------------------------------------- |
......@@ -120,67 +120,252 @@ type=multi-text：
## 示例
```
<!-- xxx.hml -->
<div class="container" @swipe="handleSwipe">
<text class="title">
Selected：{{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
}
```
```
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![zh-cn_image_0000001173324845](figures/zh-cn_image_0000001173324845.png)
1. 文本选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
选中值：{{value}} 选中下标： {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['选项1', '选项2', '选项3'],
value: "选项1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![](figures/pickerview1.gif)
2. 时间选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![](figures/pickerview2.gif)
3. 日期选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "年" + data.month + "月" + data.day + "日";
},
}
```
![](figures/pickerview3.gif)
4. 日期时间选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分";
},
}
```
![](figures/pickerview4.gif)
5. 多列文本选择器
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected：{{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 500px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 20px;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
},
}
```
![](figures/pickerview5.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 57d4e906
# search
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
......@@ -15,19 +15,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 |
| searchbutton<sup>5+</sup> | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
**表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| icon | string | 菜单选项中的图标路径。 |
| 名称 | 类型 | 描述 |
| ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
......@@ -35,28 +35,28 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| 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标签，则应用不会重启而直接生效。 |
| 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-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | \#e6000000 | 否 | 搜索框的文本颜色。 |
| font-size | &lt;length&gt; | 16px | 否 | 搜索框的文本尺寸。 |
| allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
| 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-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
| caret-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置输入光标的颜色。 |
## 事件
除支持[通用事件](../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属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<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;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| 名称 | 参数 | 描述 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | {&nbsp;text:newText&nbsp;} | 输入内容发生变化时触发。<br/>改变value属性值不会触发该回调。 |
| submit | {&nbsp;text:submitText&nbsp;} | 点击搜索图标、搜索按钮<sup>5+</sup>或者按下软键盘搜索按钮时触发。 |
| translate<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;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
| optionselect<sup>5+</sup> | {&nbsp;index:optionIndex,&nbsp;value:&nbsp;selectedText&nbsp;} | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
......@@ -67,7 +67,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<search hint="请输入搜索内容" searchbutton="搜索" @search="search">
......@@ -75,7 +75,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 57d4e906
# slider
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
滑动条组件，用来快速调节设置值，如音量、亮度等。
......@@ -50,55 +51,33 @@
| 属性 | 类型 | 说明 |
| -------- | -------- | -------- |
| value<sup>5+</sup> | number | 当前slider的进度值。 |
| mode<sup>5+</sup> | string | 当前change事件的类型，可选值为：<br/>-&nbsp;start：slider的值开始改变。<br/>-&nbsp;move：slider的值跟随手指拖动中。<br/>-&nbsp;end：slider的值结束改变。 |
| mode<sup>5+</sup> | string | 当前change事件的类型，可选值为：<br/>-&nbsp;start：slider的值开始改变。<br/>-&nbsp;move：slider的值跟随手指拖动中。<br/>-&nbsp;end：slider的值结束改变。<br/>-&nbsp;click：slider的值在点击进度条后改变。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text>slider start value is {{startValue}}</text>
<text>slider current value is {{currentValue}}</text>
<text>slider end value is {{endValue}}</text>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
<slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
```
// xxx.js
export default {
data: {
value: 0,
startValue: 0,
currentValue: 0,
endValue: 0,
},
setvalue(e) {
if (e.mode == "start") {
this.value = e.value;
this.startValue = e.value;
} else if (e.mode == "move") {
this.value = e.value;
this.currentValue = e.value;
} else if (e.mode == "end") {
this.value = e.value;
this.endValue = e.value;
}
}
slider{
margin-top: 100px;
}
```
![zh-cn_image_0000001173324709](figures/zh-cn_image_0000001173324709.png)
![zh-cn_image_0000001173324709](figures/slider.png)
zh-cn/application-dev/reference/arkui-js/js-components-basic-switch.md
浏览文件 @ 57d4e906
# switch
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。
......@@ -19,12 +19,12 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | ----- | ---- | ---------- |
| checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 |
| textoff | string | "Off" | 否 | 未选中时显示的文本。 |
## 样式
......@@ -33,24 +33,24 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 |
| text-padding(Rich) | number | 0px | 否 | 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标签，则应用不会重启而直接生效。 |
| 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-family(Rich) | string | sans-serif | 否 | 字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](../arkui-js/js-components-common-customizing-font.md)指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。 |
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色，仅设置texton和textoff生效。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色，仅设置texton和textoff生效。 |
| text-padding(Rich) | number | 0px | 否 | texton/textoff中最长文本两侧距离滑块边界的距离。 |
| font-size(Rich) | &lt;length&gt; | - | 否 | 文本尺寸，仅设置texton和textoff生效。 |
| 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-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生效。 |
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ------------- |
| change | {&nbsp;checked:&nbsp;checkedValue&nbsp;} | 选中状态改变时触发该事件。 |
## 方法
......@@ -59,48 +59,66 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
<switch @change="normalswitchChange">
</switch>
<switch class="switch" showtext="true" texton="开启" textoff="关闭" @change="switchChange">
</switch>
<switch class="switch text" showtext="true" texton="开启" textoff="关闭" checked="true" @change="switchChange">
</switch>
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
switch{
texton-color:#002aff;
textoff-color:silver;
text-padding:20px;
.switch {
texton-color: red;
textoff-color: forestgreen;
}
.text {
text-padding: 20px;
font-size: 30px;
font-weight: 700;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
switchChange(e){
console.log(e.checked);
if(e.checked){
prompt.showToast({
message: "打开开关"
});
}else{
prompt.showToast({
message: "关闭开关"
});
data: {
title: 'World'
},
switchChange(e) {
if (e.checked) {
prompt.showToast({
message: "打开开关"
});
} else {
prompt.showToast({
message: "关闭开关"
});
}
},
normalswitchChange(e) {
if (e.checked) {
prompt.showToast({
message: "switch on"
});
} else {
prompt.showToast({
message: "switch off"
});
}
}
}
}
```
![zh-cn_image_0000001152862510](figures/zh-cn_image_0000001152862510.gif)
![zh-cn_image_0000001152862510](figures/switch.gif)
zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 57d4e906
# text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> - 该组件从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> - 文本的展示内容需要写在元素标签内。
> - 文本的展示内容需要写在元素标签内。
文本，用于呈现一段信息。
......@@ -27,43 +27,43 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| 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标签。 |
| 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：默认的字间距。 |
| 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。 |
| 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-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;如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| 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使用。 |
| 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>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| 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 |
| 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; | - | 否 | 设置首行缩进量。 |
| 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;设置字体大小自适应相关样式后生效。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
>
> - 文本换行：文本可以通过转义字符\r\n进行换行。
>
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
>
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
>
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
>
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | &lt;color&gt; | #e5000000 | 否 | 设置文本的颜色。 |
| font-size | &lt;length&gt; | 30px | 否 | 设置文本的尺寸。 |
| allow-scale | boolean | true | 否 | 文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。<br/>如果需要支持动态生效，请参看config描述文件中config-changes标签。 |
| 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：默认的字间距。 |
| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：<br/>-&nbsp;normal：标准的字体样式；<br/>-&nbsp;italic：斜体的字体样式。 |
| 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-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/>如果文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
| 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使用。 |
| 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>：文本行数自适应容器高度。 |
| min-font-size | &lt;length&gt; | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| max-font-size | &lt;length&gt; | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
| 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 |
| 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; | - | 否 | 设置首行缩进量。 |
| 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/>设置字体大小自适应相关样式后生效。 |
> **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
>
> - 文本换行：文本可以通过转义字符\r\n进行换行。
>
> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
>
> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
>
> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
>
> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
## 事件
......@@ -76,84 +76,66 @@
## 示例
```
1.
```html
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text class="title">
Hello {{ title }}
</text>
</div>
<text class="title">default text</text>
<text class="title textcolor">hello world with color</text>
<text class="title textsize">hello world with font-size</text>
<text class="title textletterspacing">hello world with letter-spacing</text>
<text class="title textwordspacing">hello world with word-spacing</text>
<text class="title textstyle">hello world with italic</text>
<text class="title textweight">hello world with font-weight</text>
<text class="title textdecoration1">hello world with underline</text>
<text class="title textdecoration2">hello world with line-through</text>
<text class="title textalign">hello world with text-align:right</text>
</div>
```
```
```css
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
height: 400px;
border: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.title {
font-size: 80px;
text-align: center;
width: 400px;
height: 400px;
text-align: center;
width: 800px;
height: 60px;
}
```
```
// xxx.js
export default {
data: {
title: 'World'
}
.textcolor {
color: indianred;
}
```
![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png)
```
<!-- xxx.hml -->
<div class="container">
<text class="text1">
This is a passage
</text>
<text class="text2">
This is a passage
</text>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
.textsize {
font-size: 40px;
}
.text1{
word-spacing: 10px;
adapt-height: true;
.textletterspacing {
letter-spacing: -3px;
}
.text2{
width: 200px;
max-lines: 1;
text-overflow: ellipsis;
text-valign: middle;
line-height: 40px;
text-decoration: underline;
text-decoration-color: red;
text-indent: 20px;
white-space: pre;
.textwordspacing {
word-spacing: 20px;
}
.textstyle {
font-style: italic;
}
.textweight {
font-weight: 700;
}
.textdecoration1 {
text-decoration: underline;
}
.textdecoration2 {
text-decoration: line-through;
text-decoration-color: red;
}
.textalign {
text-align: right;
}
```
![zh-cn_image_0000001213103299](figures/zh-cn_image_0000001213103299.png)
![zh-cn_image_0000001167823076](figures/text.png)
zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 57d4e906
# popup
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。
气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。
## 权限列表
......@@ -21,13 +21,13 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| target | string | - | 是 | 目标元素的id属性值，不支持动态切换。 |
| placement | string | bottom | 否 | 弹出窗口位置。可选值为：<br/>-&nbsp;left：位于目标元素左边；<br/>-&nbsp;right：位于目标元素右边；<br/>-&nbsp;top：位于目标元素上边；<br/>-&nbsp;bottom：位于目标元素下边；<br/>-&nbsp;topLeft：位于目标元素左上角；<br/>-&nbsp;topRight：位于目标元素右上角；<br/>-&nbsp;bottomLeft：位于目标元素左下角；<br/>-&nbsp;bottomRight：位于目标元素右下角。 |
| target | string | - | 是 | popup绑定目标元素的id属性值，不支持动态切换。 |
| placement | string | bottom | 否 | popup相对于目标元素的位置。可选值为：<br/>-&nbsp;left：位于目标元素左边；<br/>-&nbsp;right：位于目标元素右边；<br/>-&nbsp;top：位于目标元素上边；<br/>-&nbsp;bottom：位于目标元素下边；<br/>-&nbsp;topLeft：位于目标元素左上角；<br/>-&nbsp;topRight：位于目标元素右上角；<br/>-&nbsp;bottomLeft：位于目标元素左下角；<br/>-&nbsp;bottomRight：位于目标元素右下角。 |
| keepalive<sup>5+</sup> | boolean | false | 否 | 设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。 |
| clickable<sup>5+</sup> | boolean | true | 否 | popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。 |
| clickable<sup>5+</sup> | boolean | true | 否 | popup是否支持点击目标元素弹窗，当设置为false时，只支持方法调用显示弹窗。 |
| arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | 否 | popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 不支持focusable属性。
......@@ -40,7 +40,7 @@
| -------- | -------- | -------- | -------- | -------- |
| mask-color | &lt;color&gt; | - | 否 | 遮罩层的颜色，默认值为全透明。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
>
> - 不支持position相关样式。
......@@ -61,9 +61,9 @@
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| show<sup>5+</sup> | - | 弹出气泡提示。 |
| hide<sup>5+</sup> | - | 取消气泡提示。 |
| hide<sup>5+</sup> | - | 隐藏气泡提示。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 1. popup气泡弹窗属性、样式均不支持动态更新。
>
> 2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。
......@@ -75,7 +75,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<text id="text">Click to show the pop-up</text>
......@@ -88,7 +88,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -108,14 +108,14 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
duration: 3000
});
},
showpopup() {
......@@ -123,7 +123,7 @@ export default {
},
hidepopup() {
this.$element("popup").hide();
},
}
}
```
......
zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 57d4e906
# refresh
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
下拉刷新容器。
......@@ -22,9 +22,9 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| offset | &lt;length&gt; | - | 否 | 刷新组件静止时距离父组件顶部的距离。 |
| refreshing | boolean | false | 否 | 用于标识刷新组件当前是否正在刷新。 |
| refreshing | boolean | false | 否 | 标识刷新组件当前是否正在刷新。 |
| type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。<br/>-&nbsp;auto:&nbsp;默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。<br/>-&nbsp;pulldown:&nbsp;列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 |
| lasttime | boolean | false | 否 | 是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX&nbsp;”，XXXX&nbsp;按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 |
| lasttime | boolean | false | 否 | 设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX&nbsp;”，XXXX&nbsp;按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 |
| timeoffset<sup>6+</sup> | &lt;length&gt; | - | 否 | 设置更新时间距离父组件顶部的距离。 |
| friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 |
......@@ -35,8 +35,8 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | white<br/> | 否 | 用于设置刷新组件的背景颜色。 |
| progress-color | &lt;color&gt; | black<br/> | 否 | 用于设置刷新组件的loading颜色。 |
| background-color | &lt;color&gt; | white<br/> | 否 | 设置刷新组件的背景颜色。 |
| progress-color | &lt;color&gt; | black<br/> | 否 | 设置刷新组件的loading图标颜色。 |
## 事件
......@@ -56,7 +56,7 @@
## 示例
```
```html
<!-- xxx.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -71,7 +71,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -104,7 +104,7 @@
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 57d4e906
# stepper
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> **说明：**
> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
......@@ -15,141 +15,177 @@
仅支持&lt;stepper-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
> **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
## 属性
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 |
| 名称 | 类型 | 默认值 | 描述 |
| ----- | ------ | ---- | ------------------------------ |
| index | number | 0 | 设置步骤导航器步骤显示第几个stepper-item子组件，默认显示第一个stepper-item。 |
## 样式
支持[通用样式](../arkui-js/js-components-common-styles.md)。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
> **说明：**
> stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
## 事件
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
| next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时,触发该事件。 |
| skip | 无 | 当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当用户点击步骤导航器的左边或者右边按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
| next | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
| back | {&nbsp;index：index,&nbsp;pendingIndex:&nbsp;pendingIndex&nbsp;} | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为Object：{&nbsp;pendingIndex：pendingIndex&nbsp;}，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
## 方法
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：<br/>1.&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>2.&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>3.&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>4.&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
| 名称 | 参数 | 描述 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤中下一步按钮的文本与状态，参数中label为指定按钮文本，status指定按钮状态，status可选值为：<br/>-&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>-&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>-&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>-&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
## 示例
```
```html
<!-- xxx.hml -->
<div class = "container">
<stepper class="stepper" id="mystepper" index="0" onnext="nextclick" onback="backclick">
<stepper-item class ="stepperItem" label="{{label_1}}">
<div class = "stepperItemContent" >
<text class = "text">First screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_2}}">
<div class = "stepperItemContent" >
<text class = "text">Second screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
<stepper-item class ="stepperItem" label="{{label_3}}">
<div class = "stepperItemContent" >
<text class = "text">Third screen</text>
</div>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
</stepper>
<div class="container">
<stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
onfinish="finish" onskip="skip" style="height : 100%;">
<stepper-item class="stepper-item" label="{{ label_1 }}">
<div class="item">
<text>Page One</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
<stepper-item class="stepper-item" label="{{ label_2 }}">
<div class="item">
<text>Page Two</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
<stepper-item class="stepper-item" label="{{ label_3 }}">
<div class="item">
<text>Page Three</text>
<button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
</div>
</stepper-item>
</stepper>
</div>
```
```
```css
/* xxx.css */
.container {
margin-top: 20px;
flex-direction: column;
align-items: center;
height: 300px;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
background-color: #f7f7f7;
}
.stepper{
width: 100%;
height: 100%;
}
.stepper-item {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.stepperItem {
width: 100%;
flex-direction: column;
align-items: center;
.item{
width: 90%;
height: 86%;
margin-top: 80px;
background-color: white;
border-radius: 60px;
flex-direction: column;
align-items: center;
padding-top: 160px;
}
.stepperItemContent {
color: #0000ff;
font-size: 50px;
justify-content: center;
text {
font-size: 78px;
color: #182431;
opacity: 0.4;
}
.button {
width: 60%;
margin-top: 30px;
justify-content: center;
width: 40%;
margin-top: 100px;
justify-content: center;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
label_1:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_2:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
nextclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
backclick(e) {
var index = {
pendingIndex: e.pendingIndex
data: {
label_1:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_2:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
label_3:
{
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
}
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({
status: 'waiting', label: 'SKIP'
});
},
nextclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
backclick(e) {
var index = {
pendingIndex: e.pendingIndex
}
return index;
},
statuschange(e) {
prompt.showToast({
message: '上一步序号' + e.prevIndex + '当前序号' + e.index
})
},
finish() {
prompt.showToast({
message: '最后一步已完成'
})
},
skip() {
prompt.showToast({
message: 'skip触发'
})
}
return index;
},
}
```
![zh-cn_image_0000001127125114](figures/zh-cn_image_0000001127125114.gif)
![](figures/stepper.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或