• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Blank
2
3The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent container is **\<Row>** or **\<Column>**.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Not supported
13
14
15## APIs
16
17Blank(min?: number | string)
18
19Since API version 9, this API is supported in ArkTS widgets.
20
21**Parameters**
22
23| Name| Type| Mandatory| Description|
24| -------- | -------- | -------- | -------- |
25| min | number \| string | No| Minimum size of the **\<Blank>** component in the container along the main axis.<br>Default value: **0**|
26
27## Attributes
28
29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
30
31| Name| Type| Description|
32| -------- | -------- | -------- |
33| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Since API version 9, this API is supported in ArkTS widgets.|
34
35
36## Example
37### Example 1
38The sample below shows how the **\<Blank>** component fills the empty spaces in the container in landscape and portrait modes.
39```ts
40// xxx.ets
41@Entry
42@Component
43struct BlankExample {
44  build() {
45    Column() {
46      Row() {
47        Text('Bluetooth').fontSize(18)
48        Blank()
49        Toggle({ type: ToggleType.Switch })
50      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
51    }.backgroundColor(0xEFEFEF).padding(20)
52  }
53}
54```
55
56Portrait mode
57
58![en-us_image_0000001256858407](figures/en-us_image_0000001256858407.gif)
59
60Landscape mode
61
62![en-us_image_0000001212378418](figures/en-us_image_0000001212378418.gif)
63
64
65### Example 2
66Set the **min** parameter when the width of the parent container of the **\<Blank>** component is not set.
67
68```ts
69// xxx.ets
70@Entry
71@Component
72struct BlankExample {
73  build() {
74    Column({ space: 20 }) {
75      // If the width of the parent container is not set, the \<Blank> component becomes invalid. In this case, you can set min to specify the minimum width of the \<Blank> component.
76      Row() {
77        Text('Bluetooth').fontSize(18)
78        Blank().color(Color.Yellow)
79        Toggle({ type: ToggleType.Switch })
80      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
81
82      Row() {
83        Text('Bluetooth').fontSize(18)
84        // Set the minimum width to 160.
85        Blank('160').color(Color.Yellow)
86        Toggle({ type: ToggleType.Switch })
87      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
88
89    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
90  }
91}
92```
93If the width of the parent container is not set, set **min** to specify the minimum width of the **\<Blank>** component.
94
95![blankmin](figures/blankmin.png)
96