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

!5448 翻译完成 4133:js-components-media-video.md 及 ts-basic-components-toggle.md

Merge pull request !5448 from ester.zhou/TR-4133
# Toggle # Toggle
> **NOTE**<br>
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<Toggle\>** component can be used to change settings between two states.
## Required Permissions ## Required Permissions
...@@ -13,7 +11,7 @@ None ...@@ -13,7 +11,7 @@ None
## Child Components ## Child Components
None N/A
## APIs ## APIs
...@@ -21,42 +19,43 @@ None ...@@ -21,42 +19,43 @@ None
Toggle(options: { type: ToggleType, isOn?: boolean }) Toggle(options: { type: ToggleType, isOn?: boolean })
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| type | ToggleType | Yes | - | Type of the toggle. | | type | ToggleType | Yes| - | Type of the toggle.|
| isOn | boolean | No | false | Initial state of the toggle.<br/>**NOTE**<br/>If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. | | isOn | boolean | No| false | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.|
- ToggleType enums - ToggleType enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. | | Checkbox | A checkbox is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. | | Button | A button is provided. The set text string, if any, will be displayed inside the button.|
| Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **&lt;Text&gt;** component and the current component in the layout component. | | Switch | A switch is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br>&nbsp;top: 12 vp,<br>&nbsp;right: 12 vp,<br>&nbsp;bottom: 12 vp,<br>&nbsp;left: 12 vp<br> } |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Parameter| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selectedColor | Color | - | Background color of the toggle when it is enabled. | | selectedColor | Color | - | Background color of the component when it is turned on.|
| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.<br/>**NOTE**<br/>This attribute is valid only when type is set to **ToggleType.Switch**. | | switchPointColor | Color | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**. |
## Events ## Events
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(callback: (isOn: boolean) =&gt; void) | Triggered when the switch status changes. | | onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | Triggered when the toggle status changes.|
## Example ## Example
```ts
``` // xxx.ets
@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.
先完成此消息的编辑!
想要评论请 注册