Skip to content

D
Docs

OpenHarmony / Docs
接近 2 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 52adec75 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (10117) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 40bb8e28
隐藏空白更改
内联 并排
Showing with 264 addition and 202 deletion
en/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 52adec75
...@@ -7,11 +7,6 @@ The **\<Badge>** component is a container that can be attached to another compon ...@@ -7,11 +7,6 @@ The **\<Badge>** component is a container that can be attached to another compon
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
This component supports only one child component. This component supports only one child component.
...@@ -19,7 +14,7 @@ This component supports only one child component. ...@@ -19,7 +14,7 @@ This component supports only one child component.
## APIs ## APIs
Method 1: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) **Method 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle})
Create a badge. Create a badge.
...@@ -27,36 +22,38 @@ Create a badge. ...@@ -27,36 +22,38 @@ Create a badge.
| Name| Type| Mandatory| Default Value| Description| | Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| count | number | Yes| - | Number of notifications.| | count | number | Yes| - | Number of notifications.|
| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
| style | BadgeStyle | Yes| - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size.| | style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
Method 2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) **Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
Creates a badge based on the given string. Creates a badge based on the given string.
- Parameters **Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- | | Name| Type| Mandatory| Default Value| Description|
| value | string | Yes| - | Prompt content.| | -------- | -------- | -------- | -------- | -------- |
| position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.| | value | string | Yes| - | Prompt content.|
| style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.| | position | [BadgePosition](#badgeposition) | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
| style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.|
- BadgeStyle
| Name| Type| Mandatory| Default Value| Description| ## BadgePosition
| -------- | -------- | -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color.White | Text color.| | Name| Description|
| fontSize | number \| string | No| 10 | Text size.| | -------- | -------- |
| badgeSize | number \| string | Yes| - | Badge size.| | RightTop | The badge is displayed in the upper right corner of the parent component.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color.Red | Badge color.| | Right | The badge is vertically centered on the right of the parent component.|
| Left | The badge is vertically centered on the left of the parent component.|
- BadgePosition enums
| Name| Description| ## BadgeStyle
| -------- | -------- |
| RightTop | The badge is displayed in the upper right corner of the parent component.|
| Right | The badge is vertically centered on the right of the parent component.|
| Left | The badge is vertically centered on the left of the parent component.|
| Name | Type | Mandatory| Default Value | Description |
| ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| fontSize | number \| string | No | 10 | Font size, in vp. |
| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|
| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. |
## Example ## Example
...@@ -69,40 +66,88 @@ struct BadgeExample { ...@@ -69,40 +66,88 @@ struct BadgeExample {
@State message: string = 'new' @State message: string = 'new'
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Column() {
Badge({ Text('numberBadge').width('80%')
count: this.counts, Row({ space: 10 }) {
maxCount: 99, // Number badge. The default value of maxCount is 99. If the number of notifications exceeds 99, 99+ is displayed.
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } Badge({
}) { count: this.counts,
Button('message') maxCount: 99,
.onClick(() => { position: BadgePosition.RightTop,
this.counts++ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) }) {
.width(100).height(50).backgroundColor(0x317aff) Button('message')
}.width(100).height(50) .onClick(() => {
this.counts++
Badge({ })
value: this.message, .width(100).height(50).backgroundColor(0x317aff)
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } }.width(100).height(50)
}) {
Text('message') // Number badge
.width(80).height(50).fontSize(16).lineHeight(37) Badge({
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) count: this.counts,
}.width(80).height(50) maxCount: 99,
position: BadgePosition.Left,
Badge({ style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
value: ' ', }) {
position: BadgePosition.Right, Button('message')
style: { badgeSize: 6, badgeColor: Color.Red } .onClick(() => {
}) { this.counts++
Text('message') })
.width(90).height(50).fontSize(16).lineHeight(37) .width(100).height(50).backgroundColor(0x317aff)
.borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) }.width(100).height(50)
}.width(90).height(50)
}.width('100%').margin({ top: 5 })
// Number badge
Badge({
count: this.counts,
maxCount: 99,
position: BadgePosition.Right,
style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red }
}) {
Button('message')
.onClick(() => {
this.counts++
})
.width(100).height(50).backgroundColor(0x317aff)
}.width(100).height(50)
}.margin(10)
Text('stringBadge').width('80%')
Row({ space: 30 }) {
Badge({
value: this.message,
style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue }
}) {
Text('message')
.width(80)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(80).height(50)
// When value is null, the dot-style badge is used.
Badge({
value: '',
position: BadgePosition.Right,
style: { badgeSize: 6, badgeColor: Color.Red }
}) {
Text('message')
.width(90)
.height(50)
.fontSize(16)
.lineHeight(37)
.borderRadius(10)
.textAlign(TextAlign.Center)
.backgroundColor(0xF3F4ED)
}.width(90).height(50)
}.margin(10)
}
} }
} }
``` ```
![en-us_image_0000001212218470](figures/en-us_image_0000001212218470.gif) ![badge](figures/badge.png)
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 52adec75
...@@ -14,13 +14,13 @@ Supported ...@@ -14,13 +14,13 @@ Supported
## APIs ## APIs
Column(value?:{space?: string | number}) Column(value?: {space?: string | number})
**Parameters** **Parameters**
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| space | string \| number | No| Space between two adjacent child components in the vertical layout.<br>Default value: **0**| | space | string \| number | No| Vertical spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>Default value: **0**|
## Attributes ## Attributes
...@@ -40,35 +40,44 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -40,35 +40,44 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
struct ColumnExample { struct ColumnExample {
build() { build() {
Column() { Column() {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') // Set the vertical spacing between two adjacent child components to 5.
Column({ space: 5 }) { Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column().width('100%').height(30).backgroundColor(0xAFEEEE) Column({ space: 5 }) {
Column().width('100%').height(30).backgroundColor(0x00FFFF) Column().width('100%').height(30).backgroundColor(0xAFEEEE)
}.width('90%').height(100).border({ width: 1 }) Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(100).border({ width: 1 })
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() { // Set the alignment mode of the child components in the horizontal direction.
Column().width('50%').height(30).backgroundColor(0xAFEEEE) Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column().width('50%').height(30).backgroundColor(0x00FFFF) Column() {
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE) Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column().width('50%').height(30).backgroundColor(0x00FFFF) Column() {
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
Column() {
Column().width('30%').height(30).backgroundColor(0xAFEEEE) Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column().width('30%').height(30).backgroundColor(0x00FFFF) Column() {
}.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center) Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
Column() {
Column().width('30%').height(30).backgroundColor(0xAFEEEE) // Set the alignment mode of the child components in the vertical direction.
Column().width('30%').height(30).backgroundColor(0x00FFFF) Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
}.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End) Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
}.width('100%').padding({ top: 5 }) }.width('100%').padding({ top: 5 })
} }
} }
......
en/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 52adec75
# ColumnSplit # ColumnSplit
The **\<ColumnSplit>** lays out child components vertically and inserts a horizontal divider between every two child components. The **\<ColumnSplit>** lays out child components vertically and inserts a horizontal divider between every two child components.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
None
## Child Components ## Child Components
Supported Supported
...@@ -32,7 +25,8 @@ ColumnSplit() ...@@ -32,7 +25,8 @@ ColumnSplit()
> **NOTE** > **NOTE**
> >
> Similar to **\<RowSplit>**, the divider of **\<ColumnSplit>** can be dragged to a position that just fully holds a component. > Similar to **\<RowSplit>**, the divider of **\<ColumnSplit>** can be dragged to a position that just fully holds a component.
>
> Dragging is not supported in the Previewer. Check the drag effect on a real device.
## Example ## Example
...@@ -51,7 +45,7 @@ struct ColumnSplitExample { ...@@ -51,7 +45,7 @@ struct ColumnSplitExample {
Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
} }
.resizeable(true) .resizeable(true) // The divider can be dragged.
.width('90%').height('60%') .width('90%').height('60%')
}.width('100%') }.width('100%')
} }
......
en/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 52adec75
...@@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType}) ...@@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType})
| Name| Type | Mandatory| Description | | Name| Type | Mandatory| Description |
| ------ | -------------- | ---- | ---------------------------------------------- | | ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | Yes | Path of the target page to be redirected to. | | target | string | Yes | Path of the target page to be redirected to. |
| type | NavigationType | No | Navigation type.<br>Default value: **NavigationType.Push**| | type | [NavigationType](#navigationtype) | No | Navigation type.<br>Default value: **NavigationType.Push**|
## NavigationType ## NavigationType
...@@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType}) ...@@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType})
| Name | Parameter | Description | | Name | Parameter | Description |
| ------ | ------- | ------------------------------------------------------------ | | ------ | ------- | ------------------------------------------------------------ |
| active | boolean | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect.| | active | boolean | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect.|
| params | object | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page.| | params | object | Data that needs to be passed to the target page during redirection. You can use [router.getParams()](../apis/js-apis-router.md#routergetparams) to obtain the data on the target page.|
| target | string | Path of the target page to be redirected to. | | target | string | Path of the target page to be redirected to. The target page must be added to the **main_pages.json** file. |
| type | NavigationType | Navigation mode.<br>Default value: **NavigationType.Push**| | type | [NavigationType](#navigationtype) | Navigation type.<br>Default value: **NavigationType.Push**|
## Example ## Example
...@@ -56,8 +56,8 @@ struct NavigatorExample { ...@@ -56,8 +56,8 @@ struct NavigatorExample {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
Text('Go to ' + this.Text['name'] + ' page') Text('Go to ' + this.Text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center) .width('100%').textAlign(TextAlign.Center)
}.params({ text: this.Text }) }.params({ text: this.Text}) // Transfer parameters to the Detail page.
Navigator() { Navigator() {
Text('Back to previous page').width('100%').textAlign(TextAlign.Center) Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
...@@ -72,11 +72,12 @@ struct NavigatorExample { ...@@ -72,11 +72,12 @@ struct NavigatorExample {
```ts ```ts
// Detail.ets // Detail.ets
import router from '@system.router' import router from '@ohos.router'
@Entry @Entry
@Component @Component
struct DetailExample { struct DetailExample {
// Receive the input parameters of Navigator.ets.
@State text: any = router.getParams().text @State text: any = router.getParams().text
build() { build() {
...@@ -86,7 +87,7 @@ struct DetailExample { ...@@ -86,7 +87,7 @@ struct DetailExample {
} }
Text('This is ' + this.text['name'] + ' page') Text('This is ' + this.text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center) .width('100%').textAlign(TextAlign.Center)
} }
.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
} }
......
en/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 52adec75
...@@ -20,15 +20,15 @@ Panel(show: boolean) ...@@ -20,15 +20,15 @@ Panel(show: boolean)
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| show | boolean | Yes| Whether the panel is shown or hidden.| | show | boolean | Yes| Whether the panel is shown.|
## Attributes ## Attributes
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| type | PanelType | Type of the panel.<br>Default value: **PanelType.Foldable**| | type | [PanelType](#paneltype)| Type of the panel.<br>Default value: **PanelType.Foldable**|
| mode | PanelMode | Initial status of the panel.| | mode | [PanelMode](#panelmode) | Initial status of the panel.|
| dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**| | dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**|
| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.| | fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.|
| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.| | halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.|
...@@ -57,8 +57,8 @@ Panel(show: boolean) ...@@ -57,8 +57,8 @@ Panel(show: boolean)
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area.| | onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.|
| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the height of the panel is the **dragBar** height plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.| | onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the height of the panel changes. The returned height value is the height of the content area, in px by default. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.|
## Example ## Example
...@@ -70,7 +70,7 @@ struct PanelExample { ...@@ -70,7 +70,7 @@ struct PanelExample {
@State show: boolean = false @State show: boolean = false
build() { build() {
Stack() { Column() {
Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') Text('2021-09-30 Today Calendar: 1.afternoon......Click for details')
.width('90%').height(50).borderRadius(10) .width('90%').height(50).borderRadius(10)
.backgroundColor(0xFFFFFF).padding({ left: 20 }) .backgroundColor(0xFFFFFF).padding({ left: 20 })
...@@ -85,7 +85,7 @@ struct PanelExample { ...@@ -85,7 +85,7 @@ struct PanelExample {
} }
} }
.type(PanelType.Foldable).mode(PanelMode.Half) .type(PanelType.Foldable).mode(PanelMode.Half)
.dragBar(true) // The dragbar is enabled by default. .dragBar(true) // The drag bar is enabled by default.
.halfHeight(500) // The panel height is half of the screen height by default. .halfHeight(500) // The panel height is half of the screen height by default.
.onChange((width: number, height: number, mode: PanelMode) => { .onChange((width: number, height: number, mode: PanelMode) => {
console.info(`width:${width},height:${height},mode:${mode}`) console.info(`width:${width},height:${height},mode:${mode}`)
......
en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md
浏览文件 @ 52adec75
...@@ -9,22 +9,16 @@ The **\<RelativeContainer>** component is used for element alignment in complex ...@@ -9,22 +9,16 @@ The **\<RelativeContainer>** component is used for element alignment in complex
## Rules ## Rules
* Components in a container are aligned horizontally or vertically. * Components in a container are aligned horizontally or vertically.
* Alignment modes in the horizontal direction can be left, center, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes of the container, respectively. * Alignment modes in the horizontal direction can be left, middle, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes of the container, respectively.
* Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **VerticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** attributes of the container, respectively. * Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **VerticalAlign.Top**, **VerticalAlign.Center**, and **VerticalAlign.Bottom** attributes of the container, respectively.
* A child component can set the container or another child component as the anchor point. * A child component can set the container or another child component as the anchor.
* An ID must be set for the child components in the **\<RelativeContainer>**. The container ID is fixed at **__container__**. * To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**.
* By default, a child component without an ID is positioned in the upper left corner of the container. * Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped.
* Three positions in a direction of the child component can use three positions in the same direction of the container or another child components as anchor points. When anchor points are set for more than two positions in the same direction, the third position is skipped. * The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules.
* When anchor points are set for more than two positions in the same direction, the width and height of the child component do not take effect.
* If offset is required after the alignment, it can be set through **offset**. * If offset is required after the alignment, it can be set through **offset**.
* Exceptions * Exceptions
* When a mutual or circular dependency occurs, all child components in the container are not drawn. * When a mutual or circular dependency occurs, none of the child components in the container are drawn.
* If anchors are set for more than two positions in the same direction but the anchor positions are reversed, the size of the child component is 0, that is, the child component is not drawn. * If anchors are set for more than two positions in a single direction but the anchor positions are reversed, the size of the child component is 0, which means that the child component is not drawn.
## Required Permissions
None
## Child Components ## Child Components
...@@ -41,47 +35,61 @@ RelativeContainer() ...@@ -41,47 +35,61 @@ RelativeContainer()
@Entry @Entry
@Component @Component
struct Index { struct Index {
build() { build() {
Row() { Row() {
Button("Extra button").width(100).height(50) Button("Extra button").width(100).height(50)
RelativeContainer() {
Button("Button 1").width(120).height(30) RelativeContainer() {
.alignRules({ Button("Button 1")
middle: { anchor: "__container__", align: HorizontalAlign.Center }, .width(120)
}) .height(30)
.id("bt1").borderWidth(1).borderColor(Color.Black) .alignRules({
Text("This is text 2").fontSize(20).padding(10) middle: { anchor: "__container__", align: HorizontalAlign.Center },
.alignRules({ })
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, .id("bt1")
top: { anchor: "bt1", align: VerticalAlign.Bottom }, .borderWidth(1)
right:{ anchor: "bt1", align: HorizontalAlign.Center } .borderColor(Color.Black)
}).id("tx2").borderWidth(1).borderColor(Color.Black).height(30)
Text("This is text 2")
LoadingProgress().color(Color.Blue) .fontSize(20)
.alignRules({ .padding(10)
left: { anchor: "bt1", align: HorizontalAlign.End }, .alignRules({
top: { anchor: "tx2", align: VerticalAlign.Center }, bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom } top: { anchor: "bt1", align: VerticalAlign.Bottom },
}).id("lp3").borderWidth(1).borderColor(Color.Black) right: { anchor: "bt1", align: HorizontalAlign.Center }
.height(30).width(30) })
.id("tx2")
Gauge({ value: 50, min: 0, max: 100 }) .borderWidth(1)
.startAngle(210).endAngle(150) .borderColor(Color.Black)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) .height(30)
.strokeWidth(20)
.width(50).height(50) Button("Button 3")
.alignRules({ .width(100)
left: { anchor: "tx2", align: HorizontalAlign.End }, .height(100)
right:{ anchor: "__container__", align: HorizontalAlign.End }, .alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top }, left: { anchor: "bt1", align: HorizontalAlign.End },
bottom: { anchor: "lp3", align: VerticalAlign.Top } top: { anchor: "tx2", align: VerticalAlign.Center },
}).id("g4").borderWidth(1).borderColor(Color.Black) bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
})
} .id("bt3")
.width(200).height(200) .borderWidth(1)
.backgroundColor(Color.Orange) .borderColor(Color.Black)
Text("This is text 4")
.fontSize(20)
.padding(10)
.alignRules({
left: { anchor: "tx2", align: HorizontalAlign.End },
right: { anchor: "__container__", align: HorizontalAlign.End },
top: { anchor: "__container__", align: VerticalAlign.Top },
bottom: { anchor: "bt3", align: VerticalAlign.Top }
})
.id("tx4")
.borderWidth(1)
.borderColor(Color.Black)
}
.width(200).height(200)
.backgroundColor(Color.Orange)
} }
.height('100%') .height('100%')
} }
......
en/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 52adec75
...@@ -20,7 +20,7 @@ Row(value?:{space?: number | string }) ...@@ -20,7 +20,7 @@ Row(value?:{space?: number | string })
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| space | string \| number | No| Space between two adjacent child components in the horizontal layout.<br>Default value: **0**, in vp | | space | string \| number | No| Horizontal spacing between two adjacent child components.<br>Since API version 9, this parameter does not take effect when it is set to a negative number.<br>Default value: **0**, in vp|
## Attributes ## Attributes
...@@ -28,7 +28,7 @@ Row(value?:{space?: number | string }) ...@@ -28,7 +28,7 @@ Row(value?:{space?: number | string })
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**| | alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Alignment mode of child components in the vertical direction.<br>Default value: **VerticalAlign.Center**|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **FlexAlign.Start** | | justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the horizontal direction.<br>FlexAlign.Start |
## Example ## Example
...@@ -40,38 +40,41 @@ Row(value?:{space?: number | string }) ...@@ -40,38 +40,41 @@ Row(value?:{space?: number | string })
struct RowExample { struct RowExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
// Set the horizontal spacing between two adjacent child components to 5.
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 5 }) { Row({ space: 5 }) {
Row().width('30%').height(50).backgroundColor(0xAFEEEE) Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF) Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 }) }.width('90%').height(107).border({ width: 1 })
Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') // Set the alignment mode of the child components in the vertical direction.
Row() { Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row().width('30%').height(50).backgroundColor(0xAFEEEE) Row() {
Row().width('30%').height(50).backgroundColor(0x00FFFF) Row().width('30%').height(50).backgroundColor(0xAFEEEE)
}.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 }) Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() { Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row().width('30%').height(50).backgroundColor(0xAFEEEE) Row() {
Row().width('30%').height(50).backgroundColor(0x00FFFF) Row().width('30%').height(50).backgroundColor(0xAFEEEE)
}.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() { // Set the alignment mode of the child components in the horizontal direction.
Row().width('30%').height(50).backgroundColor(0xAFEEEE) Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row().width('30%').height(50).backgroundColor(0x00FFFF) Row() {
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE) Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row().width('30%').height(50).backgroundColor(0x00FFFF) Row() {
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
}.width('100%') }.width('100%')
} }
} }
``` ```
![en_us_image_0000001174422908](figures/row.png) ![row](figures/row.png)
en/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 52adec75
...@@ -26,6 +26,8 @@ RowSplit() ...@@ -26,6 +26,8 @@ RowSplit()
> **NOTE** > **NOTE**
> >
> Similar to **\<RowSplit>**, the divider of **\<RowSplit>** can be dragged to a position that just fully holds a component. > Similar to **\<RowSplit>**, the divider of **\<RowSplit>** can be dragged to a position that just fully holds a component.
>
> Dragging is not supported in the Previewer. Check the drag effect on a real device.
## Example ## Example
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或