未验证 提交 deb9fe10 编写于 作者: O openharmony_ci 提交者: Gitee

!4133 update docs

Merge pull request !4133 from 田雨/master
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
> >
> - 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > - 从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> >
> - 需要在config.json对应的"abilities"中设置"*configChanges*"属性为"orientation" > - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation"
> ``` > ```
> "abilities": [ > "abilities": [
> { > {
...@@ -78,3 +78,58 @@ ...@@ -78,3 +78,58 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 在attached组件生命周期回调后,可以调用上述组件方法。 > 在attached组件生命周期回调后,可以调用上述组件方法。
## 示例
```
<!-- xxx.hml -->
<div class="container">
<video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
controls='true' onprepared='preparedCallback' onstart='startCallback'
onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
onseeking='seekingCallback' onseeked='seekedCallback'
ontimeupdate='timeupdateCallback'
style="object-fit:fit; width:80%; height:400px;"
onclick="change_start_pause">
</video>
</div>
```
```
/* xxx.css */
.container {
justify-content: center;
align-items: center;
}
```
```
// xxx.js
export default {
data: {
event:'',
seekingtime:'',
timeupdatetime:'',
seekedtime:'',
isStart: true,
duration: '',
},
preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;},
startCallback:function(){ this.event = '视频开始播放';},
pauseCallback:function(){ this.event = '视频暂停播放'; },
finishCallback:function(){ this.event = '视频播放结束';},
errorCallback:function(){ this.event = '视频播放错误';},
seekingCallback:function(e){ this.seekingtime = e.currenttime; },
timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
change_start_pause: function() {
if(this.isStart) {
this.$element('videoId').pause();
this.isStart = false;
} else {
this.$element('videoId').start();
this.isStart = true;
}
},
}
```
...@@ -21,16 +21,16 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ...@@ -21,16 +21,16 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
- 参数 - 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | 是 | - | 创建相应的开关状态组件。 | | type | ToggleType | 是 | - | 开关类型。 |
| isOn | boolean | 否 | false | 设置开关状态组件初始化状态。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;在创建组件时不设置isOn,组件复用时可保持选中状态;如设置isOn初始值,则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。 | | isOn | boolean | 否 | false | 开关是否打开,true:打开,false:关闭。 |
- ToggleType枚举说明 - ToggleType枚举说明
| 名称 | 描述 | | 名称 | 描述 |
| -------- | -------- | | -------- | -------- |
| Checkbox | 提供单选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。 | | Checkbox | 提供单选框样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明:**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Button | 提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。 | | Button | 提供状态按钮样式,如果有文本设置,则相应的文本内容会显示在按钮内部。 |
| Switch | 提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。 | | Switch | 提供开关样式,子组件设置文本不生效,如需文本设置,可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明:**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)默认值为:<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
## 属性 ## 属性
...@@ -38,7 +38,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ...@@ -38,7 +38,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
| 名称 | 参数 | 默认值 | 参数描述 | | 名称 | 参数 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | | selectedColor | Color | - | 设置组件打开状态的背景颜色。 |
| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 | | switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明:**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
## 事件 ## 事件
...@@ -54,6 +54,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) ...@@ -54,6 +54,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
@Entry @Entry
@Component @Component
struct ToggleExample { struct ToggleExample {
build() { build() {
Column({ space: 10 }) { Column({ space: 10 }) {
Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册