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 84e41f4b71Sopenharmony_ci 85e41f4b71Sopenharmony_ci 86e41f4b71Sopenharmony_ciLayout between 600 vp and 840 vp: 87e41f4b71Sopenharmony_ci 88e41f4b71Sopenharmony_ci 89e41f4b71Sopenharmony_ci 90e41f4b71Sopenharmony_ci 91e41f4b71Sopenharmony_ci 92e41f4b71Sopenharmony_ciLayout greater than 840 vp: 93e41f4b71Sopenharmony_ci 94e41f4b71Sopenharmony_ci 95e41f4b71Sopenharmony_ci 96