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 border image.<br>Default value: **0** | 23| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | Width of the border image.<br>Default value: **0** | 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** | 25| repeat | [RepeatMode](#repeatmode) | Repeat mode of the border image.<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 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 filled 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 Index { 81 @State outSetValue: number = 40 82 83 build() { 84 Row() { 85 Column() { 86 Row() { 87 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 88 } 89 .borderImage({ 90 source: $r('app.media.icon'), 91 slice: `${this.outSetValue}%`, 92 width: `${this.outSetValue}px`, 93 outset: '5px', 94 repeat: RepeatMode.Repeat, 95 fill: false 96 }) 97 98 Slider({ 99 value: this.outSetValue, 100 min: 0, 101 max: 100, 102 style: SliderStyle.OutSet 103 }) 104 .margin({ top: 30 }) 105 .onChange((value: number, mode: SliderChangeMode) => { 106 this.outSetValue = value 107 console.info('value:' + value + 'mode:' + mode.toString()) 108 }) 109 } 110 .width('100%') 111 } 112 .height('100%') 113 } 114} 115``` 116 117 118
