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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
## 子组件
......@@ -16,8 +16,8 @@
除支持[通用属性](../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的文本值。 |
| 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：图标位于文本下方。 |
......@@ -32,15 +32,15 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| text-color | &lt;color&gt; | \#ff007dff<br/> | 否 | 按钮的文本颜色。 |
| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- |
| text-color | &lt;color&gt; | \#007dff<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-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图源时必须设置该样式。 |
| icon-width | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的宽，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| icon-height | &lt;length&gt; | - | 否 | 设置圆形按钮内部图标的高，默认填满整个圆形按钮。<br/>icon使用svg图源时必须设置该样式。 |
| radius | &lt;length&gt; | - | 否 | 按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。 |
......@@ -49,7 +49,7 @@
除支持[通用样式](../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 | 否 | 弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 |
......@@ -70,12 +70,12 @@
类型为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,7 +130,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 57d4e906
# chart
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图表组件，用于呈现线形图、柱状图、量规图界面。
......@@ -20,7 +20,7 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------------------------------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| type | string | line | 否 | 设置图表类型（不支持动态修改），可选项有：<br/>-&nbsp;bar：柱状图。<br/>-&nbsp;line：线形图。<br/>-&nbsp;gauge：量规图。<br/>-&nbsp;progress<sup>5+</sup>：进度类圆形图表。<br/>-&nbsp;loading<sup>5+</sup>：加载类圆形图表。<br/>-&nbsp;rainbow<sup>5+</sup>：占比类圆形图表。 |
| options | ChartOptions | - | 否 | 图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改） |
| datasets | Array&lt;ChartDataset&gt; | - | 否 | 数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。 |
......@@ -31,34 +31,34 @@
**表1** ChartOptions
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | ----------- | ---- | ---- | ---------------------------------------- |
| xAxis | ChartAxis | - | 是 | x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。 |
| yAxis | ChartAxis | - | 是 | y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。 |
| series | ChartSeries | - | 否 | 数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| series | ChartSeries | - | 否 | 仅线形图支持设置数据序列参数，可以设置的样式：<br>- 线的样式，如线宽、是否平滑。<br>- 设置线最前端位置白点的样式和大小。 |
**表2** ChartDataset
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 线条颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。线形图表示填充的渐变颜色。 |
| ----------- | ---------------------------------------- | -------- | ---- | ---------------------- |
| strokeColor | &lt;color&gt; | \#ff6384 | 否 | 仅线形图支持设置线条颜色。 |
| fillColor | &lt;color&gt; | \#ff6384 | 否 | 填充颜色。<br>线形图表示填充的渐变颜色。 |
| data | Array&lt;number&gt;&nbsp;\|&nbsp;Array&lt;Point&gt;<sup>5+</sup> | - | 是 | 设置绘制线或柱中的点集。 |
| gradient | boolean | false | 否 | 设置是否显示填充渐变颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持。 |
| gradient | boolean | false | 否 | 仅线形图支持设置是否显示填充渐变颜色。 |
**表3** ChartAxis
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| min | number | 0 | 否 | 轴的最小值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 |
| max | number | 100 | 否 | 轴的最大值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅线形图支持负数。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。<br/>>&nbsp;在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| -------- | ------------- | -------- | ---- | ---------------------------------------- |
| min | number | 0 | 否 | 轴的最小值，仅线形图支持负数。 |
| max | number | 100 | 否 | 轴的最大值，仅线形图支持负数。 |
| axisTick | number | 10 | 否 | 轴显示的刻度数量。仅支持1~20，且具体显示的效果与图的宽度所占的像素/（max-min）有关。<br/>在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。 |
| display | boolean | false | 否 | 是否显示轴。 |
| color | &lt;color&gt; | \#c0c0c0 | 否 | 轴颜色。 |
**表4** ChartSeries
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ----------- | -------------- | ---- | ---- | -------------------- |
| lineStyle | ChartLineStyle | - | 否 | 线样式设置，如线宽、是否平滑。 |
| headPoint | PointStyle | - | 否 | 线最前端位置白点的样式和大小。 |
| topPoint | PointStyle | - | 否 | 最高点的样式和大小。 |
......@@ -68,14 +68,14 @@
**表5** ChartLineStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------ | -------------- | ----- | ---- | ----- |
| width | &lt;length&gt; | 1px | 否 | 线宽设置。 |
| smooth | boolean | false | 否 | 是否平滑。 |
**表6** PointStyle
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ----------- | -------------- | -------- | ---- | ---------------------------------------- |
| shape | string | circle | 否 | 高亮点的形状。可选值为：<br/>-&nbsp;circle：圆形。<br/>-&nbsp;square：方形。<br/>-&nbsp;triangle：三角形。 |
| size | &lt;length&gt; | 5px | 否 | 高亮点的大小。 |
| strokeWidth | &lt;length&gt; | 1px | 否 | 边框宽度 |
......@@ -85,14 +85,14 @@
**表7** ChartLoop
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| -------- | -------------- | ----- | ---- | ---------------------------------------- |
| margin | &lt;length&gt; | 1 | 否 | 擦除点的个数（最新绘制的点与最老的点之间的横向距离）。轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。 |
| gradient | boolean | false | 否 | 是否需要渐变擦除。 |
**表8** Point<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------------ | ------------- | -------- | ---- | ---------------------------------------- |
| value | number | 0 | 是 | 表示绘制点的Y轴坐标。 |
| pointStyle | PointStyle | - | 否 | 表示当前数据点的绘制样式。 |
| description | string | - | 否 | 表示当前点的注释内容。 |
......@@ -104,14 +104,14 @@
**表9** DataSegment<sup>5+</sup>
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ---------- | ------ | ---- | ---- | ---------------------------------------- |
| startColor | Color | - | 否 | 起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。 |
| endColor | Color | - | 否 | 终止位置的颜色，设置endColor必须设置startColor。<br/>不设置startColor时，会使用系统默认预置的颜色数组。 |
| value | number | 0 | 是 | 占比数据的所占份额，最大100。 |
| name | string | - | 否 | 此类数据的名称。 |
| 数据组 | 浅色主题 | 深色主题 |
| -------- | -------- | -------- |
| ---- | --------------------------- | --------------------------- |
| 0 | 起始颜色：\#f7ce00，结束颜色：\#f99b11 | 起始颜色：\#d1a738，结束颜色：\#eb933d |
| 1 | 起始颜色：\#f76223，结束颜色：\#f2400a | 起始颜色：\#e67d50，结束颜色：\#d9542b |
| 2 | 起始颜色：\#f772ac，结束颜色：\#e65392 | 起始颜色：\#d5749e，结束颜色：\#d6568d |
......@@ -125,7 +125,7 @@
当类型为量规图时，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------- | ------ | ---- | ---- | ---------------------- |
| percent | number | 0 | 否 | 当前值占整体的百分比，取值范围为0-100。 |
......@@ -136,7 +136,7 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------------------------ | -------------- | -------------------------- | ---- | ---------------------------------------- |
| stroke-width | &lt;length&gt; | 32px（量规）<br/>24px（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条的宽度。 |
| start-angle | &lt;deg&gt; | 240（量规）<br/>0（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。 |
| total-angle | &lt;deg&gt; | 240（量规）<br/>360（占比类圆形图表） | 否 | 量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
......@@ -159,13 +159,13 @@
除支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 方法 | 参数 | 描述 |
| -------- | -------- | -------- |
| append | {<br/>serial:&nbsp;number,&nbsp;//&nbsp;设置要更新的线形图数据下标<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;//&nbsp;设置新增的数据<br/>} | 往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| append | {<br/>serial:&nbsp;number,&nbsp;<br/>data:&nbsp;Array&lt;number&gt;,&nbsp;<br/>} | 向已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。假设serial的值为index，使用data数据更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis&nbsp;min/max设置相关）。 |
## 示例
1. 线形图
```
```html
<!-- xxx.hml -->
<div class="container">
<stack class="chart-region">
......@@ -176,7 +176,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -202,7 +202,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -257,7 +257,7 @@
![zh-cn_image_0000001173324843](figures/zh-cn_image_0000001173324843.png)
2. 柱状图
```
```html
<!-- xxx.hml -->
<div class="container">
<stack class="data-region">
......@@ -267,7 +267,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -287,7 +287,7 @@
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -325,7 +325,7 @@
![zh-cn_image_0000001173164929](figures/zh-cn_image_0000001173164929.png)
3. 量规图
```
```html
<!-- xxx.hml -->
<div class="container">
<div class="gauge-region">
......@@ -334,7 +334,7 @@
</div>
```
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -352,3 +352,76 @@
```
![zh-cn_image_0000001127125264](figures/zh-cn_image_0000001127125264.png)
4. 进度类、加载类、占比类圆形图表
```html
<!-- xxx.hml -->
<div class="container">
<text class="text">progress Example</text>
<stack class="chart-region">
<chart class="" type="progress" segments="{{ progressdata }}"></chart>
</stack>
<text class="text">loading Example</text>
<stack class="chart-region">
<chart class="" type="loading" segments="{{ loadingdata }}"></chart>
</stack>
<text class="text">rainbow Example</text>
<stack class="chart-region">
<chart class="" type="rainbow" segments="{{ rainbowdata }}" effects="true" animationduration="5000"></chart>
</stack>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.chart-region {
height: 400px;
width: 700px;
margin-top: 10px;
}
.text {
margin-top: 30px;
}
```
```js
// xxx.js
export default {
data: {
progressdata: {
value: 50,
name: 'progress'
},
loadingdata: {
startColor: "#ffc0cb",
endColor: "#00bfff",
},
rainbowdata: [
{
value: 50,
name: 'item1'
},
{
value: 10,
name: 'item2'
},
{
value: 20,
name: 'item3'
},
{
value: 10,
name: 'item4'
},
{
value: 10,
name: 'item5'
}
]
}
}
```
![rainbow](figures/rainbow.gif)
\ No newline at end of file
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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
图片组件，用来渲染展示图片。
......@@ -16,8 +16,8 @@
除支持[通用属性](../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 | - | 否 | 占位图，当指定图片在加载中时显示。 |
......@@ -26,23 +26,23 @@
除支持[通用样式](../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-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资源将不会绘制；
......@@ -61,9 +61,9 @@
除支持[通用事件](../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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
嵌入页面的滑动选择器。
......@@ -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,20 +120,65 @@ type=multi-text：
## 示例
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>
```
```
<!-- xxx.hml -->
<div class="container" @swipe="handleSwipe">
```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>
```
</div>
```
```
/* xxx.css */
.container {
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -141,21 +186,21 @@ type=multi-text：
top: 0px;
width: 454px;
height: 454px;
}
.title {
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker {
}
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
}
```
}
```
```
/* xxx.js */
export default {
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
......@@ -172,15 +217,155 @@ export default {
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>
```
![zh-cn_image_0000001173324845](figures/zh-cn_image_0000001173324845.png)
```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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
......@@ -16,7 +16,7 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
| hint | string | - | 否 | 搜索提示文字。 |
| value | string | - | 否 | 搜索框搜索文本值。 |
......@@ -26,7 +26,7 @@
**表1** MenuOption<sup>5+</sup>
| 名称 | 类型 | 描述 |
| -------- | -------- | -------- |
| ------- | ------ | ----------- |
| icon | string | 菜单选项中的图标路径。 |
| content | string | 菜单选项中的文本内容。 |
......@@ -36,12 +36,12 @@
除支持[通用样式](../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标签，则应用不会重启而直接生效。 |
| 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-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; | - | 否 | 设置输入光标的颜色。 |
......@@ -51,8 +51,8 @@
除支持[通用事件](../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>或者按下软键盘搜索按钮时触发。 |
| translate<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
| share<sup>5+</sup> | {&nbsp;value:&nbsp;selectedText&nbsp;} | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
......@@ -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;
}
```
```
// 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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
开关选择器，通过开关，开启或关闭某个功能。
......@@ -20,7 +20,7 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| -------- | ------- | ----- | ---- | ---------- |
| checked | boolean | false | 否 | 是否选中。 |
| showtext | boolean | false | 否 | 是否显示文本。 |
| texton | string | "On" | 否 | 选中时显示的文本。 |
......@@ -34,14 +34,14 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| texton-color(Rich) | &lt;color&gt; | \#000000 | 否 | 选中时显示的文本颜色。 |
| textoff-color(Rich) | &lt;color&gt; | \#000000 | 否 | 未选中时显示的文本颜色。 |
| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| 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/>>&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#样式)。 |
| 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生效。 |
......@@ -50,7 +50,7 @@
除支持[通用事件](../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 @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;
}
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){
switchChange(e) {
if (e.checked) {
prompt.showToast({
message: "打开开关"
});
}else{
} 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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
......@@ -28,17 +28,17 @@
除支持[通用样式](../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标签。 |
| 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，取值越大，字体越粗。<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-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>：默认的行高。 |
| 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)指定的字体，会被选中作为文本的字体。 |
......@@ -50,9 +50,9 @@
| 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;设置字体大小自适应相关样式后生效。 |
| adapt-height<sup>7+</sup> | boolean | false | 否 | 文本大小是否自适应容器高度。<br/>设置字体大小自适应相关样式后生效。 |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
>
> - 文本换行：文本可以通过转义字符\r\n进行换行。
......@@ -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;
flex-direction: column;
}
.title {
font-size: 80px;
text-align: center;
width: 400px;
height: 400px;
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;
.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;
text-indent: 20px;
white-space: pre;
}
.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-list.md
浏览文件 @ 57d4e906
# list
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
......@@ -20,19 +20,19 @@
除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| --------------------------- | ---------------------------------------- | ------- | ---- | ---------------------------------------- |
| scrollpage | boolean | false | 否 | 设置为true时，将&nbsp;list&nbsp;顶部页面中非&nbsp;list&nbsp;部分随&nbsp;list&nbsp;一起滑出可视区域，当list方向为row时，不支持此属性。 |
| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。<br/>可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。 |
| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：<br/>-&nbsp;off：不显示。<br/>-&nbsp;auto：按需显示(触摸时显示，2s后消失)。<br/>-&nbsp;on：常驻显示。 |
| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：<br/>-&nbsp;spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。<br/>-&nbsp;fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。<br/>-&nbsp;no：滑动到边缘后无效果。 |
| indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>>&nbsp;<br/>>&nbsp;-&nbsp;点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
| indexer | boolean&nbsp;\|&nbsp;Array&lt;string&gt; | false | 否 | 是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：<br/>"indexer"&nbsp;:&nbsp;"true"表示使用默认字母索引表。<br/>"indexer"&nbsp;:&nbsp;"false"表示无索引。<br/>"indexer"&nbsp;:&nbsp;['\#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"\#"必须要存在。<br/>indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。<br/>点击索引条进行列表项索引需要list-item子组件配合设置相应的[section属性](../arkui-js/js-components-container-list-item.md#属性)。 |
| indexercircle<sup>5+</sup> | boolean | - | 否 | 是否为环形索引。<br/>穿戴设备默认为true，其他为false。indexer为false时不生效。 |
| indexermulti<sup>5+</sup> | boolean | false | 否 | 是否开启索引条多语言功能。<br/>indexer为false时不生效。 |
| indexerbubble<sup>5+</sup> | boolean | true | 否 | 是否开启索引切换的气泡提示。<br/>indexer为false时不生效。 |
| divider<sup>5+</sup> | boolean | false | 否 | item是否自带分隔线。<br/>其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。 |
| shapemode | string | default | 否 | 侧边滑动栏的形状类型。<br/>-&nbsp;default：不指定，跟随主题；<br/>-&nbsp;rect：矩形；<br/>-&nbsp;round：圆形。 |
| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。<br/>-&nbsp;false：新增删除item时无过渡动效。<br/>-&nbsp;true：新增删除item时播放过程动效。 |
| chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;不支持动态修改。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如同时配置了indexer，链式动效不生效。<br/>&nbsp;&nbsp;>&nbsp;-&nbsp;如配置了链式动效，list-item的sticky不生效。 |
| chainanimation<sup>5+</sup> | boolean | false | 否 | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。<br/>-&nbsp;false：不启用链式联动<br/>-&nbsp;true：启用链式联动<br/>不支持动态修改。<br/>同时配置了indexer，链式动效不生效。<br/>如配置了链式动效，list-item的sticky不生效。 |
| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。 |
| initialoffset | &lt;length&gt; | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。 |
| selected<sup>5+</sup> | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
......@@ -43,14 +43,14 @@
除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
| divider-color<sup>5+</sup> | &lt;color&gt; | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
| divider-height<sup>5+</sup> | &lt;length&gt; | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
| divider-length<sup>5+</sup> | &lt;length&gt; | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
| divider-origin<sup>5+</sup> | &lt;length&gt; | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：<br/>-&nbsp;column：主轴为纵向。<br/>-&nbsp;row：主轴为横向。<br/>其他组件默认值为row，在list组件中默认值为column。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>&nbsp;&nbsp;>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>&nbsp;&nbsp;>&nbsp;align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。<br/>设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：<br/>-&nbsp;stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。<br/>-&nbsp;flex-start：元素向交叉轴起点对齐。<br/>-&nbsp;flex-end：元素向交叉轴终点对齐。<br/>-&nbsp;center：元素在交叉轴居中。<br/>align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
| item-extent | &lt;length&gt;&nbsp;\|&nbsp;&lt;percentage&gt; | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
| fade-color | &lt;color&gt; | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
| scrollbar-color<sup>6+</sup> | &lt;color&gt; | - | 否 | 设置滚动条的颜色。 |
......@@ -63,7 +63,7 @@
除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| -------------------------- | ---------------------------------------- | ---------------------------------------- |
| indexerchange<sup>5+</sup> | {&nbsp;local:&nbsp;booleanValue&nbsp;} | 多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：<br/>-&nbsp;true:&nbsp;当前展示本地索引。<br/>-&nbsp;false:&nbsp;当前展示字母索引。 |
| scroll | {&nbsp;scrollX:&nbsp;scrollXValue,&nbsp;scrollY:&nbsp;scrollYValue,&nbsp;scrollState:&nbsp;stateValue&nbsp;} | 列表滑动的偏移量和状态回调。<br/>stateValue:&nbsp;0表示列表滑动已经停止。<br/>stateValue:&nbsp;1表示列表正在用户触摸状态下滑动。<br/>stateValue:&nbsp;2表示列表正在用户松手状态下滑动。 |
| scrollbottom | - | 当前列表已滑动到底部位置。 |
......@@ -79,7 +79,7 @@
支持[通用方法](../arkui-js/js-components-common-methods.md)外，还支持如下方法：
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| scrollTo | {&nbsp;index:&nbsp;number(指定位置)&nbsp;} | list滑动到指定index的item位置。 |
| scrollTop | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到顶部。<br/>smooth为true，表示平滑滚动到顶部。 |
| scrollBottom | {&nbsp;smooth:&nbsp;boolean&nbsp;} | smooth缺省为false，表示直接滚动到底部。<br/>smooth为true，表示平滑滚动到底部。 |
......@@ -92,13 +92,13 @@
**表1** currentOffset返回对象属性说明
| 名称 | 类型 | 备注 |
| -------- | -------- | -------- |
| ---- | ------ | ---------------- |
| x | number | 当前x轴滑动偏移量，单位为px。 |
| y | number | 当前y轴滑动偏移量，单位为px。 |
## 示例
```
```html
<!-- index.hml -->
<div class="container">
<list class="todo-wrapper">
......@@ -111,23 +111,7 @@
</list>
</div>
```
```
// index.js
export default {
data: {
todolist: [{
title: '刷题',
date: '2021-12-31 10:00:00',
}, {
title: '看电影',
date: '2021-12-31 20:00:00',
}],
},
}
```
```
```css
/* index.css */
.container {
display: flex;
......@@ -152,4 +136,21 @@ export default {
}
```
```js
// index.js
export default {
data: {
todolist: [{
title: '刷题',
date: '2021-12-31 10:00:00'
}, {
title: '看电影',
date: '2021-12-31 20:00:00'
}],
},
}
```
![zh-cn_image_0000001185033226](figures/zh-cn_image_0000001185033226.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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
......@@ -15,7 +15,7 @@
仅支持&lt;stepper-item&gt;子组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> **说明：**
> 步骤导航器内的步骤顺序按照子组件&lt;stepper-item&gt;的顺序进行排序。
......@@ -24,15 +24,15 @@
除支持[通用属性](../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组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
......@@ -41,12 +41,12 @@
除支持[通用事件](../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子组件。 |
## 方法
......@@ -54,65 +54,84 @@
除支持[通用方法](../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 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>
<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>
<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>
<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>
<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>
<button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
</stepper-item>
</stepper>
</div>
```
```
```css
/* xxx.css */
.container {
margin-top: 20px;
flex-direction: column;
align-items: center;
height: 300px;
height: 100%;
width: 100%;
background-color: #f7f7f7;
}
.stepper{
width: 100%;
height: 100%;
}
.stepperItem {
.stepper-item {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.stepperItemContent {
color: #0000ff;
font-size: 50px;
justify-content: center;
.item{
width: 90%;
height: 86%;
margin-top: 80px;
background-color: white;
border-radius: 60px;
flex-direction: column;
align-items: center;
padding-top: 160px;
}
text {
font-size: 78px;
color: #182431;
opacity: 0.4;
}
.button {
width: 60%;
margin-top: 30px;
width: 40%;
margin-top: 100px;
justify-content: center;
}
```
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data: {
label_1:
......@@ -132,10 +151,12 @@ export default {
prevLabel: 'BACK',
nextLabel: 'NEXT',
status: 'normal'
},
}
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
this.$element('mystepper').setNextButtonStatus({
status: 'waiting', label: 'SKIP'
});
},
nextclick(e) {
var index = {
......@@ -149,7 +170,22 @@ export default {
}
return index;
},
statuschange(e) {
prompt.showToast({
message: '上一步序号' + e.prevIndex + '当前序号' + e.index
})
},
finish() {
prompt.showToast({
message: '最后一步已完成'
})
},
skip() {
prompt.showToast({
message: 'skip触发'
})
}
}
```
![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.
先完成此消息的编辑！
想要评论请 注册 或