diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md index b2ebd490827ecd26ac234f1d50c04eeb9b2e8da0..bf8f0298cae31d095aee0c2dde5c85ff7d002ff7 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md @@ -5,15 +5,15 @@ > > - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 > -> - 需要在config.json对应的"abilities"中设置"*configChanges*"属性为"orientation" -> ``` -> "abilities": [ -> { -> "configChanges": ["orientation"], -> ... -> } -> ] -> ``` +> - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation" +> ``` +> "abilities": [ +> { +> "configChanges": ["orientation"], +> ... +> } +> ] +> ``` 视频播放组件。 @@ -78,3 +78,58 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 在attached组件生命周期回调后，可以调用上述组件方法。 + +## 示例 + +``` + +
+ +
+``` + +``` +/* 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; + } + }, +} +``` + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index e149bf636194673b004e154c7dc23119537f070e..0c75f100531d0f7192a5efe3552340f490cf310e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -21,31 +21,31 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) - 参数 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | - | type | ToggleType | 是 | - | 创建相应的开关状态组件。 | - | isOn | boolean | 否 | false | 设置开关状态组件初始化状态。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 在创建组件时不设置isOn，组件复用时可保持选中状态；如设置isOn初始值，则需要在通过事件方法记录选中状态已达到组件复用时保持选中状态。 | + | type | ToggleType | 是 | - | 开关类型。 | + | isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 | - ToggleType枚举说明 - | 名称 | 描述 | + | 名称 | 描述 | | -------- | -------- | - | Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。 | - | Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 | - | Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。 | + | Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)的默认值为：
{
 top: 14 vp,
 right: 6 vp,
 bottom: 14 vp,
 left: 6 vp
} | + | Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 | + | Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)默认值为：
{
 top: 12 vp,
 right: 12 vp,
 bottom: 12 vp,
 left: 12 vp
} | ## 属性 -| 名称 | 参数 | 默认值 | 参数描述 | +| 名称 | 参数 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | -| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 仅对type为ToggleType.Switch生效。 | +| selectedColor | Color | - | 设置组件打开状态的背景颜色。 | +| switchPointColor | Color | - | 设置Switch类型的圆形滑块颜色。
> **说明：**
> 仅对type为ToggleType.Switch生效。 | ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 | +| onChange(callback: (isOn: boolean) => void) | 开关状态切换时触发该事件。 | ## 示例 @@ -54,6 +54,7 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) @Entry @Component struct ToggleExample { + build() { Column({ space: 10 }) { Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')