1# SplitLayout
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 '@kit.ArkUI'
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**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name| Type| Mandatory| Decorator       | Description    |
40| -------- | -------- | -------- |---------------|--------|
41| mainImage | [ResourceStr](ts-types.md#resourcestr) | Yes| -             | Image. |
42| primaryText | [ResourceStr](ts-types.md#resourcestr) | Yes| @Prop         | Title. |
43| secondaryText | [ResourceStr](ts-types.md#resourcestr) | No| @Prop         | Subtitle.|
44| tertiaryText | [ResourceStr](ts-types.md#resourcestr) | No| @Prop         | Auxiliary text. |
45| container | () => void | Yes| @BuilderParam | Container in the component.|
46
47## Events
48The [universal events](ts-universal-events-click.md) are not supported.
49
50## Example
51
52```ts
53import { SplitLayout } from '@kit.ArkUI'
54
55@Entry
56@Component
57struct Index {
58  @State demoImage: Resource = $r("app.media.music")
59
60  build() {
61      Column() {
62        SplitLayout({
63          mainImage: this.demoImage,
64          primaryText:'New music recommendation',
65          secondaryText: 'Get a playlist tailored to your taste;',
66          tertiaryText: "Updated every day",
67        }) {
68          Text('Example: Components can be added to a blank area container.')
69            .margin({top:36})
70        }
71      }
72      .justifyContent(FlexAlign.SpaceBetween)
73      .height('100%')
74      .width('100%')
75  }
76}
77```
78
79
80Layout less than 600 vp:
81
82
83![en-us_image_0000001665553957](figures/en-us_image_0000001665553957.png)
84
85
86Layout between 600 vp and 840 vp:
87
88
89![en-us_image_0000001616957408](figures/en-us_image_0000001616957408.png)
90
91
92Layout greater than 840 vp:
93
94
95![en-us_image_0000001617116972](figures/en-us_image_0000001617116972.png)
96