• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.advanced.SplitLayout (Split Layout)
2
3
4The split layout component allows you to split the available space into different content areas, which can be text only or a mixture of imagery and text.
5
6
7> **NOTE**
8>
9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```
15import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout'
16```
17
18
19## Child Components
20
21Not supported
22
23## Attributes
24The [universal attributes](ts-universal-attributes-size.md) are not supported.
25
26
27## SplitLayout
28
29SplitLayout({mainImage: Resource, primaryText: string, secondaryText?: string, tertiaryText?: string, container: () => void })
30
31**Decorator**: @Component
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35**Parameters**
36
37| Name| Type| Mandatory| Decorator       | Description    |
38| -------- | -------- | -------- |---------------|--------|
39| mainImage | [ResourceStr](ts-types.md#resourcestr) | Yes| -             | Image. |
40| primaryText | [ResourceStr](ts-types.md#resourcestr) | Yes| @Prop         | Title. |
41| secondaryText | [ResourceStr](ts-types.md#resourcestr) | No| @Prop         | Subtitle.|
42| tertiaryText | [ResourceStr](ts-types.md#resourcestr) | No| @Prop         | Auxiliary text. |
43| container | () => void | Yes| @BuilderParam | Container in the component.|
44
45## Events
46The [universal events](ts-universal-events-click.md) are not supported.
47
48## Example
49
50```ts
51import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout'
52@Entry
53@Component
54struct Index {
55  @State demoImage: Resource = $r("app.media.music")
56
57  build() {
58      Column() {
59        SplitLayout({
60          mainImage: this.demoImage,
61          primaryText:'New music recommendation',
62          secondaryText: 'Get a playlist tailored to your taste;',
63          tertiaryText: "Updated every day",
64        }) {
65          Text('Example: Components can be added to a blank area container.')
66            .margin({top:36})
67        }
68      }
69      .justifyContent(FlexAlign.SpaceBetween)
70      .height('100%')
71      .width('100%')
72  }
73}
74```
75
76
77Layout less than 600 vp:
78
79
80![en-us_image_0000001665553957](figures/en-us_image_0000001665553957.png)
81
82
83Layout between 600 vp and 840 vp:
84
85
86![en-us_image_0000001616957408](figures/en-us_image_0000001616957408.png)
87
88
89Layout greater than 840 vp:
90
91
92![en-us_image_0000001617116972](figures/en-us_image_0000001617116972.png)
93