• 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**<br>**NOTE**<br>This parameter cannot be set in percentage. If the value is negative, the default value is used. If the minimum size is larger than the available space of the container, it is used as the component size, and the component extends beyond the container.|
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>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets. |
34
35## Events
36
37The [universal events](ts-universal-events-click.md) are supported.
38
39## Example
40
41### Example 1
42The sample below shows how the **\<Blank>** component fills the empty spaces in the container in landscape and portrait modes.
43```ts
44// xxx.ets
45@Entry
46@Component
47struct BlankExample {
48  build() {
49    Column() {
50      Row() {
51        Text('Bluetooth').fontSize(18)
52        Blank()
53        Toggle({ type: ToggleType.Switch })
54      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
55    }.backgroundColor(0xEFEFEF).padding(20)
56  }
57}
58```
59
60Portrait mode
61
62![en-us_image_0000001256858407](figures/en-us_image_0000001256858407.gif)
63
64Landscape mode
65
66![en-us_image_0000001212378418](figures/en-us_image_0000001212378418.gif)
67
68
69### Example 2
70Set the **min** parameter when the width of the parent container of the **\<Blank>** component is not set.
71
72```ts
73// xxx.ets
74@Entry
75@Component
76struct BlankExample {
77  build() {
78    Column({ space: 20 }) {
79      // 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.
80      Row() {
81        Text('Bluetooth').fontSize(18)
82        Blank().color(Color.Yellow)
83        Toggle({ type: ToggleType.Switch })
84      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
85
86      Row() {
87        Text('Bluetooth').fontSize(18)
88        // Set the minimum width to 160.
89        Blank('160').color(Color.Yellow)
90        Toggle({ type: ToggleType.Switch })
91      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
92
93    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
94  }
95}
96```
97If the width of the parent container is not set, set **min** to specify the minimum width of the **\<Blank>** component.
98
99![blankmin](figures/blankmin.png)
100