提交 a66531bf 编写于 作者: Y yamila

update borderImage

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 00fd872d
# 图片边框设置 # 图片边框设置
设置组件图片边框样式。 设置容器组件的图片边框样式。
> **说明:** > **说明:**
> >
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
| 名称 | 类型 | 描述 | | 名称 | 类型 | 描述 |
| ---------- | ---------------------------------------- | --------------------------------------- | | ---------- | ---------------------------------------- | --------------------------------------- |
| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。 | | source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。<br/>**说明:** 边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。 |
| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框切割宽度。<br/>默认值:0 | | slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框切割宽度。<br/>默认值:0 |
| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值:0 | | width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值:0 |
| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0 | | outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0 |
...@@ -33,9 +33,10 @@ ...@@ -33,9 +33,10 @@
| Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 | | Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 |
| Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 | | Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 |
## 示例 ## 示例
### 示例1
```ts ```ts
// xxx.ets // xxx.ets
...@@ -66,3 +67,48 @@ struct Index { ...@@ -66,3 +67,48 @@ struct Index {
``` ```
![zh-cn_image_borderImageGradient](figures/borderImageGradient.png) ![zh-cn_image_borderImageGradient](figures/borderImageGradient.png)
### 示例2
```ts
// xxx.ets
@Entry
@Component
struct Index {
@State outSetValue: number = 40
build() {
Row() {
Column() {
Row() {
Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
}
.borderImage({
source: $r('app.media.icon'),
slice: `${this.outSetValue}%`,
width: `${this.outSetValue}px`,
outset: '5px',
repeat: RepeatMode.Repeat,
fill: false
})
Slider({
value: this.outSetValue,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.margin({ top: 30 })
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValue = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
.width('100%')
}
.height('100%')
}
}
```
![zh-cn_image_borderImage](figures/borderImage.gif)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册