diff --git a/en/application-dev/reference/arkui-js/js-components-container-div.md b/en/application-dev/reference/arkui-js/js-components-container-div.md
index 9a2976b1a7b00769300795475c59a24f25364e02..e35eb42639301cfb6ce1a9a45880217ce1daf54b 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-div.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-div.md
@@ -30,9 +30,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| flex-direction | string | row | No | Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows: - **column**: Items are placed vertically from top to bottom. - **row**: Items are placed horizontally from left to right.|
| flex-wrap | string | nowrap | No | Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows: - **nowrap**: Flex items are displayed in a single line. - **wrap**: Flex items are displayed in multiple lines.|
| justify-content | string | flex-start | No | How items are aligned along the main axis of the flex container. Available values are as follows: - **flex-start**: Items are packed toward the start edge of the container along the main axis. - **flex-end**: Items are packed toward the end edge of the container along the main axis. - **center**: Items are packed toward the center of the container along the main axis. - **space-between**: Items are positioned with space between the rows. - **space-around**: Items are positioned with space before, between, and after the rows. - **space-evenly**5+: Items are distributed within the container along the main axis, with even space between each two.|
-| align-items | string | stretch | No | How items are aligned along the cross axis of the flex container. Available values are as follows: - **stretch**: Items are stretched to the same height or width as the container along the cross axis. - **flex-start**: Items are packed toward the start edge of the cross axis. - **flex-end**: Items are packed toward the end edge of the cross axis. - **center**: Items are packed toward the center of the cross axis. - **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
+| align-items | string | stretch | No | How items are aligned along the cross axis in a flex container. Available values are as follows: - **stretch**: Items are stretched to the same height or width as the container along the cross axis. - **flex-start**: Items are packed toward the start edge of the cross axis. - **flex-end**: Items are packed toward the end edge of the cross axis. - **center**: Items are packed toward the center of the cross axis. - **baseline**: In a vertical layout, items are aligned to the start of the cross axis, which means that this value is equivalent of **flex-start**. In a horizontal layout, items are aligned with the text baseline if there is text involved, and aligned to the bottom otherwise.|
| align-content | string | flex-start | No | Multi-row alignment mode when there is extra space in the cross axis. Available values are as follows: - **flex-start**: All rows are packed toward the start edge of the cross axis. The start edge of the cross axis of the first row is aligned with the start edge of the cross axis of the container. All subsequent rows are aligned with the previous row. - **flex-end**: All rows are packed toward the end edge of the cross axis. The end of the cross axis of the last row is aligned with the end of the cross axis of the container. All subsequent rows are aligned with the previous row. - **center**: All rows are packed toward the center of the cross axis. Rows are close to each other and aligned with the center of the container. The spacing between the start edge of the container's cross axis and the first row is equal to the spacing between the end edge of the container's cross axis and the last row. - **space-between**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The start and end edges of the container's cross axis are aligned with the edges of the first and last rows, respectively. - **space-around**: All rows are evenly distributed in the container. The spacing between two adjacent rows is the same. The spacing between the start edge of the container's cross axis and the first row and that between the end edge and the last row are half of the spacing between two adjacent rows.|
-| display | string | flex | No | Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows: - **flex**: flexible layout - **grid**: grid layout - **none**: not rendered - **inline-flex**9+: layout with the **flex** and **inline-block** effects.|
| grid-template-[columns\|rows] | string | 1 row, 1 column | No | Number of rows and columns in the current grid layout. If this attribute is not set, one row and one column are displayed by default. This attribute is valid only when **display** is set to **grid**. Below are some example values of **grid-template-columns**: - **50px 100px 60px**: There are three columns. The first column is 50 px, the second column is 100 px, and the third column is 60 px. - **1fr 1fr 2fr**: There are three columns, and the width allowed by the parent component is divided into four equal shares. The first column occupies one share, the second column occupies one share, and the third column occupies two shares. - **30% 20% 50%**: There are three columns. The first column occupies 30% of the total width allowed by the parent component, the second column occupies 20%, and the third column occupies 50%. - **repeat (2,100px)**: There are two columns. The first column is 100 px, and the second column is 100 px. - **repeat(auto-fill,100px)**5+: Each column is 100 px and repeats to fill the cross axis. The number of columns is calculated based on the column size and the cross axis size. - **auto 1fr 1fr**: There are three columns. The first column is adaptive to the width required by its child components. The remaining space is divided into two equal shares, one share occupied by each of the rest two columns.|
| grid-[columns\|rows]-gap | <length> | 0 | No | Size of the gap between two consecutive rows or columns in a grid layout. You can also use **grid-gap** to set the same size of the gap between rows and columns. This attribute is valid only when **display** is set to **grid**.|
| grid-row-[start\|end] | number | - | No | Start and end row numbers of the current item in the grid layout. This attribute is valid only when the item's parent component is a **\
** container whose **display** style is set to **grid**.|
@@ -47,6 +46,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
## Events
+
+
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
@@ -246,26 +247,28 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
```html
```
@@ -370,12 +373,13 @@ In addition to the [universal methods](js-components-common-methods.md), the fol
justify-content: center;
align-items: center;
width: 454px;
- height: 454px;}
- .content{
+ height: 454px;
+ }
+ .content {
width: 400px;
height: 400px;
background-color: aqua;
- margin:30px
+ margin: 30px;
}
```
diff --git a/en/application-dev/reference/arkui-ts/figures/blankmin.png b/en/application-dev/reference/arkui-ts/figures/blankmin.png
new file mode 100644
index 0000000000000000000000000000000000000000..d37582ff571d36ecc41539453192955b84481765
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/blankmin.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422926.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422926.png
new file mode 100644
index 0000000000000000000000000000000000000000..eee85cabf8cd66d840f9579e0b60973a50fa550d
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174422926.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif
new file mode 100644
index 0000000000000000000000000000000000000000..639261bd9e9997074cd45491807a58bb79a5def2
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174582844.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001186807708.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001186807708.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c2468d1491af049673574a097a107a3e6c1b417d
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001186807708.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001209874754.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001209874754.gif
index e83d5b33f9b10e586aa2288f6271c51fd79fab47..69f9763394cc6406b29ba8710b73c6441df29048 100644
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001209874754.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001209874754.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif
new file mode 100644
index 0000000000000000000000000000000000000000..38ffa5ca3c66dc3852f3a6045789473e8bdb0c41
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001210353788.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898474.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898474.gif
deleted file mode 100644
index 5db399f79a02f496aea43ff72e55e29a0bb05a9a..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898474.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058508.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058508.gif
deleted file mode 100644
index 502888c25bb21b3803858f9c436cca23d9dc29d0..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212058508.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218468.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218468.gif
deleted file mode 100644
index e97b2a2406059ce3af77ade27bb634845d807726..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212218468.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001241668363.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001241668363.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fba237dad5fc43609bb5ebcf6b0310328800d9f6
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001241668363.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251007721.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251007721.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3c7f41bb43465b26d9545482a6c42621a42b360b
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001251007721.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978387.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978387.gif
deleted file mode 100644
index 30e89347337d9e358d4b823c7658490e032eb435..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001256978387.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png
deleted file mode 100644
index f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058407.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/focus.png b/en/application-dev/reference/arkui-ts/figures/focus.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcd16fbecdce07e04721915ff9d9777590d39e7a
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/focus.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/gridSpan.png b/en/application-dev/reference/arkui-ts/figures/gridSpan.png
new file mode 100644
index 0000000000000000000000000000000000000000..80b67bee5bc99e753a2176ce2544b572ca41243e
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/gridSpan.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/mouse.png b/en/application-dev/reference/arkui-ts/figures/mouse.png
new file mode 100644
index 0000000000000000000000000000000000000000..28baf4e713b69b4bea0e9ed3498a4a2ce12fc2b3
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/mouse.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/mouse1.png b/en/application-dev/reference/arkui-ts/figures/mouse1.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc3ea1fb958f1de66f6310e22b6163ebfbfb7494
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/mouse1.png differ
diff --git a/en/application-dev/reference/arkui-ts/figures/swiper.gif b/en/application-dev/reference/arkui-ts/figures/swiper.gif
new file mode 100644
index 0000000000000000000000000000000000000000..692ac1398e1c98217a7466c66b1a3b873165a7ee
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/swiper.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/text_clock.png b/en/application-dev/reference/arkui-ts/figures/text_clock.png
deleted file mode 100644
index 85b17585ac7fbb72297c5757f1b1118c27e7d8c9..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/text_clock.png and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/touchtarget.gif b/en/application-dev/reference/arkui-ts/figures/touchtarget.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c1ded83ee8eb7d8f7a80c516f205c695570a86ef
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/touchtarget.gif differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
index 0e378d40462e6913ac5bc79f1b5c157803f17ac7..c624d6b2c04cf07d34927f0e7c02ed9668136bbb 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
@@ -1,6 +1,6 @@
# Blank
-The **\** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent component is **\** or **\**.
+The **\** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent container is **\** or **\**.
> **NOTE**
>
@@ -32,7 +32,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
## Example
-
+### Example 1
+The sample below shows how the **\** component fills the empty spaces in the container in landscape and portrait modes.
```ts
// xxx.ets
@Entry
@@ -57,3 +58,36 @@ Portrait mode
Landscape mode
+
+
+### Example 2
+Set the **min** parameter when the width of the parent container of the **\** component is not set.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct BlankExample {
+ build() {
+ Column({ space: 20 }) {
+ // If the width of the parent container is not set, the \ component becomes invalid. In this case, you can set min to specify the minimum width of the \ component.
+ Row() {
+ Text('Bluetooth').fontSize(18)
+ Blank().color(Color.Yellow)
+ Toggle({ type: ToggleType.Switch })
+ }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
+
+ Row() {
+ Text('Bluetooth').fontSize(18)
+ // Set the minimum width to 160.
+ Blank('160').color(Color.Yellow)
+ Toggle({ type: ToggleType.Switch })
+ }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
+
+ }.backgroundColor(0xEFEFEF).padding(20).width('100%')
+ }
+}
+```
+If the width of the parent container is not set, set **min** to specify the minimum width of the **\** component.
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
index 6357355ed655ec3851c656481e5b471c9e1076b9..64b116778047e73a49f79c4b4d859cab089fb6b4 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md
@@ -110,4 +110,4 @@ struct CheckboxExample {
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
index 51a62927be1375bf3564a4753200e48565d2f27d..e49501637b426dddbc21258651ba5ae556544d3d 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-divider.md
@@ -41,28 +41,63 @@ The universal events are not supported.
@Component
struct DividerExample {
build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
+ Column() {
+ // Use horizontal dividers.
Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
- Row().width('100%').height(40).backgroundColor(0xF1F3F5)
- Divider()
- Row().width('100%').height(40).backgroundColor(0xF1F3F5)
-
+ List() {
+ ForEach([1, 2, 3], (item) => {
+ ListItem() {
+ Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
+ }.width(244).height(48)
+ }, item => item.toString())
+ }.padding({ left: 24, bottom: 8 })
+
+ Divider().strokeWidth(8).color('#F1F3F5')
+ List() {
+ ForEach([4, 5], (item) => {
+ ListItem() {
+ Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
+ }.width(244).height(48)
+ }, item => item.toString())
+ }.padding({ left: 24, top: 8 })
+
+ // Use vertical dividers.
Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
- Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
- Text('bravery')
- Divider().vertical(true).margin(20).height(15)
- Text('effort')
- Divider().vertical(true).margin(20).height(15)
- Text('upward')
- }.width(250)
-
- Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC)
- Row().width('100%').height(40).backgroundColor(0xF1F3F5)
- Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round)
- Row().width('100%').height(40).backgroundColor(0xF1F3F5)
- }.width('100%').height(350).padding({ left: 35, right: 35, top: 35 })
+ Column() {
+ Column() {
+ Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
+ Row() {
+ Button('Button')
+ .width(136)
+ .height(22)
+ .fontSize(16)
+ .fontColor('#007DFF')
+ .fontWeight(500)
+ .backgroundColor(Color.Transparent)
+ Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
+ Button('Button')
+ .width(136)
+ .height(22)
+ .fontSize(16)
+ .fontColor('#007DFF')
+ .fontWeight(500)
+ .backgroundColor(Color.Transparent)
+ }.margin({ top: 17 })
+ }
+ .width(336)
+ .height(152)
+ .backgroundColor('#FFFFFF')
+ .borderRadius(24)
+ .padding(24)
+ }
+ .width('100%')
+ .height(168)
+ .backgroundColor('#F1F3F5')
+ .justifyContent(FlexAlign.Center)
+ .margin({ top: 8 })
+ }.width('100%').padding({ top: 24 })
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
index 0fb1a2b4f69a97ff126bbf97dd7f9390a7f2bc19..c1a9e51ca723ae92a530c9df98798acca7418d2e 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-select.md
@@ -12,9 +12,9 @@ Not supported
## APIs
-Select(options: Array\)
+Select(options: Array\<[SelectOption](#selectoption)\>)
-**SelectOption**
+## SelectOption
| Name| Type | Mandatory| Description |
| ------ | ----------------------------------- | ---- | -------------- |
@@ -27,20 +27,20 @@ Select(options: Array\)
| ----------------------- | ------------------------------------- | --------------------------------------------- |
| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | Text of the drop-down button. |
-| font | [Font](ts-types.md#font) | Text font of the drop-down button. |
+| font | [Font](ts-types.md#font) | Text font of the drop-down button. |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button. |
| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box. |
-| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. |
+| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. |
| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box. |
| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box. |
-| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. |
+| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. |
| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box. |
## Events
-| Name | Description |
-| ---------------------------------------------------------- | ------------------------------------------------------------ |
-| onSelect(callback: (index: number, value?:string) => void) | Invoked when an option in the drop-down list box is selected. **index**: index of the selected option. **value**: value of the selected option. |
+| Name | Description |
+| ----------------------------------------------------------- | ------------------------------------------------------------ |
+| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected. **index**: index of the selected option. **value**: value of the selected option. |
## Example
@@ -51,19 +51,20 @@ Select(options: Array\)
struct SelectExample {
build() {
Column() {
- Select([{ value: 'aaa', icon: "/common/1.png" },
- { value: 'bbb', icon: "/common/2.png" },
- { value: 'ccc', icon: "/common/3.png" },
- { value: 'ddd', icon: "/common/4.png" }])
+ Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
+ { value: 'bbb', icon: "/common/public_icon.svg" },
+ { value: 'ccc', icon: "/common/public_icon.svg" },
+ { value: 'ddd', icon: "/common/public_icon.svg" }])
.selected(2)
- .value('TTT')
- .font({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
- .selectedOptionFont({ size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
- .optionFont({ size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
+ .value('TTTTT')
+ .font({ size: 16, weight: 500 })
+ .fontColor('#182431')
+ .selectedOptionFont({ size: 16, weight: 400 })
+ .optionFont({ size: 16, weight: 400 })
.onSelect((index: number) => {
- console.info("Select:" + index)
+ console.info('Select:' + index)
})
- }
+ }.width('100%')
}
}
```
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
index ffb479fd90217da2d88543706e2913f5cf04850f..345d24c0d915ca5d0acf747ea829d3b567f2d152 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
@@ -1,6 +1,6 @@
# TextClock
-The **** component displays the current system time in text format for different time zones. The time is accurate to seconds.
+The **\** component displays the current system time in text format for different time zones. The time is accurate to seconds.
>**NOTE**
>
@@ -19,7 +19,7 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| Name | Type | Mandatory | Description |
| -------------- | -------- | ------ | --------------------------------------------------------------------------- |
| timeZoneOffset | number | No | Time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region. If the set value is not within the valid range, the time zone offset of the current system will be used. Default value: time zone offset of the current system|
-| controller | [TextClockController](#textclockcontroller) | No | Controller to control the status of the **** component. |
+| controller | [TextClockController](#textclockcontroller) | No | Controller to control the status of the **** component.|
## Attributes
@@ -27,7 +27,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| ------ | --------------- | ------------------------------------------------------------ |
-| format | string | Time format. The date separator is a slash (/), and the time separator is a colon (:). For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd, and hhmmss is displayed as hh:mm:ss. Only one digit is required for the time format. This means that hhmmss is equivalent to hms. Supported time format strings: - YYYY/yyyy: four-digit year - YY/yy: last two digits of year - M: one-digit month (MM for two-digit month, for example, 01) - d: one-digit day (dd for two-digit day, for example, 01) - D: number of days that have elapsed in the year - H: 24-hour format - h: 12-hour format - m: minute - s: second - SSS: millisecond Default value: **'hms'**|
+| format | string | Time format. The date separator is a slash (/), and the time separator is a colon (:). For example, yyyyMMdd and yyyy-MM-dd are displayed as yyyy/MM/dd, and hhmmss is displayed as hh:mm:ss. Only one digit is required for the time format. This means that **"hhmmss"** is equivalent to **"hms"**. Supported time format strings: - YYYY/yyyy: four-digit year - YY/yy: last two digits of year - M: one-digit month (MM for two-digit month, for example, 01) - d: one-digit day (dd for two-digit day, for example, 01) - D: number of days that have elapsed in the year - H: 24-hour format - h: 12-hour format - m: minute - s: second - SSS: millisecond If the specified format does not match the supported formats, the default value is used. Default value: **'hms'**|
## Events
@@ -35,16 +35,16 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Description |
| -------------------------------------------- | ------------------------------------------------------------ |
-| onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum. - **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
+| onDateChange(event: (value: number) => void) | Called when the time changes in seconds at minimum. - **value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## TextClockController
-Defines the controller of the **** component, which can be bound to the component for status control. A **\** component can be bound to only one controller.
+Implements the controller of the **\** component. You can bind the controller to the component to control its start and stop. A **\** component can be bound to only one controller.
### Objects to Import
```ts
-controller: TextClockController = new TextClockController()
+controller: TextClockController = new TextClockController();
```
### start
@@ -59,7 +59,6 @@ stop()
Stops the **** component.
-
## Example
```ts
@@ -67,8 +66,8 @@ Stops the **** component.
@Component
struct Second {
@State accumulateTime: number = 0
+ // Objects to import
controller: TextClockController = new TextClockController()
-
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime)
@@ -84,10 +83,12 @@ struct Second {
Button("start TextClock")
.margin({ bottom: 10 })
.onClick(() => {
+ // Start the text clock.
this.controller.start()
})
Button("stop TextClock")
.onClick(() => {
+ // Stop the text clock.
this.controller.stop()
})
}
@@ -96,4 +97,4 @@ struct Second {
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
index 8f5ee5b0d71c286b44d098a47f38ab436012b4d5..a4b2b64dd884104060b94f874f2c7bc0255f7429 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md
@@ -4,43 +4,39 @@ The **\** component displays timing information and is controlled in
> **NOTE**
>
-> 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.
## Child Components
Not supported
-
## APIs
TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
**Parameters**
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| isCountDown | boolean | No| Whether to count down. Default value: **false** |
-| count | number | No| Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**. If the value of **count** is less than or equal to 0, the default value is used. If the value of **count** is greater than 0, it is used. Default value: **60000** |
-| controller | [TextTimerController](#texttimercontroller) | No| **\** controller.|
+| Name | Type | Mandatory | Description |
+| ----------- | -------- | -------- | -------- |
+| isCountDown | boolean | No | Whether to count down. Default value: **false**|
+| count | number | No | Countdown time, in milliseconds. This parameter is valid only when **isCountDown** is set to **true**. The maximum value is 86400000 ms (24 hours). In the case of 0 < Value of **count** < 86400000, the value of **count** is used as the initial countdown value. In other cases, the default value is used as the initial countdown value. Default value: **60000**|
+| controller | [TextTimerController](#texttimercontroller) | No | **\** controller.|
## Attributes
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| format | string | Custom format. The value must contain at least one of the following keywords: **hh**, **mm**, **ss**, and **ms**. Default value: **'hh:mm:ss.ms'** |
-
+| Name | Type | Description |
+| -------- | ---------------------- | ---------------------- |
+| format | string | Custom format. The value must contain at least one of the following keywords: **HH**, **mm**, **ss**, and **SS**. If the specified date format is yy, MM, or dd, the default value is used instead. Default value: **'HH:mm:ss.SS'**|
## Events
-| Name| Description|
-| -------- | -------- |
-| onTimer(event: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes. **utc**: currently displayed time, in milliseconds. **elapsedTime**: elapsed time of the timer, in milliseconds.|
-
+| Name | Description |
+| ---------------------------------------- | ---------------------------------------- |
+| onTimer(event: (utc: number, elapsedTime: number) => void) | Triggered when the time text changes. **utc**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch. **elapsedTime**: elapsed time of the timer, in milliseconds.|
## TextTimerController
-Defines the controller for controlling the **\** component. A **\** component can be bound to only one controller.
+Implements the controller for controlling the **\** component. A **\** component can be bound to only one controller.
### Objects to Import
@@ -67,7 +63,6 @@ reset()
Resets the timer.
-
## Example
```ts
@@ -76,11 +71,11 @@ Resets the timer.
@Component
struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController()
- @State format: string = 'hh:mm:ss.ms'
+ @State format: string = 'mm:ss.SS'
build() {
Column() {
- TextTimer({controller: this.textTimerController})
+ TextTimer({ controller: this.textTimerController, isCountDown: true, count: 30000 })
.format(this.format)
.fontColor(Color.Black)
.fontSize(50)
@@ -89,14 +84,14 @@ struct TextTimerExample {
})
Row() {
Button("start").onClick(() => {
- this.textTimerController.start();
- });
+ this.textTimerController.start()
+ })
Button("pause").onClick(() => {
- this.textTimerController.pause();
- });
+ this.textTimerController.pause()
+ })
Button("reset").onClick(() => {
- this.textTimerController.reset();
- });
+ this.textTimerController.reset()
+ })
}
}
}
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 de1a878e90a7ba6fd18cd399e8e008b08da35fe1..e8f57f0aebcdf81b7f4a5227b76e8795d79543fb 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -50,14 +50,7 @@ SideBarContainer( type?: SideBarContainerType )
| top | number | No| Spacing between the sidebar control button and the top of the container. Default value: **48**, in vp|
| width | number | No| Width of the sidebar control button. Default value: **32**, in vp|
| height | number | No| Height of the sidebar control button. Default value: **32**, in vp|
-| icons | { shown: string \| PixelMap \| [Resource](ts-types.md#resource) , hidden: string \| PixelMap \| [Resource](ts-types.md#resource) , switching?: string \| PixelMap \| [Resource](ts-types.md#resource) } | No| Icons of the sidebar control button. - **shown**: icon of the control button when the sidebar is shown. - **hidden**: icon of the control button when the sidebar is hidden. - **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
-
-## SideBarPosition9+
-
-| Name| Description|
-| -------- | -------- |
-| Start | The sidebar is on the left side of the container.|
-| End | The sidebar is on the right side of the container.|
+| icons | { shown: string \| PixelMap \| [Resource](ts-types.md) , hidden: string \| PixelMap \| [Resource](ts-types.md) , switching?: string \| PixelMap \| [Resource](ts-types.md) } | No| Icons of the sidebar control button. - **shown**: icon of the control button when the sidebar is shown. - **hidden**: icon of the control button when the sidebar is hidden. - **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
## SideBarPosition9+
diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
index a2f9888f7fb5f6fc460a838e3db04ddc5b67a7d8..24021435e468e24216d765a0d60ffad2e2d3824c 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -40,9 +40,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set. Default value: **SwiperDisplayMode.Stretch**|
| cachedCount8+ | number | Number of child components to be cached. Default value: **1** |
| disableSwipe8+ | boolean | Whether to disable the swipe feature. Default value: **false** |
-| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the interpolation calculation module. Default value: **Curve.Ease**|
-| indicatorStyle8+ | { left?: [Length](ts-types.md#length), top?: [Length](ts-types.md#length), right?: [Length](ts-types.md#length), bottom?: [Length](ts-types.md#length), size?: [Length](ts-types.md#length), mask?: boolean, color?: [ResourceColor](ts-types.md#resourcecolor), selectedColor?: [ResourceColor](ts-types.md#resourcecolor) } | Style of the navigation dots indicator. \- **left**: distance between the navigation dots indicator and the left edge of the **\** component. \- **top**: distance between the navigation dots indicator and the top edge of the **\** component. \- **right**: distance between the navigation dots indicator and the right edge of the **\** component. \- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\** component. \- **size**: diameter of the navigation dots indicator. \- **mask**: whether to enable the mask for the navigation dots indicator. \- **color**: color of the navigation dots indicator. \- **selectedColor**: color of the selected navigation dot.|
-| displayCount8+ | number\|string | Number of elements to display. Default value: **1** |
+| curve8+ | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module. Default value: **Curve.Ease**|
+| indicatorStyle8+ | { left?: [Length](ts-types.md#length), top?: [Length](ts-types.md#length), right?: [Length](ts-types.md#length), bottom?: [Length](ts-types.md#length), size?: [Length](ts-types.md#length), mask?: boolean, color?: [ResourceColor](ts-types.md), selectedColor?: [ResourceColor](ts-types.md) } | Style of the navigation dots indicator. \- **left**: distance between the navigation dots indicator and the left edge of the **\** component. \- **top**: distance between the navigation dots indicator and the top edge of the **\** component. \- **right**: distance between the navigation dots indicator and the right edge of the **\** component. \- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\** component. \- **size**: diameter of the navigation dots indicator. \- **mask**: whether to enable the mask for the navigation dots indicator. \- **color**: color of the navigation dots indicator. \- **selectedColor**: color of the selected navigation dot.|
+| displayCount8+ | number\|string | Number of elements to display per page. Default value: **1** |
| effectMode8+ | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**. Default value: **EdgeEffect.Spring**|
## SwiperDisplayMode
@@ -52,17 +52,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Stretch | The slide width of the **\** component is equal to the width of the component.|
| AutoLinear | The slide width of the **\** component is equal to that of the child component with the maximum width.|
-## EdgeEffect
-
-| Name | Description |
-| ------ | ------------------------------------------------------------------------- |
-| Spring | Spring effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger. |
-| Fade | Fade effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes. |
-| None | No effect. When sliding to one edge, the component cannot move beyond the bounds. |
-
## SwiperController
-Controller of the **\** component. You can bind this object to the **\** component and use it to control page switching.
+Controller of the **\** component. You can bind this object to the **** component and use it to control page switching.
### showNext
@@ -86,7 +78,7 @@ Stops an animation.
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
-| callback | () => void | Yes | Callback invoked when the animation stops.|
+| callback | () => void | No | Callback invoked when the animation stops.|
## Events
@@ -96,11 +88,11 @@ onChange(event: (index: number) => void)
Triggered when the index of the currently displayed child component changes.
-**Parameters**
+**Return value**
-| Name | Type | Mandatory.| Description|
-| --------- | ---------- | ------ | -------- |
-| index | number | Yes | Index of the currently displayed element.|
+| Name | Type | Description|
+| --------- | ---------- | -------- |
+| index | number | Index of the currently displayed element.|
## Example
@@ -149,36 +141,36 @@ struct SwiperExample {
Column({ space: 5 }) {
Swiper(this.swiperController) {
LazyForEach(this.data, (item: string) => {
- Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20)
+ Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
}, item => item)
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(4000)
- .indicator(true) // Navigation dots are enabled by default.
- .loop(false) // Loop playback is enabled by default.
+ .indicator(true)
+ .loop(true)
.duration(1000)
- .vertical(false) // Horizontal swiping is enabled by default.
.itemSpace(0)
- .curve(Curve.Linear) // Animation curve.
+ .curve(Curve.Linear)
.onChange((index: number) => {
console.info(index.toString())
})
- Flex({ justifyContent: FlexAlign.SpaceAround }) {
- Button('next')
+ Row({ space: 12 }) {
+ Button('showNext')
.onClick(() => {
this.swiperController.showNext()
})
- Button('preview')
+ Button('showPrevious')
.onClick(() => {
this.swiperController.showPrevious()
})
- }
- }.margin({ top: 5 })
+ }.margin(5)
+ }.width('100%')
+ .margin({ top: 5 })
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
index 63f0e8300b8530cc0e7404cfb881ba3eff5d5d03..c3db1cb598e80cd0b907f2eba3188cd0e23c712d 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
@@ -7,10 +7,6 @@ An action sheet is a dialog box that displays actions a user can take.
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-## Required Permissions
-
-None
-
## ActionSheet.show
@@ -22,21 +18,21 @@ Defines and shows the action sheet.
| Name | Type | Mandatory | Description |
| ---------- | -------------------------- | ------- | ----------------------------- |
-| title | string \| [Resource](ts-types.md#resource) | Yes | Title of the dialog box.|
-| message | string \| [Resource](ts-types.md#resource) | Yes | Content of the dialog box. |
+| title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.|
+| message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. |
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked. Default value: **true**|
-| confirm | { value: string \| [Resource](ts-types.md#resource), action: () => void } | No | Text content of the confirm button and callback upon button clicking. Default value: **value**: button text. **action**: callback upon button clicking.|
+| confirm | { value: [ResourceStr](ts-types.md#resourcestr), action: () => void } | No | Text content of the confirm button and callback upon button clicking. Default value: **value**: button text. **action**: callback upon button clicking.|
| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
-| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Default**|
-| offset | { dx: Length, dy: Length } | No | Offset of the dialog box relative to the alignment position. Default value: **{ dx: 0, dy: 0 }** |
+| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Bottom**|
+| offset | { dx: Length, dy: Length } | No | Offset of the dialog box relative to the alignment position. Default value: { dx: 0, dy: 0 } |
| sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
## SheetInfo
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
-| title | string \| [Resource](ts-types.md#resource) | Yes | Sheet text. |
-| icon | string \| [Resource](ts-types.md#resource) | No | Sheet icon. By default, no icon is displayed. |
+| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Sheet text. |
+| icon | [ResourceStr](ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. |
| action | ()=>void | Yes | Callback when the sheet is selected.|
@@ -44,11 +40,9 @@ Defines and shows the action sheet.
```ts
-// xxx.ets
@Entry
@Component
struct ActionSheetExample {
-
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Click to Show ActionSheet')
@@ -56,29 +50,35 @@ struct ActionSheetExample {
ActionSheet.show({
title: 'ActionSheet title',
message: 'message',
+ autoCancel: true,
confirm: {
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
}
},
+ cancel: () => {
+ console.log('actionSheet canceled')
+ },
+ alignment: DialogAlignment.Bottom,
+ offset: { dx: 0, dy: -10 },
sheets: [
{
title: 'apples',
action: () => {
- console.error('apples')
+ console.log('apples')
}
},
{
title: 'bananas',
action: () => {
- console.error('bananas')
+ console.log('bananas')
}
},
{
title: 'pears',
action: () => {
- console.error('pears')
+ console.log('pears')
}
}
]
@@ -90,4 +90,4 @@ struct ActionSheetExample {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
index b2d126bed0efa8c94de25f40152c8640574f63d1..3588277a411f29ff33929ecd92d501e1686c1d00 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
@@ -11,7 +11,7 @@ You can set the text content and response callback for an alert dialog box.
| Name | Type | Description|
| ---- | --------------- | -------- |
-| show | AlertDialogParamWithConfirm \| AlertDialogParamWithButtons | Shows the **\** component. |
+| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **** component.|
## AlertDialogParamWithConfirm
| Name | Type | Mandatory | Description |
@@ -19,11 +19,11 @@ You can set the text content and response callback for an alert dialog box.
| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box.|
| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box.|
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked. Default value: **true**|
-| confirm | { value: string \| [Resource](ts-types.md#resource), fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource), backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource), action: () => void } | No | Text content, text color, background color, and click callback of the confirm button.|
+| confirm | { value: [ResourceStr](ts-types.md#resourcestr), fontColor?: [ResourceColor](ts-types.md#resourcecolor), backgroundColor?: [ResourceColor](ts-types.md#resourcecolor), action: () => void } | No | Text content, text color, background color, and click callback of the confirm button.|
| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked.|
-| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Default**|
+| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Default**|
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.|
-| gridCount | number | No | Number of grid columns occupied by the width of the dialog box. |
+| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.|
## AlertDialogParamWithButtons
| Name | Type | Mandatory | Description |
@@ -31,12 +31,27 @@ You can set the text content and response callback for an alert dialog box.
| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box. |
| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box. |
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked. Default value: **true** |
-| primaryButton | { value: string \| [Resource](ts-types.md#resource), fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource), backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource), action: () => void; } | No| Text content, text color, background color, and click callback of the primary button.|
-| secondaryButton | { value: string \| [Resource](ts-types.md#resource), fontColor?: Color \| number \| string \| [Resource](ts-types.md#resource), backgroundColor?: Color \| number \| string \| [Resource](ts-types.md#resource), action: () => void; } | No | Text content, text color, background color, and click callback of the primary button.|
+| primaryButton | { value: [ResourceStr](ts-types.md#resourcestr), fontColor?: [ResourceColor](ts-types.md#resourcecolor), backgroundColor?: [ResourceColor](ts-types.md#resourcecolor), action: () => void; } | No| Text content, text color, background color, and click callback of the primary button.|
+| secondaryButton | { value: [ResourceStr](ts-types.md#resourcestr), fontColor?: [ResourceColor](ts-types.md#resourcecolor), backgroundColor?: [ResourceColor](ts-types.md#resourcecolor), action: () => void; } | No | Text content, text color, background color, and click callback of the primary button.|
| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
-| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Default**|
+| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction. Default value: **DialogAlignment.Default**|
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.|
-| gridCount | number | No | Number of grid columns occupied by the width of the dialog box. |
+| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.|
+
+## DialogAlignment
+
+| Name | Description |
+| ------------------------ | ------- |
+| Top | Vertical top alignment.|
+| Center | Vertical center alignment.|
+| Bottom | Vertical bottom alignment.|
+| Default | Default alignment. |
+| TopStart8+ | Top left alignment. |
+| TopEnd8+ | Top right alignment. |
+| CenterStart8+ | Center left alignment. |
+| CenterEnd8+ | Center right alignment. |
+| BottomStart8+ | Bottom left alignment. |
+| BottomEnd8+ | Bottom right alignment. |
## Example
@@ -45,7 +60,6 @@ You can set the text content and response callback for an alert dialog box.
@Entry
@Component
struct AlertDialogExample {
-
build() {
Column({ space: 5 }) {
Button('one button dialog')
@@ -54,6 +68,10 @@ struct AlertDialogExample {
{
title: 'title',
message: 'text',
+ autoCancel: true,
+ alignment: DialogAlignment.Bottom,
+ offset: { dx: 0, dy: -20 },
+ gridCount: 3,
confirm: {
value: 'button',
action: () => {
@@ -65,7 +83,7 @@ struct AlertDialogExample {
}
}
)
- })
+ })
.backgroundColor(0x317aff)
Button('two button dialog')
.onClick(() => {
@@ -73,6 +91,10 @@ struct AlertDialogExample {
{
title: 'title',
message: 'text',
+ autoCancel: true,
+ alignment: DialogAlignment.Bottom,
+ gridCount: 4,
+ offset: { dx: 0, dy: -20 },
primaryButton: {
value: 'cancel',
action: () => {
@@ -90,10 +112,10 @@ struct AlertDialogExample {
}
}
)
- }).backgroundColor(0x317aff)
+ }).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
index e8488281d24a6b93a24e2fbfceafccba5a657e4e..cdede4871a208b9007ca23842e293d309b1c1481 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
@@ -4,7 +4,8 @@ A date picker dialog box is a dialog box that allows users to select a date from
> **NOTE**
>
-> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+
## DatePickerDialog.show
@@ -12,84 +13,71 @@ show(options?: DatePickerDialogOptions)
Shows a date picker dialog box.
-- DatePickerDialogOptions
- | Name| Type| Mandatory| Default Value| Description|
- | -------- | -------- | -------- | -------- | -------- |
- | start | Date | No| Date('1970-1-1') | Start date of the picker.|
- | end | Date | No| Date('2100-12-31') | End date of the picker.|
- | selected | Date | No| Current system date| Date of the selected item.|
- | lunar | boolean | No| false | Whether to display the lunar calendar.|
- | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
- | onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
- | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
+**DatePickerDialogOptions**
+
+| Name| Type| Mandatory| Default Value| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| start | Date | No| Date('1970-1-1') | Start date of the picker.|
+| end | Date | No| Date('2100-12-31') | End date of the picker.|
+| selected | Date | No| Current system date| Selected date.|
+| lunar | boolean | No| false | Whether to display the lunar calendar.|
+| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the OK button in the dialog box is clicked.|
+| onCancel | () => void | No| - | Callback invoked when the Cancel button in the dialog box is clicked.|
+| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult)) => void | No| - | Callback invoked when the selected item in the picker changes.|
## Example
-### Date Picker Sample Code (With Lunar Calendar)
```ts
// xxx.ets
@Entry
@Component
-struct DatePickerDialogExample01 {
- @State isLunar: boolean = true
- selectedDate: Date = new Date("2000-1-1")
+struct DatePickerDialogExample {
+ selectedDate: Date = new Date("2010-1-1")
build() {
- Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
- justifyContent: FlexAlign.Center }) {
- Button("DatePickerDialog").onClick(() => {
- DatePickerDialog.show({
- start: new Date("2000-1-1"),
- end: new Date("2005-1-1"),
- selected: this.selectedDate,
- lunar: this.isLunar,
- onAccept: (value: DatePickerResult) => {
- this.selectedDate.setFullYear(value.year, value.month, value.day)
- console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
- },
- onCancel: () => {
- console.info("DatePickerDialog:onCancel()")
- },
- onChange: (value: DatePickerResult) => {
- console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
- }
+ Column() {
+ Button("DatePickerDialog")
+ .margin(20)
+ .onClick(() => {
+ DatePickerDialog.show({
+ start: new Date("2000-1-1"),
+ end: new Date("2100-12-31"),
+ selected: this.selectedDate,
+ onAccept: (value: DatePickerResult) => {
+ // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed.
+ this.selectedDate.setFullYear(value.year, value.month, value.day)
+ console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+ },
+ onCancel: () => {
+ console.info("DatePickerDialog:onCancel()")
+ },
+ onChange: (value: DatePickerResult) => {
+ console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+ }
+ })
})
- })
- }
- }
-}
-```
-### Date Picker Sample Code (No Lunar Calendar)
-```ts
-// xxx.ets
-@Entry
-@Component
-struct DatePickerDialogExample02 {
- @State isLunar: boolean = false
- selectedDate: Date = new Date("2000-1-1")
- build() {
- Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
- justifyContent: FlexAlign.Center }) {
- Button("DatePickerDialog").onClick(() => {
- DatePickerDialog.show({
- start: new Date("2000-1-1"),
- end: new Date("2005-1-1"),
- selected: this.selectedDate,
- lunar: this.isLunar,
- onAccept: (value: DatePickerResult) => {
- this.selectedDate.setFullYear(value.year, value.month, value.day)
- console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
- },
- onCancel: () => {
- console.info("DatePickerDialog:onCancel()")
- },
- onChange: (value: DatePickerResult) => {
- console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
- }
+ Button("Lunar DatePickerDialog")
+ .margin(20)
+ .onClick(() => {
+ DatePickerDialog.show({
+ start: new Date("2000-1-1"),
+ end: new Date("2100-12-31"),
+ selected: this.selectedDate,
+ lunar: true,
+ onAccept: (value: DatePickerResult) => {
+ this.selectedDate.setFullYear(value.year, value.month, value.day)
+ console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
+ },
+ onCancel: () => {
+ console.info("DatePickerDialog:onCancel()")
+ },
+ onChange: (value: DatePickerResult) => {
+ console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
+ }
+ })
})
- })
- }
+ }.width('100%')
}
}
```
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
index 744e51cf56d2464e2a07c20dd6e220f42f87b6f0..fed5193d5ea62277bf3ed86f4dfcdb5e18f56299 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
@@ -4,7 +4,8 @@ A text picker dialog box is a dialog box that allows users to select text from t
> **NOTE**
>
-> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
## TextPickerDialog.show
@@ -12,22 +13,24 @@ show(options?: TextPickerDialogOptions)
Shows a text picker in the given settings.
-- TextPickerDialogOptions
- | Name | Type | Mandatory | Default Value | Description |
- | ----------------------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
- | range | string[] \| [Resource](ts-types.md#resource) | Yes | - | Data selection range of the picker. |
- | selected | number | No | 0 | Index of the selected item in the range. |
- | value | string | No | - | Value of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead. |
- | defaultPickerItemHeight | number \| string | No | - | Default height of an item in the picker. |
- | onAccept | (value: TextPickerResult) => void | No | - | Callback invoked when the OK button in the dialog box is clicked. |
- | onCancel | () => void | No | - | Callback invoked when the Cancel button in the dialog box is clicked. |
- | onChange | (value: TextPickerResult) => void | No | - | Callback invoked when the selected item in the picker changes. |
+**TextPickerDialogOptions**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| range | string[] \| [Resource](ts-types.md#resource) | Yes| Data selection range of the picker.|
+| selected | number | No| Index of the selected item. Default value: **0**|
+| value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.|
+| defaultPickerItemHeight | number \| string | No| Height of the picker item.|
+| onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
+| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
+| onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the selected item changes.|
+
+## TextPickerResult
-- TextPickerResult
- | Name | Type | Description |
- | ----- | ------ | ---------------------------------------- |
- | value | string | Value of the selected item. |
- | index | number | Index of the selected item in the range. |
+| Name| Type| Description|
+| -------- | -------- | -------- |
+| value | string | Text of the selected item.|
+| index | number | Index of the selected item in the range.|
## Example
@@ -36,29 +39,31 @@ Shows a text picker in the given settings.
@Entry
@Component
struct TextPickerDialogExample {
- @State select: number = 1
- private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
+ @State select: number = 2
+ private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
build() {
- Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
- justifyContent: FlexAlign.Center }) {
- Button("TextPickerDialog").onClick(() => {
- TextPickerDialog.show({
- range: this.fruits,
- selected: this.select,
- onAccept: (value: TextPickerResult) => {
- console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
- this.select = value.index
- },
- onCancel: () => {
- console.info("TextPickerDialog:onCancel()")
- },
- onChange: (value: TextPickerResult) => {
- console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
- }
+ Column() {
+ Button("TextPickerDialog")
+ .margin(20)
+ .onClick(() => {
+ TextPickerDialog.show({
+ range: this.fruits,
+ selected: this.select,
+ onAccept: (value: TextPickerResult) => {
+ // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed.
+ this.select = value.index
+ console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
+ },
+ onCancel: () => {
+ console.info("TextPickerDialog:onCancel()")
+ },
+ onChange: (value: TextPickerResult) => {
+ console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
+ }
+ })
})
- })
- }
+ }.width('100%')
}
}
```
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
index ba8f9a55944e12d1693f0e82ac91c282a373e814..32e6ad27c45532a17222a78b47cdde2c19dcff5b 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
@@ -1,6 +1,6 @@
# Time Picker Dialog Box
-A time picker dialog box is a dialog box that allows users to select a time from the 24-hour range.
+A time picker dialog box is a dialog box that allows users to select a time from the 24-hour range through scrolling.
> **NOTE**
>
@@ -12,15 +12,16 @@ show(options?: TimePickerDialogOptions)
Shows a time picker dialog box.
-- TimePickerDialogOptions
+**TimePickerDialogOptions**
- | Name| Type| Mandatory| Description|
- | -------- | -------- | -------- | -------- |
- | selected | Date | No| Selected time. Default value: current system time|
- | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default. Default value: **false**|
- | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
- | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
- | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| selected | Date | No| Selected time. Default value: current system time|
+| useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default. Default value: **false**|
+| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
+| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
+| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
## Example
@@ -41,13 +42,13 @@ struct TimePickerDialogExample {
onAccept: (value: TimePickerResult) => {
//Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time.
this.selectTime.setHours(value.hour, value.minute)
- console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
+ console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
- console.info("TimePickerDialog:onCancel()");
+ console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
- console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
+ console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
@@ -59,13 +60,13 @@ struct TimePickerDialogExample {
useMilitaryTime: true,
onAccept: (value: TimePickerResult) => {
this.selectTime.setHours(value.hour, value.minute)
- console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
+ console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
- console.info("TimePickerDialog:onCancel()");
+ console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
- console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
+ console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
index e56ccc4994c44fb21ff1fb1ebd897262aaa63eb1..ff40648d9b60813d533cb79eee781df523738bf8 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
@@ -1,19 +1,20 @@
# Grid
> **NOTE**
-> - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
->
-> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
+>
+> - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>
+> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
## Attributes
-| Name | Type | Description |
-| ----------- | --------------------------| ----------------------------------------------- |
+| Name | Type | Description |
+| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| useSizeType | { xs?: number \| { span: number, offset: number }, sm?: number \| { span: number, offset: number }, md?: number \| { span: number, offset: number }, lg?: number \| { span: number, offset: number } } | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns. If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set. - **xs** indicates that the device width type is **SizeType.XS**. - **sm** indicates that the device width type is **SizeType.SM**. - **md** indicates that the device width type is **SizeType.MD**. - **lg** indicates that the device width type is **SizeType.LG**.|
-| gridSpan | number | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set. **NOTE** If the **span** attribute is set, the component width is determined by the grid layout. Default value: **1**|
-| gridOffset | number | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set. **NOTE** - After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component. - Offset = (Column width + Gap) \* Number of columns. - After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. Default value: **0**|
+| gridSpan | number | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set. **NOTE** If the **span** attribute is set, the component width is determined by the grid layout. Default value: **1**|
+| gridOffset | number | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set. **NOTE** - After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component. - Offset = (Column width + Gap) \* Number of columns. - After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout. Default value: **0**|
## Example
@@ -23,42 +24,76 @@
@Entry
@Component
struct GridContainerExample1 {
+ build() {
+ Column() {
+ Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%')
+ GridContainer() {
+ Row({}) {
+ Row() {
+ Text('Left').fontSize(25)
+ }
+ .useSizeType({
+ xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
+ md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
+ })
+ .height("100%")
+ .backgroundColor(0x66bbb2cb)
- build(){
- GridContainer() {
- Row({}) {
- Row() {
- Text('Left').fontSize(25)
- }
- .useSizeType({
- xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
- md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
- })
- .height("100%")
- .backgroundColor(0x66bbb2cb)
- Row() {
- Text('Center').fontSize(25)
+ Row() {
+ Text('Center').fontSize(25)
+ }
+ .useSizeType({
+ xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
+ md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
+ })
+ .height("100%")
+ .backgroundColor(0x66b6c5d1)
+
+ Row() {
+ Text('Right').fontSize(25)
+ }
+ .useSizeType({
+ xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
+ md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
+ })
+ .height("100%")
+ .backgroundColor(0x66bbb2cb)
}
- .useSizeType({
- xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
- md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
- })
- .height("100%")
- .backgroundColor(0x66b6c5d1)
+ .height(200)
+
+ }
+ .backgroundColor(0xf1f3f5)
+ .margin({ top: 10 })
+
+ // Set the span and offset of the component separately. The resultant effect is equivalent to that achieved by using sm in useSizeType on the device of the sm type.
+ Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
+ GridContainer() {
Row() {
- Text('Right').fontSize(25)
- }
- .useSizeType({
- xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
- md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
- })
- .height("100%")
- .backgroundColor(0x66bbb2cb)
+ Row() {
+ Text('Left').fontSize(25)
+ }
+ .gridSpan(1)
+ .height("100%")
+ .backgroundColor(0x66bbb2cb)
+
+ Row() {
+ Text('Center').fontSize(25)
+ }
+ .gridSpan(2)
+ .gridOffset(1)
+ .height("100%")
+ .backgroundColor(0x66b6c5d1)
+
+ Row() {
+ Text('Right').fontSize(25)
+ }
+ .gridSpan(1)
+ .gridOffset(3)
+ .height("100%")
+ .backgroundColor(0x66bbb2cb)
+ }.height(200)
}
- .height(200)
}
- .backgroundColor(0xf1f3f5)
- .margin({ top: 10 })
}
}
```
@@ -74,3 +109,7 @@ struct GridContainerExample1 {
**Figure 3** Device width type LG
+
+**Figure 4** Setting gridSpan and gridOffset separately has the same effect as using SizeType for a specific device width type
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index 5081637df77e1af0ba15c13c9708c18e397a3d38..cf02ba55e1483bf32b09caf519f603183ea6064e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -12,7 +12,7 @@ A menu – a vertical list of items – can be bound to a component and displaye
| Name | Type | Description |
| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| bindMenu | Array8+ | content: [CustomBuilder](ts-types.md#custombuilder8), responseType: [ResponseType](ts-appendix-enums.md#responsetype8) | Context menu bound to the component, which is displayed when you long-press or right-click the component. Only custom menu items are supported.|
## MenuItem
@@ -25,7 +25,9 @@ A menu – a vertical list of items – can be bound to a component and displaye
## Example
-#### Menu with Textual Menu Items
+### Example 1
+
+Menu with Textual Menu Items
```ts
// xxx.ets
@@ -58,58 +60,59 @@ struct MenuExample {
-#### Menu with Custom Menu Items
+### Example 2
-```ts
-// xxx.ets
-import router from '@system.router';
+Menu with Custom Menu Items
+```ts
@Entry
@Component
struct MenuExample {
+ @State listData: number[] = [0, 0, 0]
+
@Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
- Text('text1')
- .fontSize(20)
- .width(100)
- .height(50)
- .textAlign(TextAlign.Center)
-
- Divider().height(10)
-
- Text('text2')
- .fontSize(20)
- .width(100)
- .height(50)
- .textAlign(TextAlign.Center)
-
- Divider().height(10)
-
- Button('Next')
- .fontSize(20)
- .width(100)
- .height(50)
- .onClick(() => {
- router.push({ uri: 'pages/details' })
- })
-
+ ForEach(this.listData, (item, index) => {
+ Column() {
+ Row() {
+ Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
+ Text(`Menu${index + 1}`).fontSize(20)
+ }
+ .width('100%')
+ .height(30)
+ .justifyContent(FlexAlign.Center)
+ .align(Alignment.Center)
+ .onClick(() => {
+ console.info(`Menu${index + 1} Clicked!`)
+ })
+
+ if (index != this.listData.length - 1) {
+ Divider().height(10).width('80%').color('#ccc')
+ }
+ }.padding(5).height(40)
+ })
}.width(100)
}
build() {
Column() {
Text('click for menu')
+ .fontSize(20)
+ .margin({ top: 20 })
+ .bindMenu(this.MenuBuilder)
}
+ .height('100%')
.width('100%')
- .margin({ top: 5 })
- .bindMenu(this.MenuBuilder)
+ .backgroundColor('#f0f0f0')
}
}
```
-#### Context Menu (Displayed Upon Right-Clicking)
+### Example 3
+
+Context Menu (Displayed Upon Right-Clicking)
```ts
// xxx.ets
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
index 006416faf2aa9bac01ea376a7aeb2f57698e0550..f78135e0ad613113d71fd10c3f054c74cf9cf68e 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md
@@ -2,6 +2,7 @@
You can set the touch target for components that support universal click events, touch events, and gestures.
+
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
@@ -12,22 +13,22 @@ You can set the touch target for components that support universal click events,
| Name | Type | Description |
| -------------- | --------------------------------------------- | ----------------------------------------- |
-| responseRegion | Array<Rectangle> \| Rectangle | One or more touch targets, including their location and size. Default value: { x: 0, y: 0, width: '100%', height: '100%' } |
+| responseRegion | Array<[Rectangle](#rectangle)> \| [Rectangle](#rectangle) | One or more touch targets, including their location and size. The default touch target is the entire component. Default value: { x: 0, y: 0, width: '100%', height: '100%' } |
-### Rectangle
+## Rectangle
| Name | Type | Mandatory | Description |
| ------ | ----------------------------- | -----| -------------------------------- |
-| x | [Length](ts-types.md#length) | No | X coordinate of the touch point relative to the left edge of the component. Default value: **0vp**|
-| y | [Length](ts-types.md#length) | No | Y coordinate of the touch point relative to the left edge of the component. Default value: **0vp**|
-| width | [Length](ts-types.md#length) | No | Width of the touch target. Default value: **100%**|
-| height | [Length](ts-types.md#length) | No | Height of the touch target. Default value: **100%**|
+| x | [Length](ts-types.md#length) | No | X coordinate of the touch point relative to the upper left corner of the component. Default value: **0vp**|
+| y | [Length](ts-types.md#length) | No | Y coordinate of the touch point relative to the upper left corner of the component. Default value: **0vp**|
+| width | [Length](ts-types.md#length) | No | Width of the touch target. Default value: **'100%'**|
+| height | [Length](ts-types.md#length) | No | Height of the touch target. Default value: **'100%'**|
> **NOTE**
>
> **x** and **y** can be set to a positive or negative percentage value. For example, when **x** is set to **'100%'**, the touch target is the offset from the right edge of the component by the component's width. When **x** is set to **'-100%'**, the touch target is the offset from the left edge of the component by the component's width. When **y** is set to **'100%'**, the touch target is the offset from the bottom edge of the component by the component's height. When **y** is set to **'-100%'**, the touch target is the offset from the top edge of the component by the component's height.
>
- > **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component; when **height** is set to **'100%'**, the height of the touch target is equal to that of the component.
+ > **width** and **height** can only be set to positive percentage values. When **width** is set to **'100%'**, the width of the touch target is equal to that of the component. For example, if the width of a component is 100 vp, **'100%'** indicates that the width of the touch target is also 100 vp. when **height** is set to **'100%'**, the height of the touch target is equal to that of the component.
>
> The percentage is measured relative to the component itself.
@@ -38,19 +39,38 @@ You can set the touch target for components that support universal click events,
// xxx.ets
@Entry
@Component
-struct ResponseRegionExample {
+struct TouchTargetExample {
+ @State text: string = ""
+
build() {
- Column() {
- Toggle({ type: ToggleType.Checkbox, isOn: true })
- .selectedColor(0x39a2db)
- .backgroundColor(0xAFEEEE)
- .responseRegion({ x: 1.0, y: 1.0, width: 400, height: 400 })
- .onChange((isOn: boolean) => {
- console.info('Component status:' + isOn)
- })
- }.width('100%').margin({ top: 5 })
+ Column({ space: 20 }) {
+ Text("{x:0,y:0,width:'50%',height:'100%'}")
+ // The width of the touch target is half of that of the button. The user will get no response if they touch the right of the button.
+ Button("button1")
+ .responseRegion({ x: 0, y: 0, width: '50%', height: '100%' })
+ .onClick(() => {
+ this.text = 'button1 clicked'
+ })
+
+ // The touch target is located rightward by one button width, with its width half of the button width. The touch event is triggered if the left of the right part of button2 is touched.
+ Text("{x:'100%',y:0,width:'50%',height:'100%'}")
+ Button("button2")
+ .responseRegion({ x: '100%', y: 0, width: '50%', height: '100%' })
+ .onClick(() => {
+ this.text = 'button2 clicked'
+ })
+ // The touch target is located downward by one button height, with its size equal to the button size. The touch event is triggered if the lower part of button3 is touched.
+ Text("{x:0,y:'100%',width:'100%',height:'100%'}")
+ Button("button3")
+ .responseRegion({ x: 0, y: '100%', width: '100%', height: '100%' })
+ .onClick(() => {
+ this.text = 'button3 clicked'
+ })
+
+ Text(this.text).margin({ top: 50 })
+ }.width('100%').margin({ top: 10 })
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
index ed825d40410e582b0b3f33974742e876f7787433..47015c1a4d086d5469d25c0eb5f400f3fad575fa 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-focus-event.md
@@ -1,24 +1,23 @@
# Focus Event
-A focus event is triggered when the page focus moves between components. It can be used to change the content of a component.
+A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component.
> **NOTE**
>
> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>
> - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event.
+>
+> - Components that have default interaction logic, such as **\