1# Border Image 2 3You can draw an image around a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Attributes 10 11| Name | Type | Description | 12| ----------- | ---------------------------------------- | -------------------------------------- | 13| borderImage | [BorderImageOption](#borderimageoption) | Border image or border gradient.<br>This API is supported in ArkTS widgets.| 14 15## BorderImageOption 16 17This API is supported in ArkTS widgets. 18 19| Name | Type | Description | 20| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 21| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | Source or gradient color of the border image.<br>**NOTE**<br>The border image source applies only to container components, such as **\<Row>**, **\<Column>**, and **\<Flex>**.| 22| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Slice width of the upper left corner, upper right corner, lower left corner, and lower right corner of the border image.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: slice height of the upper left or upper right corner of the image.<br>- **Bottom**: slice height of the lower left or lower right corner of the image.<br>- **Left**: slice width of the upper left or lower left corner of the image.<br>- **Right**: slice width of the upper right or lower right corner of the image.| 23| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: width of the top edge of the border image.<br>- **Bottom**: width of the bottom edge of the border image.<br>- **Left**: width of the left edge of the border image.<br>- **Right**: width of the right edge of the border image.<br>If this parameter is set to a negative value, the value **1** is used.| 24| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Amount by which the border image is extended beyond the border box.<br>Default value: **0**<br>**NOTE**<br>If this parameter is set to a negative value, the default value is used.<br>When this parameter is set to a value of the [Length](ts-types.md#length) type, the value applies to the four corners in a unified manner.<br>When this parameter is set to a value of the [EdgeWidths](ts-types.md#edgewidths9) type:<br>- **Top**: amount by which the top edge of the border image is extended beyond the border box.<br>- **Bottom**: amount by which the bottom edge of the border image is extended beyond the border box.<br>- **Left**: amount by which the left edge of the border image is extended beyond the border box.<br>- **Right**: amount by which the right edge of the border image is extended beyond the border box.| 25| repeat | [RepeatMode](#repeatmode) | Repeat mode of the source image's slices on the border.<br>Default value: **RepeatMode.Stretch**| 26| fill | boolean | Whether to fill the center of the border image.<br>Default value: **false** | 27 28## RepeatMode 29 30This API is supported in ArkTS widgets. 31 32| Name | Description | 33| ------- | ----------------------------------- | 34| Repeat | The source image's slices are tiled. Tiles beyond the border box will be clipped. | 35| Stretch | The source image's slices are stretched to fill the border box. | 36| Round | The source image's slices are tiled to fill the border box. Tiles may be compressed when needed.| 37| Space | The source image's slices are tiled to fill the border box. Extra space will be distributed in between tiles. | 38 39## Example 40 41### Example 1 42 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct Index { 49 build() { 50 Row() { 51 Column() { 52 Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) 53 .borderImage({ 54 source: { 55 angle: 90, 56 direction: GradientDirection.Left, 57 colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] 58 }, 59 slice: { top: 10, bottom: 10, left: 10, right: 10 }, 60 width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, 61 repeat: RepeatMode.Stretch, 62 fill: false 63 }) 64 } 65 .width('100%') 66 } 67 .height('100%') 68 } 69} 70``` 71 72 73 74### Example 2 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct BorderImage { 81 @State WidthValue: number = 0 82 @State SliceValue: number = 0 83 @State OutSetValue: number = 0 84 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 85 @State SelectIndex: number = 0 86 @State SelectText: string = 'Repeat' 87 @State FillValue: boolean = false 88 89 build() { 90 Row() { 91 Column({ space: 20 }) { 92 Row() { 93 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 94 } 95 .borderImage({ 96 source: $r('app.media.icon'), 97 slice: this.SliceValue, 98 width: this.WidthValue, 99 outset: this.OutSetValue, 100 repeat: this.RepeatValue[this.SelectIndex], 101 fill: this.FillValue 102 }) 103 104 Column() { 105 Text(`borderImageSlice = ${this.SliceValue}px`) 106 Slider({ 107 value: this.SliceValue, 108 min: 0, 109 max: 100, 110 style: SliderStyle.OutSet 111 }) 112 .onChange((value: number, mode: SliderChangeMode) => { 113 this.SliceValue = value 114 }) 115 } 116 117 Column() { 118 Text(`borderImageWidth = ${this.WidthValue}px`) 119 Slider({ 120 value: this.WidthValue, 121 min: 0, 122 max: 100, 123 style: SliderStyle.OutSet 124 }) 125 .onChange((value: number, mode: SliderChangeMode) => { 126 this.WidthValue = value 127 }) 128 } 129 130 Column() { 131 Text(`borderImageOutSet = ${this.OutSetValue}px`) 132 Slider({ 133 value: this.OutSetValue, 134 min: 0, 135 max: 100, 136 style: SliderStyle.OutSet 137 }) 138 .onChange((value: number, mode: SliderChangeMode) => { 139 this.OutSetValue = value 140 }) 141 } 142 143 Row() { 144 Text('borderImageRepeat: ') 145 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 146 .value(this.SelectText) 147 .selected(this.SelectIndex) 148 .onSelect((index: number, value?: string) => { 149 this.SelectIndex = index 150 this.SelectText = value as string 151 }) 152 } 153 154 Row() { 155 Text(`borderImageFill: ${this.FillValue} `) 156 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 157 .onChange((isOn: boolean) => { 158 this.FillValue = isOn 159 }) 160 } 161 162 } 163 .width('100%') 164 } 165 .height('100%') 166 } 167} 168``` 169 170 171
