diff --git a/en/application-dev/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/arkui-ts/ts-basic-components-loadingprogress.md deleted file mode 100644 index 9f7c56e96f21ed242fe4764cd8bebab46e80005a..0000000000000000000000000000000000000000 --- a/en/application-dev/arkui-ts/ts-basic-components-loadingprogress.md +++ /dev/null @@ -1,44 +0,0 @@ -# LoadingProgress - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - -The **\** component is used to display the loading progress. - -## Required Permissions - -None - -## Child Components - -None - -## APIs - -LoadingProgress() - -Creates a **LoadingProgress** instance. - -## Attributes - -| Name | Type | Default Value | Description | -| ----- | ----- | ------------- | ---------------------------------------- | -| color | Color | - | Foreground color of the loading progress bar. | - -## Example - -``` -@Entry -@Component -struct LoadingProgressExample { - build() { - Column({ space: 5 }) { - Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') - LoadingProgress() - .color(Color.Blue) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![zh-cn_image_0000001198839004](figures/loadingProgress.png) \ No newline at end of file diff --git a/en/application-dev/arkui-ts/ts-container-grid.md b/en/application-dev/arkui-ts/ts-container-grid.md deleted file mode 100644 index edc556cdaa8cd74a092c11baa8b1fe296ae6b492..0000000000000000000000000000000000000000 --- a/en/application-dev/arkui-ts/ts-container-grid.md +++ /dev/null @@ -1,119 +0,0 @@ -# Grid - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<Grid>** component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts. - - -## Required Permissions - -None - - -## Child Components - -This component contains the child component [\](ts-container-griditem.md). - - -## APIs - -Grid() - - -## Attributes - -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts. | -| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts. | -| columnsGap | Length | 0 | Spacing between columns. | -| rowsGap | Length | 0 | Spacing between rows. | -| editMode8+ | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **<[GridItem](ts-container-griditem.md)>** in the **<Gird>** component. | -| layoutDirection8+ | [LayoutDirection](ts-appendix-enums.md#layoutdirection-enums) | LayoutDirection.Row | Main axis direction of the layout. The options are as follows:- **LayoutDirection.Row**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.- **LayoutDirection.Column**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns. | -| maxCount8+ | number | 1 | Maximum number of rows that can be displayed. | -| minCount8+ | number | 1 | Minimum number of rows that can be displayed. | -| cellLength8+ | number | 0 | Fixed height per row. | -| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. | -| edgeEffection8+ | EdgeEffect | EdgeEffect.Spring | Edge effect. For details, see **EdgeEffect**. | - -- EdgeEffect enums - - | Name | Description | - | ------ | ------------------------------------------------------------ | - | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. | - | None | No effect after the scrollbar is moved to the edge. | - -## Events - - | Name | Description | -| -------- | -------- | -| onScrollIndex(first: number) => void | Triggered when the start item of the grid changes. | - - -## Example - - -``` -@Entry -@Component -struct GridExample { - @State Number: String[] = ['0', '1', '2', '3', '4'] - - build() { - Column({ space: 5 }) { - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height('100%') - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .rowsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - - Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height(80) - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .onScrollIndex((first: number) => { - console.info(first.toString()) - }) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![en-us_image_0000001212218434](figures/en-us_image_0000001212218434.gif) - diff --git a/en/application-dev/arkui-ts/ts-container-list.md b/en/application-dev/arkui-ts/ts-container-list.md deleted file mode 100644 index 45d5f5bff67cf0479f43d7a0bb454e0dcde8897a..0000000000000000000000000000000000000000 --- a/en/application-dev/arkui-ts/ts-container-list.md +++ /dev/null @@ -1,123 +0,0 @@ -# List - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **<List>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. - - -## Required Permissions - -None - - -## Child Components - -This component contains the child component [\](ts-container-listitem.md). - - -## APIs - -List(value:{space?: number, initialIndex?: number}) - -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | space | number | No | 0 | Spacing between list items. | - | initialIndex | number | No | 0 | Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect. | - - -## Attributes - -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. | -| divider | {
strokeWidth: Length,
color?:Color,
startMargin?: Length,
endMargin?: Length
} | - | Style of the divider for the list items. By default, there is no divider.
**strokeWidth**: stroke width of the divider.
**color**: color of the divider.
**startMargin**: distance between the divider and the start of the list.
**endMargin**: distance between the divider and the end of the list. | -| editMode | boolean | false | Whether the **<List>** component is in editable mode. | -| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see EdgeEffect enums. | -| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.
- **false**: No chained animations are displayed.
- **true**: Chained animations are displayed. | -| multiSelectable8+ | boolean | false | Whether to enable mouse frame selection.
- **false**: The mouse frame selection is disabled.
- **true**: The mouse frame selection is disabled. | -| restoreId8+ | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.
For a **<List>** component, the status includes the item serial number displayed at the start position. | - -- EdgeEffect enums - | Name | Description | - | -------- | -------- | - | Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. | - | None | No effect after the scroll bar is moved to the edge. | - - -## Events - -| Name | Description | -| -------- | -------- | -| onItemDelete(index: number) => boolean | Triggered when a list item is deleted. | -| onScrollIndex(firstIndex: number, lastIndex: number) => void | Triggered when the start position and end position of the current list are changed. | - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** -> To enable the editable mode for a list, the following conditions must be met: -> -> - **editMode** is set to **true**. -> -> - The list is bound to the **onItemDelete** event and the event returns **true** during event callback. -> -> - The **editable** attribute of **ListItem** is set to **true**. -> -> To enable dragging for a list item, the following conditions must be met: -> -> - **editMode** is set to **true**. -> -> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback. - - -## Example - - -``` -@Entry -@Component -struct ListExample { - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State editFlag: boolean = false - - build() { - Stack({ alignContent: Alignment.TopStart }) { - Column() { - List({ space: 20, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) // Arrangement direction - .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider line - .edgeEffect(EdgeEffect.None) // No effect when sliding to the edge - .chainAnimation(false) // Chained animations are disabled. - .onScrollIndex((firstIndex: number, lastIndex: number) => { - console.info('first' + firstIndex) - console.info('last' + lastIndex) - }) - .editMode(this.editFlag) - .onItemDelete((index: number) => { - console.info(this.arr[index] + 'Delete') - this.arr.splice(index, 1) - console.info(JSON.stringify(this.arr)) - this.editFlag = false - return true - }).width('90%') - }.width('100%') - - Button('edit list') - .onClick(() => { - this.editFlag = !this.editFlag - }).margin({ top: 5, left: 20 }) - }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) - } -} -``` - -![en-us_image_0000001256978357](figures/en-us_image_0000001256978357.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 2550e50bee09c3ba09580a996a7fb4e171abe13f..9f7c56e96f21ed242fe4764cd8bebab46e80005a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -3,7 +3,7 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **** component is used to display the loading progress. +The **\** component is used to display the loading progress. ## Required Permissions diff --git a/en/application-dev/reference/arkui-ts/ts-container-grid.md b/en/application-dev/reference/arkui-ts/ts-container-grid.md index cba299a352b8ccc092a9926a3a33333255ab4b24..edc556cdaa8cd74a092c11baa8b1fe296ae6b492 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/en/application-dev/reference/arkui-ts/ts-container-grid.md @@ -15,7 +15,7 @@ None ## Child Components -This component contains the child component [](ts-container-griditem.md). +This component contains the child component [\](ts-container-griditem.md). ## APIs diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index 889dff5c435377556339087aae57a28012d7da13..45d5f5bff67cf0479f43d7a0bb454e0dcde8897a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -15,7 +15,7 @@ None ## Child Components -This component contains the child component [](ts-container-listitem.md). +This component contains the child component [\](ts-container-listitem.md). ## APIs