Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

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

未验证 提交 7a0e9b62 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11700 js示例代码修改 

Merge pull request !11700 from sienna1128/docs/1114
上级 a401def1 08ccdd14
隐藏空白更改
内联 并排
Showing with 528 addition and 263 deletion
zh-cn/application-dev/reference/arkui-js/js-components-basic-button.md
浏览文件 @ 7a0e9b62
......@@ -3,7 +3,7 @@
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
## 子组件
......@@ -17,7 +17,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------- | ------- | ----- | ---- | ---------------------------------------- |
| 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：图标位于文本下方。 |
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md
浏览文件 @ 7a0e9b62
......@@ -160,7 +160,7 @@
| 方法 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| 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设置相关）。 |
## 示例
......@@ -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
浏览文件 @ 7a0e9b62
......@@ -27,7 +27,7 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit 类型说明。 |
| 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 图片显示在组件底部位置。 |
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 7a0e9b62
......@@ -19,7 +19,7 @@
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | 否 | 设置滑动选择器的类型，该属性不支持动态修改，可选项有：<br/>-&nbsp;text：文本选择器。<br/>-&nbsp;time：时间选择器。<br/>-&nbsp;date：日期选择器。<br/>-&nbsp;datetime：日期时间选择器。<br/>-&nbsp;multi-text：多列文本选择器。 |
文本选择器：type=text
### 文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| --------------- | ------ | ---- | ---- | ---------------------------------------- |
......@@ -28,7 +28,7 @@
| indicatorprefix | string | - | 否 | 文本选择器选定值增加的前缀字段。 |
| indicatorsuffix | string | - | 否 | 文本选择器选定值增加的后缀字段。 |
时间选择器：type=time
### 时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
......@@ -36,7 +36,7 @@
| 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/>从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。 |
日期选择器：type=date
### 日期选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------------ | ---------- | ---- | ---------------------------------------- |
......@@ -46,7 +46,7 @@
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
日期时间选择器：type=datetime，日期的选择范围为本年的日月。
### 日期时间选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- |
......@@ -55,7 +55,7 @@
| lunar<sup>5+</sup> | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 |
| lunarswitch | boolean | false | 否 | 设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。 |
多列文本选择器：type=multi-text
### 多列文本选择器
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | ------- | --------- | ---- | ---------------------------------------- |
......@@ -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：
## 示例
```html
<!-- 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>
```
```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)}`;
},
}
```
![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
浏览文件 @ 7a0e9b62
......@@ -41,7 +41,7 @@
| 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-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; | - | 否 | 设置输入光标的颜色。 |
......
zh-cn/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 7a0e9b62
......@@ -51,7 +51,7 @@
| 属性 | 类型 | 说明 |
| -------- | -------- | -------- |
| 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的值在点击进度条后改变。 |
## 示例
......@@ -59,50 +59,25 @@
```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;
}
```
```js
// 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;
} else if (e.mode == "click") {
this.value = e.value;
this.currentValue = 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
浏览文件 @ 7a0e9b62
......@@ -35,13 +35,13 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
| 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/>如果在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-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生效。 |
......@@ -62,22 +62,30 @@
```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;
}
```
......@@ -85,22 +93,32 @@ switch{
// 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
浏览文件 @ 7a0e9b62
......@@ -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;
}
```
```js
// xxx.js
export default {
data: {
title: 'World'
}
.textcolor {
color: indianred;
}
```
![zh-cn_image_0000001167823076](figures/zh-cn_image_0000001167823076.png)
```html
<!-- xxx.hml -->
<div class="container">
<text class="text1">
This is a passage
</text>
<text class="text2">
This is a passage
</text>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
.textsize {
font-size: 40px;
}
.textletterspacing {
letter-spacing: -3px;
}
.textwordspacing {
word-spacing: 20px;
}
.text1{
word-spacing: 10px;
adapt-height: true;
.textstyle {
font-style: italic;
}
.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;
.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-list.md
浏览文件 @ 7a0e9b62
......@@ -111,22 +111,6 @@
</list>
</div>
```
```js
// 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 {
......@@ -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
浏览文件 @ 7a0e9b62
......@@ -3,7 +3,7 @@
> **说明：**
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。
气泡指示。给控件绑定气泡弹窗，并在点击控件或者调用气泡弹窗显示方法后弹出相应的气泡提示来引导用户进行操作。
## 权限列表
......@@ -21,10 +21,10 @@
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| -------- | -------- | -------- | -------- | -------- |
| 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箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。 |
> **说明：**
......@@ -61,7 +61,7 @@
| 名称 | 参数 | 描述 |
| -------- | -------- | -------- |
| show<sup>5+</sup> | - | 弹出气泡提示。 |
| hide<sup>5+</sup> | - | 取消气泡提示。 |
| hide<sup>5+</sup> | - | 隐藏气泡提示。 |
> **说明：**
> 1. popup气泡弹窗属性、样式均不支持动态更新。
......
zh-cn/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 7a0e9b62
......@@ -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图标颜色。 |
## 事件
......
zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
浏览文件 @ 7a0e9b62
......@@ -25,7 +25,7 @@
| 名称 | 类型 | 默认值 | 描述 |
| ----- | ------ | ---- | ------------------------------ |
| index | number | - | 设置步骤导航器步骤显示第几个stepper-item子组件。 |
| index | number | 0 | 设置步骤导航器步骤显示第几个stepper-item子组件，默认显示第一个stepper-item。 |
## 样式
......@@ -42,9 +42,9 @@
| 名称 | 参数 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| finish | 无 | 当步骤导航器最后一个步骤完成时触发该事件。 |
| skip | 无 | 当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。 |
| change | {&nbsp;prevIndex：prevIndex,&nbsp;index:&nbsp;index} | 当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
| 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子组件。 |
......@@ -55,7 +55,7 @@
| 名称 | 参数 | 描述 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：<br/>-&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>-&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>-&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>-&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：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
## 示例
......@@ -63,24 +63,25 @@
```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>First screen</text>
<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>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>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>
......@@ -89,32 +90,48 @@
```css
/* xxx.css */
.container {
margin-top: 20px;
flex-direction: column;
align-items: center;
height: 300px;
height: 100%;
width: 100%;
background-color: #f7f7f7;
}
.stepperItem {
.stepper{
width: 100%;
height: 100%;
}
.stepper-item {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.stepperItemContent {
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:
......@@ -138,7 +155,7 @@ export default {
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({
status: 'skip', label: 'SKIP'
status: 'waiting', label: 'SKIP'
});
},
nextclick(e) {
......@@ -152,8 +169,23 @@ export default {
pendingIndex: e.pendingIndex
}
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)
zh-cn/application-dev/reference/arkui-ts/ts-types.md
浏览文件 @ 7a0e9b62
......@@ -156,7 +156,6 @@
| position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 |
| globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 |
## Position<sup>8+</sup>
位置类型，用于表示一个坐标点。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或