1# SplitLayout
2
3
4**SplitLayout** is a component that enables you to divide the available space vertically into separate sections, each of which can contain solely text or a combination of text and images.
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| 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
49This example demonstrates how to use **SplitLayout** to achieve a page layout that is both adaptable and responsive.
50```ts
51import { SplitLayout } from '@kit.ArkUI'
52
53@Entry
54@Component
55struct Index {
56  @State demoImage: Resource = $r("app.media.music")
57
58  build() {
59      Column() {
60        SplitLayout({
61          mainImage: this.demoImage,
62          primaryText:'New music recommendation',
63          secondaryText: 'Get a playlist tailored to your taste;',
64          tertiaryText: "Updated every day",
65        }) {
66          Text('Example: Components can be added to a blank area container.')
67            .margin({top:36})
68        }
69      }
70      .justifyContent(FlexAlign.SpaceBetween)
71      .height('100%')
72      .width('100%')
73  }
74}
75```
76
77
78Layout less than 600 vp:
79
80
81![en-us_image_0000001665553957](figures/en-us_image_0000001665553957.png)
82
83
84Layout between 600 vp and 840 vp:
85
86
87![en-us_image_0000001616957408](figures/en-us_image_0000001616957408.png)
88
89
90Layout greater than 840 vp:
91
92
93![en-us_image_0000001617116972](figures/en-us_image_0000001617116972.png)
94