1# Blank 2 3The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It works only when the parent component is **\<Row>**, **\<Column>**, or **\<Flex>**. 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 - On the main axis of the parent container **\<Row>**, **\<Column>**, or **\<Flex>**, if the size of the **\<Blank>** component is not set, the component will be automatically stretched or shrunk; if the size is not set or the container adapts to the size of its child component, the component will not be stretched or shrunk. 21 - Relationship between **size** and **min** of the **\<Blank>** component on the main axis: max(min, size). 22 - On the cross axis of the parent container, if the size of the **\<Blank>** component is set, the component will not fill up the parent container; if the size is not set, the component will fill up the parent container, following the default **alignSelf** settings **ItemAlign.Stretch**. 23 24Since API version 9, this API is supported in ArkTS widgets. 25 26**Parameters** 27 28| Name| Type| Mandatory| Description| 29| -------- | -------- | -------- | -------- | 30| 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.| 31 32## Attributes 33 34In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 35 36| Name| Type| Description| 37| -------- | -------- | -------- | 38| 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.| 39 40## Events 41 42The [universal events](ts-universal-events-click.md) are supported. 43 44## Example 45 46### Example 1 47The sample below shows how the **\<Blank>** component fills the empty spaces in the container in landscape and portrait modes. 48```ts 49// xxx.ets 50@Entry 51@Component 52struct BlankExample { 53 build() { 54 Column() { 55 Row() { 56 Text('Bluetooth').fontSize(18) 57 Blank() 58 Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) 59 }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) 60 }.backgroundColor(0xEFEFEF).padding(20) 61 } 62} 63``` 64 65Portrait mode 66 67 68 69Landscape mode 70 71 72 73 74### Example 2 75Set the **min** parameter when the width of the parent container of the **\<Blank>** component is not set. 76 77```ts 78// xxx.ets 79@Entry 80@Component 81struct BlankExample { 82 build() { 83 Column({ space: 20 }) { 84 // 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. 85 Row() { 86 Text('Bluetooth').fontSize(18) 87 Blank().color(Color.Yellow) 88 Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) 89 }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) 90 91 Row() { 92 Text('Bluetooth').fontSize(18) 93 // Set the minimum width to 160. 94 Blank('160').color(Color.Yellow) 95 Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 }) 96 }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }) 97 98 }.backgroundColor(0xEFEFEF).padding(20).width('100%') 99 } 100} 101``` 102If the width of the parent container is not set, set **min** to specify the minimum width of the **\<Blank>** component. 103 104 105
