diff --git a/en/application-dev/reference/arkui-ts/figures/arkts-progress.png b/en/application-dev/reference/arkui-ts/figures/arkts-progress.png new file mode 100644 index 0000000000000000000000000000000000000000..8e16510ddae266f037cce57857c3dc2ecc14ce2e Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/arkts-progress.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/progress.png b/en/application-dev/reference/arkui-ts/figures/progress.png deleted file mode 100644 index d50f4b47628b425b09f93bc9a44853ad79e12631..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/progress.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 459984f79d30f81c7d9d276077038972f743a201..ef810a8be61e6dc14a8ccba62714a3f8bbe1b06e 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,6 +1,6 @@ # Progress -The **\** component is used to provide a progress indicator that displays the progress of content loading or an operation. +The **\** component represents a progress indicator that displays the progress of content loading or an operation. > **NOTE** > @@ -22,47 +22,77 @@ Since API version 9, this API is supported in ArkTS widgets. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.
Since API version 9, this API is supported in ArkTS widgets.| -| total | number | No| Total progress.
Default value: **100**
Since API version 9, this API is supported in ArkTS widgets.| -| type8+ | [ProgressType](#progresstype) | No| Style the progress indicator.
Default value: **ProgressType.Linear**
Since API version 9, this API is supported in ArkTS widgets.| -| styledeprecated | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| +| Name | Type | Mandatory | Description | +| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- | +| value | number | Yes | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.
Since API version 9, this API is supported in ArkTS widgets.| +| total | number | No | Total progress.
Default value: **100**
Since API version 9, this API is supported in ArkTS widgets.| +| type8+ | [ProgressType](#progresstype) | No | Style of the progress indicator.
Default value: **ProgressType.Linear**
Since API version 9, this API is supported in ArkTS widgets.| +| styledeprecated | [ProgressStyle](#progressstyle) | No | Style of the progress indicator.
This parameter is deprecated since API version 8. You are advised to use **type** instead.
Default value: **ProgressStyle.Linear**| ## ProgressType Since API version 9, this API is supported in ArkTS widgets. -| Name| Description| -| -------- | -------- | -| Linear | Linear type. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.| -| Ring8+ | Indeterminate ring type. The ring fills up as the progress increases.| -| Eclipse8+ | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| -| ScaleRing8+ | Determinate ring type, which is similar to the clock scale. Since API version 9, when the outer circles of scales overlap, the progress indicator is automatically converted to the **Ring** type.| -| Capsule8+ | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| +| Name | Description | +| ---------------------- | ---------------------------------------- | +| Linear | Linear style. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width. | +| Ring8+ | Indeterminate ring style. The ring fills up as the progress increases. | +| Eclipse8+ | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | +| ScaleRing8+ | Determinate ring style, which is similar to the clock scale. Since API version 9, when the outer circles of scales overlap, the progress indicator is automatically converted to the **Ring** style.| +| Capsule8+ | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| ## ProgressStyle Since API version 9, this API is supported in ArkTS widgets. -| Name | Description | -| --------- | ------------------------------------------------------------ | -| Linear | Linear type.| -| Ring | Indeterminate ring type. The ring fills up as the progress increases.| -| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| -| ScaleRing | Determinate ring type, which is similar to the clock scale.| -| Capsule | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| +| Name | Description | +| --------- | ---------------------------------------- | +| Linear | Linear style. | +| Ring | Indeterminate ring style. The ring fills up as the progress increases. | +| Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | +| ScaleRing | Determinate ring style, which is similar to the clock scale. | +| Capsule | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Description| -| -------- | -------- | -------- | -| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.
Since API version 9, this API is supported in ArkTS widgets.| -| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Default value: **'\#ff007dff'**
Since API version 9, this API is supported in ArkTS widgets.| -| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Default value: **'\#19182431'**

Since API version 9, this API is supported in ArkTS widgets.| -| style8+ | {
strokeWidth?: [Length](ts-types.md#length),
scaleCount?: number,
scaleWidth?: [Length](ts-types.md#length)
} | Component style.
- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.
Default value: **4.0Vp**
- **scaleCount**: number of divisions on the determinate ring-type process indicator.
Default value: **120**
- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**
Since API version 9, this API is supported in ArkTS widgets.| +| Name | Type | Description | +| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.
Since API version 9, this API is supported in ArkTS widgets.| +| color | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient10+](ts-basic-components-datapanel.md#lineargradient10) | Background color of the progress indicator. Since API version 10, this attribute can be set to **LinearGradient** for the **Ring** style.
Default value (API version 9): **'\#ff007dff'**
Default value (API version 10):
- Capsule: **'\#33006cde'**
- Ring: starting point: **'\#ff3b61f7'**, ending point: **'\#ff6591bf'**
- Other styles: **'\#ff007dff'**
Since API version 9, this API is supported in ArkTS widgets, except that **LinearGradient** is not supported.| +| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.
Default value (API version 9): **'\#19182431'**
Default value (API version 10):
- Capsule: **'\#33ffffff'**
- Ring: **'\#08182431'**
- Other styles: **'\#19182431'**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md) applies to the progress indicator instead of the entire **\** component.| +| style8+ | [ProgressStyleOptions](#progressstyleoptions) \| [CapsuleStyleOptions10+](#capsulestyleoptions10) \| [RingStyleOptions10+](#ringstyleoptions10) | Component style. Since API version 10, this attribute can be set to **CapsuleStyleOptions** or **RingStyleOptions**.
- **CapsuleStyleOptions** is available for the **Capsule** style.
- **RingStyleOptions** is available for the **Ring** style.
- **ProgressStyleOptions** is available for other styles.
Since API version 9, this API is supported in ArkTS widgets, except that **CapsuleStyleOptions** and **RingStyleOptions** are not supported.| + +## ProgressStyleOptions +| Name | Type | Mandatory| Description | +| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.
Default value: **4.0Vp** | +| scaleCount | number | No | Number of divisions on the ring-style process indicator.
Default value: **120** | +| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.
Default value: **2.0Vp**| + +## CapsuleStyleOptions10+ +| Name | Type| Mandatory| Description| +| ------------- | ------- | ---- | -------- | +| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Border color.
Default value: **'\#33006cde'**| +| borderWidth | [Length](ts-types.md#length) | No| Border width. It cannot be set in percentage.
Default value: **1 Vp**| +| content | string | No| Text content, which can be customized .| +| font | [Font](ts-types.md#font) | No| Text style.
Default value:
- Font size (cannot be set in percentage): **12Fp**
- Other attributes: following the settings of the **\** component.| +| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.
Default value: **'\#ff182431'**| +| enableScanEffect | boolean | No| Whether to enable the scan effect.
Default value: **false**| + +## RingStyleOptions10+ +| Name | Type | Mandatory| Description | +| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | +| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage. A value greater than or equal to the radius evaluates to half of the radius.
Default value: **4Vp**| +| shadow | boolean | No | Whether to enable the shadow effect.
Default value: **false** | +| status | [ProgressStatus10+](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the **value** settings do not take effect.
Default value: **ProgressStatus.PROGRESSING**| + +## ProgressStatus10+ +| Name | Description | +| ----------------------- | ---------------- | +| LOADING10+ | Loading.| +| PROGRESSING10+ | The progress is being updated.| ## Events @@ -111,7 +141,7 @@ struct ProgressExample { Progress({ value: 10, type: ProgressType.Ring }).width(100) Progress({ value: 20, total: 150, type: ProgressType.Ring }) .color(Color.Grey).value(50).width(100) - .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) + .style({ strokeWidth: 20 }) } Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') @@ -128,4 +158,4 @@ struct ProgressExample { } ``` -![progress](figures/progress.png) +![progress](figures/arkts-progress.png) diff --git a/en/application-dev/reference/arkui-ts/ts-container-ability-component.md b/en/application-dev/reference/arkui-ts/ts-container-ability-component.md index b4bb994bf095875fc9fe39a0bdd0ff1b86117e67..97b7f95f9818531355166d46b0ca5f7f5988fd6e 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-ability-component.md +++ b/en/application-dev/reference/arkui-ts/ts-container-ability-component.md @@ -29,9 +29,9 @@ AbilityComponent(want: Want) **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| want | [Want](../apis/js-apis-app-ability-want.md) | Yes| Description of the default ability to load.| +| Name | Type | Mandatory | Description | +| ---- | ---------------------------------------- | ---- | --------------- | +| want | [Want](../apis/js-apis-app-ability-want.md) | Yes | Description of the default ability to load.| ## Events @@ -74,5 +74,3 @@ struct MyComponent { } } ``` - - \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index 52fbd9e3d32589538b10f699b209a7f00c9dc5fb..9b195d49a0ed0a36bdf1675820d7fb2b8cadcbd9 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -34,6 +34,7 @@ SideBarContainer( type?: SideBarContainerType ) | -------- | -------- | | Embed | The sidebar is embedded in the component and displayed side by side with the content area.| | Overlay | The sidebar is displayed overlaid on the content area.| +| AUTO | The sidebar is displayed in Embed mode when the component size is greater than or equal to the sum of **minSideBarWidth** and **minContentWidth**
and in Overlay mode otherwise.| ## Attributes @@ -50,6 +51,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | autoHide9+ | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.
Default value: **true**
**NOTE**
The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.
Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).| | sideBarPosition9+ | [SideBarPosition](#sidebarposition9) | Position of the sidebar.
Default value: **SideBarPosition.Start**| | divider10+ | [DividerStyle](#dividerstyle10) \| null | Divider style.
- **DividerStyle** (default): The divider is displayed.
- **null**: The divider is not displayed.| +| minContentWidth10+ | Dimension | Minimum width of the content area of the sidebar container.
Default value: **360**
Unit: vp| ## ButtonStyle diff --git a/en/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md b/en/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md index 148129e651983ba9ba54a017cd6d30d79272571d..4726d5481822059bfc36acfc0481fe27e7656a5e 100644 --- a/en/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md +++ b/en/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md @@ -1,12 +1,11 @@ # Custom Component Lifecycle - The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications. - >**NOTE** > ->Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. +>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. +>- Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. ## aboutToAppear @@ -123,8 +122,8 @@ Since API version 10, this API is supported in ArkTS widgets. **Parameters** -| Name| Type | Description | -| ------ | -------------------------- | -------------------- | +| Name | Type | Description | +| ------ | -------------------------- | ---------- | | params | { [key: string]: unknown } | Parameters used for constructing the custom component.| diff --git a/en/application-dev/reference/arkui-ts/ts-pixel-units.md b/en/application-dev/reference/arkui-ts/ts-pixel-units.md index 8a820840da5c7a8d5ad232f16f548acd585ed262..26ae5a8713858fed4427021145353a500a35b8a7 100644 --- a/en/application-dev/reference/arkui-ts/ts-pixel-units.md +++ b/en/application-dev/reference/arkui-ts/ts-pixel-units.md @@ -1,13 +1,17 @@ # Pixel Units -The framework provides four pixel units, with vp as the reference data unit. +ArkUI provides four pixel units, with vp as the reference data unit. +>**Notes:** +> +>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. -| Name| Description | -| ---- | ------------------------------------------------------------ | -| px | Physical pixel unit of the screen. | + +| Name | Description | +| ---- | ---------------------------------------- | +| px | Physical pixel unit of the screen. | | vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified. On a screen with an actual width of 1440 physical pixels, 1 vp is approximately equal to 3 px.| -| fp | Font pixel, which is similar to vp and varies according to the system font size.| +| fp | Font pixel, which is similar to vp and varies according to the system font size. | | lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.| @@ -15,12 +19,12 @@ The framework provides four pixel units, with vp as the reference data unit. Conversion between px and other pixel units is supported. -| API | Description | -| --------------------------------------------------- | ------------------------------------------------------------ | -| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| -| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.
Since API version 9, this API is supported in ArkTS widgets.| -| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| -| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.
Since API version 9, this API is supported in ArkTS widgets.| +| API | Description | +| ---------------------------------------- | ---------------------------------------- | +| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.
Since API version 9, this API is supported in ArkTS widgets.| +| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| +| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.
Since API version 9, this API is supported in ArkTS widgets.| | lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.
Since API version 9, this API is supported in ArkTS widgets.| | px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.
Since API version 9, this API is supported in ArkTS widgets.| diff --git a/en/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md b/en/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md index 79aa6fa9c7dbb7ea0373a545633307df3df62f41..3d3332c012725d3b6c275ad20d905ae1483e48e4 100644 --- a/en/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md +++ b/en/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md @@ -23,7 +23,7 @@ CSS files can be imported using the **\@import** statement. This facilitates mod The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed. 1. Internal style: The **style** and **class** attributes can be used to specify the component style. Example: - + ```html
@@ -31,7 +31,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
``` - + ```css /* index.css */ .container { @@ -40,7 +40,7 @@ The **.css** file with the same name as the **.hml** file in each page directory ``` 2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**. - + ```css /* style.css */ .title { @@ -48,7 +48,7 @@ The **.css** file with the same name as the **.hml** file in each page directory } ``` - + ```css /* index.css */ @import '../../common/style.css'; @@ -62,10 +62,10 @@ The **.css** file with the same name as the **.hml** file in each page directory A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors. -| Selector| Example| Description| -| -------- | -------- | -------- | +| Selector | Example | Description | +| ------ | ---------- | ------------------------- | | .class | .container | Selects all components whose **class** is **container**.| -| \#id | \#titleId | Selects all components whose **id** is **titleId**.| +| \#id | \#titleId | Selects all components whose **id** is **titleId**. | Example: diff --git a/en/application-dev/ui/arkts-common-components-button.md b/en/application-dev/ui/arkts-common-components-button.md index 8abc45a87a9cc0ed6d0b40eaf907c2afb5692299..3040cfbdb16865189e316aab3a513f2ead8907f5 100644 --- a/en/application-dev/ui/arkts-common-components-button.md +++ b/en/application-dev/ui/arkts-common-components-button.md @@ -54,33 +54,36 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or - Capsule button (default type) + Buttons of this type have rounded corners whose radius is automatically set to half of the button height. The rounded corners cannot be reset through the **borderRadius** attribute. - + ```ts Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(40) ``` - + ![en-us_image_0000001511421208](figures/en-us_image_0000001511421208.png) - Circle button + Buttons of this type are round. The rounded corners cannot be reset through the **borderRadius** attribute. - + ```ts Button('Circle', { type: ButtonType.Circle, stateEffect: false }) .backgroundColor(0x317aff) .width(90) .height(90) ``` - + ![en-us_image_0000001511740428](figures/en-us_image_0000001511740428.png) - + - Normal button + Buttons of this type have rounded corners set to 0. The rounded corners can be reset through the **borderRadius** attribute. - + ```ts Button('Ok', { type: ButtonType.Normal, stateEffect: true }) .borderRadius(8) @@ -88,56 +91,60 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or .width(90) .height(40) ``` - + ![en-us_image_0000001563060641](figures/en-us_image_0000001563060641.png) ## Setting Styles -- Set the border radius: +- Set the border radius. + In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius. - + ```ts Button('circle border', { type: ButtonType.Normal }) .borderRadius(20) .height(40) ``` - + ![en-us_image_0000001511900392](figures/en-us_image_0000001511900392.png) -- The **Font** type is used to set the text style. - Add a font style for text displayed on the button. - +- Set the text style. + + Add text style attributes for the button. + ```ts Button('font style', { type: ButtonType.Normal }) .fontSize(20) .fontColor(Color.Pink) .fontWeight(800) ``` - + ![en-us_image_0000001511580828](figures/en-us_image_0000001511580828.png) -- Set the background color: - You can do so by adding the **backgroundColor** attribute. - +- Set the background color. + + Add the **backgroundColor** attribute for the button. + ```ts Button('background color').backgroundColor(0xF55A42) ``` - + ![en-us_image_0000001562940477](figures/en-us_image_0000001562940477.png) -- Assign a function to the button: +- Assign a function to the button. + In this example, the delete function is assigned to the button. - + ```ts Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) ``` - + ![en-us_image_0000001511740436](figures/en-us_image_0000001511740436.png) @@ -153,9 +160,10 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ``` -## Example Scenario +## Example + +- Using the button for startup -- Using the Button for Startup You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\** container to redirect the user to another page. ```ts @@ -194,7 +202,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ![en-us_image_0000001562700393](figures/en-us_image_0000001562700393.png) -- Use the button for submitting forms: +- Using the button for submitting forms + On the user login/registration page, you can use a button to submit a login or registration request. ```ts @@ -217,7 +226,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true }) ![en-us_image_0000001562940473](figures/en-us_image_0000001562940473.png) -- Configure the button to float: +- Configuring the button to float + The button can remain floating when the user swipes on the screen. ```ts