• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Safe Area
2
3With the **expandSafeArea** attribute, you can expand a component's safe area.
4
5> **NOTE**
6>
7> This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Attributes
10
11| Name          | Parameter                          | Description                               |
12| -------------- | ----------------------------- | --------------------------------------- |
13| expandSafeArea | type?: Array <[SafeAreaType](ts-types.md#safeareatype10)>,<br>edges?: Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | Safe area to be expanded to.<br>Default value:<br>type: [SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],<br>edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]<br>The default value expands the safe area to all available areas.<br>**type**: indicates the type of the extended security zone. This parameter is optional.<br>**edges**: edge for expanding the safe area. This parameter is optional.|
14
15## Example
16
17### Example 1
18
19```
20// xxx.ets
21@Entry
22@Component
23struct SafeAreaExample1 {
24  @State text: string = ''
25  controller: TextInputController = new TextInputController()
26
27  build() {
28    Row() {
29        Column()
30          .height('100%').width('100%')
31          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
32          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
33    }.height('100%')
34  }
35}
36```
37
38![expandSafeArea1](figures/expandSafeArea1.png)
39
40### Example 2
41
42```
43@Entry
44@Component
45struct SafeAreaExample {
46  @State text: string = ''
47  controller: TextInputController = new TextInputController()
48
49  build() {
50    Row() {
51      Stack() {
52        Column()
53          .height('100%').width('100%')
54          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
55          .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
56        Column() {
57          Button('Set caretPosition 1')
58            .onClick(() => {
59              this.controller.caretPosition(1)
60            })
61          TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
62            .placeholderFont({ size: 14, weight: 400 })
63            .width(320).height(40).offset({y: 120})
64            .fontSize(14).fontColor(Color.Black)
65            .backgroundColor(Color.White)
66        }.width('100%').alignItems(HorizontalAlign.Center)
67      }
68    }.height('100%')
69  }
70}
71```
72
73![expandSafeArea2](figures/expandSafeArea2.png)
74