未验证 提交 9ba15f44 编写于 作者: O openharmony_ci 提交者: Gitee

!22300 22256挑单到4.0beta2

Merge pull request !22300 from 田雨/cherry-pick-1692083268
......@@ -17,12 +17,12 @@
该接口支持在ArkTS卡片中使用。
| 名称 | 类型 | 描述 |
| ------ | ---------------------------------------- | ---------------------------------------- |
| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。<br/>**说明:**<br>边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。 |
| 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 |
| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0 |
| repeat | [RepeatMode](#repeatmode枚举说明) | 设置边框图片的重复方式。<br/>默认值:RepeatMode.Stretch |
| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片左上角、右上角、左下角以及右下角的切割宽度。<br/>默认值:0<br/>**说明:**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时,统一设置四个角的宽高。<br/>参数为[EdgeWidths](ts-types.md#edgewidths9)时:<br/>-&nbsp;Top:设置图片左上角或者右上角被切割的高。<br/>-&nbsp;Bottom:设置图片左下角或者右下角被切割的高。<br/>-&nbsp;Left:设置图片左上角或者左下角被切割的宽。<br/>-&nbsp;Right:设置图片右上角或者右下角被切割的宽。 |
| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值:0<br/>**说明:**<br/>参数类型为[Length](ts-types.md#length)时,统一设置四个角的宽高,设置负数时取默认值。<br/>参数为[EdgeWidths](ts-types.md#edgewidths9)时:<br/>-&nbsp;Top:设置图片边框上边框的宽。<br/>-&nbsp;Bottom:设置图片边框下边框的宽。<br/>-&nbsp;Left:设置图片边框左边框的宽。<br/>-&nbsp;Right:设置图片边框右边框宽。<br/>设置负数时值取1。 |
| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值:0<br/>**说明:**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时,统一设置四个角的宽高。<br/>参数为[EdgeWidths](ts-types.md#edgewidths9)时:<br/>-&nbsp;Top:设置边框图片上边框向外延伸的距离。<br/>-&nbsp;Bottom:设置边框图片下边框向外延伸的距离。<br/>-&nbsp;Left:设置边框图片左边框向外延伸的距离。<br/>-&nbsp;Right:设置边框图片右边框向外延伸的距离。 |
| repeat | [RepeatMode](#repeatmode枚举说明) | 设置被切割的图片在边框上的重复方式。<br/>默认值:RepeatMode.Stretch |
| fill | boolean | 设置边框图片中心填充。<br/>默认值:false |
## RepeatMode枚举说明
......@@ -77,36 +77,89 @@ struct Index {
// xxx.ets
@Entry
@Component
struct Index {
@State outSetValue: number = 40
struct BorderImage {
@State WidthValue: number = 0
@State SliceValue: number = 0
@State OutSetValue: number = 0
@State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space]
@State SelectIndex: number = 0
@State SelectText: string = 'Repeat'
@State FillValue: boolean = false
build() {
Row() {
Column() {
Column({ space: 20 }) {
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
slice: this.SliceValue,
width: this.WidthValue,
outset: this.OutSetValue,
repeat: this.RepeatValue[this.SelectIndex],
fill: this.FillValue
})
Column() {
Text(`borderImageSlice = ${this.SliceValue}px`)
Slider({
value: this.SliceValue,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.onChange((value: number, mode: SliderChangeMode) => {
this.SliceValue = value
})
}
Column() {
Text(`borderImageWidth = ${this.WidthValue}px`)
Slider({
value: this.WidthValue,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.onChange((value: number, mode: SliderChangeMode) => {
this.WidthValue = value
})
}
Column() {
Text(`borderImageOutSet = ${this.OutSetValue}px`)
Slider({
value: this.outSetValue,
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())
this.OutSetValue = value
})
}
Row() {
Text('borderImageRepeat: ')
Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }])
.value(this.SelectText)
.selected(this.SelectIndex)
.onSelect((index: number, text: string) => {
this.SelectIndex = index
this.SelectText = text
})
}
Row() {
Text(`borderImageFill: ${this.FillValue} `)
Toggle({ type: ToggleType.Switch, isOn: this.FillValue })
.onChange((isOn: boolean) => {
this.FillValue = isOn
})
}
}
.width('100%')
}
.height('100%')
......@@ -114,4 +167,4 @@ struct Index {
}
```
![zh-cn_image_borderImage](figures/borderImage.gif)
\ No newline at end of file
![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.
先完成此消息的编辑!
想要评论请 注册