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