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> This component is not supported on wearables. 12 13 14## Modules to Import 15 16``` 17import { SplitLayout } from '@kit.ArkUI'; 18``` 19 20 21## Child Components 22 23Not supported 24 25## Attributes 26The [universal attributes](ts-component-general-attributes.md) are not supported. 27 28 29## SplitLayout 30 31SplitLayout({mainImage: Resource, primaryText: string, secondaryText?: string, tertiaryText?: string, container: () => void }) 32 33**Decorator**: @Component 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name| Type| Mandatory| Decorator | Description | 40| -------- | -------- | -------- |---------------|--------| 41| mainImage | [ResourceStr](ts-types.md#resourcestr) | Yes| @State | 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-component-general-events.md) are not supported. 49 50## Example 51This example demonstrates how to use **SplitLayout** to achieve a page layout that is both adaptable and responsive. 52```ts 53import { SplitLayout } from '@kit.ArkUI'; 54 55@Entry 56@Component 57struct Index { 58 @State demoImage: Resource = $r("app.media.background"); 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 or equal to 600 vp 81 82 83 84 85 86Layout greater than 600 vp and less than or equal to 840 vp 87 88 89 90 91 92Layout greater than 840 vp 93 94 95 96
