• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Blank
2
3The **Blank** component is a spacer in the layout, automatically filling the remaining space along the main axis of its parent container. It works only when the parent component is [Row](ts-container-row.md), [Column](ts-container-column.md), or [Flex](ts-container-flex.md).
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 10:
20 - When the **Blank** component is used within a [Row](ts-container-row.md), [Column](ts-container-column.md), or [Flex](ts-container-flex.md) container, it will automatically stretch or shrink along the main axis if it does not have a main axis size specified. If the **Blank** component has a main axis size specified or if the container is set to adapt to the size of its child nodes, the component will not automatically stretch or shrink.
21 - Relationship between **size** and **min** of the **Blank** component on the main axis: max(min, size).
22 - If the **Blank** component has a cross axis size specified, it will not fill up the parent container on the cross axis. If it does not have a cross axis size specified, it will fill up the parent container on the cross axis, following the **ItemAlign.Stretch** mode, the default setting of **alignSelf**.
23
24**Widget capability**: This API can be used in ArkTS widgets since API version 9.
25
26**Atomic service API**: This API can be used in atomic services since API version 11.
27
28**System capability**: SystemCapability.ArkUI.ArkUI.Full
29
30**Parameters**
31
32| Name| Type| Mandatory| Description|
33| -------- | -------- | -------- | -------- |
34| min | number \| string | No| Minimum size of the **Blank** component in the container along the main axis.<br>Default value: **0**<br>If the type is number, the default unit is vp. If the type is string, the [pixel unit](ts-pixel-units.md) can be explicitly specified, for example, '**10px'**. If the unit is not specified, the default unit vp is used, in which case **'10'** is equivalent to **10vp**.<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.|
35
36## Attributes
37
38In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
39
40### color
41
42color(value: ResourceColor)
43
44Sets the color to fill the blank.
45
46**Widget capability**: This API can be used in ArkTS widgets since API version 9.
47
48**Atomic service API**: This API can be used in atomic services since API version 11.
49
50**System capability**: SystemCapability.ArkUI.ArkUI.Full
51
52**Parameters**
53
54| Name| Type| Mandatory| Description|
55| -------- | -------- | -------- | -------- |
56| value | [ResourceColor](ts-types.md#resourcecolor) | Yes| Color to fill the blank.<br>Default value: **Color.Transparent**|
57
58## Events
59
60The [universal events](ts-component-general-events.md) are supported.
61
62## Example
63
64### Example 1: Filling Remaining Space
65
66This example shows how the **Blank** component fills the remaining space in landscape and portrait modes.
67
68```ts
69// xxx.ets
70@Entry
71@Component
72struct BlankExample {
73  build() {
74    Column() {
75      Row() {
76        Text('Bluetooth').fontSize(18)
77        Blank()
78        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
79      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
80    }.backgroundColor(0xEFEFEF).padding(20)
81  }
82}
83```
84
85Portrait mode
86
87![en-us_image_0000001256858407](figures/en-us_image_0000001256858407.gif)
88
89Landscape mode
90
91![en-us_image_0000001212378418](figures/en-us_image_0000001212378418.gif)
92
93
94### Example 2: Filling a Fixed Width
95
96This example shows the effect of using the **min** parameter of the **Blank** component when its parent component does not have a width set.
97
98```ts
99// xxx.ets
100@Entry
101@Component
102struct BlankExample {
103  build() {
104    Column({ space: 20 }) {
105      // 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.
106      Row() {
107        Text('Bluetooth').fontSize(18)
108        Blank().color(Color.Yellow)
109        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
110      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
111
112      Row() {
113        Text('Bluetooth').fontSize(18)
114        // Set the minimum width to 160.
115        Blank('160').color(Color.Yellow)
116        Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
117      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
118
119    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
120  }
121}
122```
123If the width of the parent container is not set, set **min** to specify the minimum width of the **Blank** component.
124
125![blankmin](figures/blankmin.png)
126