Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
0b697b0f
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
0b697b0f
编写于
8月 18, 2023
作者:
O
openharmony_ci
提交者:
Gitee
8月 18, 2023
浏览文件
操作
浏览文件
下载
差异文件
!22473 22256挑单到monthly0815
Merge pull request !22473 from 田雨/cherry-pick-1692325777
上级
f479d7fa
0d6e8da9
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
79 addition
and
26 deletion
+79
-26
zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif
...pplication-dev/reference/arkui-ts/figures/borderImage.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
...eference/arkui-ts/ts-universal-attributes-border-image.md
+79
-26
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif
查看替换文件 @
f479d7fa
浏览文件 @
0b697b0f
76.8 KB
|
W:
|
H:
358.3 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @
0b697b0f
...
@@ -16,14 +16,14 @@
...
@@ -16,14 +16,14 @@
该接口支持在ArkTS卡片中使用。
该接口支持在ArkTS卡片中使用。
| 名称
| 类型 | 描述
|
| 名称
| 类型 | 描述
|
| ------ | ----------------------------------------
|
---------------------------------------- |
| ------ | ----------------------------------------
-------------------- | --------------------
---------------------------------------- |
| source | string
\|
[
Resource
](
ts-types.md#resource
)
\|
[
linearGradient
](
ts-universal-attributes-gradient-color.md
)
| 边框图源或者渐变色设置。
<br/>
**说明:**
<br>
边框图源仅适用于容器组件,如Row、Column、Flex,在非容器组件上使用会失效。 |
| 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
|
| 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/>
-
Top:设置图片左上角或者右上角被切割的高。
<br/>
-
Bottom:设置图片左下角或者右下角被切割的高。
<br/>
-
Left:设置图片左上角或者左下角被切割的宽。
<br/>
-
Right:设置图片右上角或者右下角被切割的宽。
|
| 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
<br/>
**说明:**
<br/>
参数类型为
[
Length
](
ts-types.md#length
)
时,统一设置四个角的宽高,设置负数时取默认值。
<br/>
参数为
[
EdgeWidths
](
ts-types.md#edgewidths9
)
时:
<br/>
-
Top:设置图片边框上边框的宽。
<br/>
-
Bottom:设置图片边框下边框的宽。
<br/>
-
Left:设置图片边框左边框的宽。
<br/>
-
Right:设置图片边框右边框宽。
<br/>
设置负数时值取1。
|
| 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
<br/>
**说明:**
<br/>
设置负数时取默认值。
<br/>
参数类型为
[
Length
](
ts-types.md#length
)
时,统一设置四个角的宽高。
<br/>
参数为
[
EdgeWidths
](
ts-types.md#edgewidths9
)
时:
<br/>
-
Top:设置边框图片上边框向外延伸的距离。
<br/>
-
Bottom:设置边框图片下边框向外延伸的距离。
<br/>
-
Left:设置边框图片左边框向外延伸的距离。
<br/>
-
Right:设置边框图片右边框向外延伸的距离。
|
| repeat |
[
RepeatMode
](
#repeatmode枚举说明
)
| 设置边框图片的重复方式。
<br/>
默认值:RepeatMode.Stretch
|
| repeat |
[
RepeatMode
](
#repeatmode枚举说明
)
| 设置被切割的图片在边框上的重复方式。
<br/>
默认值:RepeatMode.Stretch
|
| fill | boolean
| 设置边框图片中心填充。
<br/>
默认值:false
|
| fill | boolean
| 设置边框图片中心填充。
<br/>
默认值:false
|
## RepeatMode枚举说明
## RepeatMode枚举说明
...
@@ -77,35 +77,88 @@ struct Index {
...
@@ -77,35 +77,88 @@ struct Index {
// xxx.ets
// xxx.ets
@
Entry
@
Entry
@
Component
@
Component
struct
Index
{
struct
BorderImage
{
@
State
outSetValue
:
number
=
40
@
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
()
{
build
()
{
Row
()
{
Row
()
{
Column
()
{
Column
(
{
space
:
20
}
)
{
Row
()
{
Row
()
{
Text
(
'
This is borderImage.
'
).
textAlign
(
TextAlign
.
Center
).
fontSize
(
50
)
Text
(
'
This is borderImage.
'
).
textAlign
(
TextAlign
.
Center
).
fontSize
(
50
)
}
}
.
borderImage
({
.
borderImage
({
source
:
$r
(
'
app.media.icon
'
),
source
:
$r
(
'
app.media.icon
'
),
slice
:
`
${
this
.
outSetValue
}
%`
,
slice
:
this
.
SliceValue
,
width
:
`
${
this
.
outSetValue
}
px`
,
width
:
this
.
WidthValue
,
outset
:
'
5px
'
,
outset
:
this
.
OutSetValue
,
repeat
:
RepeatMode
.
Repeat
,
repeat
:
this
.
RepeatValue
[
this
.
SelectIndex
]
,
fill
:
fals
e
fill
:
this
.
FillValu
e
})
})
Slider
({
Column
()
{
value
:
this
.
outSetValue
,
Text
(
`borderImageSlice =
${
this
.
SliceValue
}
px`
)
min
:
0
,
Slider
({
max
:
100
,
value
:
this
.
SliceValue
,
style
:
SliderStyle
.
OutSet
min
:
0
,
})
max
:
100
,
.
margin
({
top
:
30
})
style
:
SliderStyle
.
OutSet
.
onChange
((
value
:
number
,
mode
:
SliderChangeMode
)
=>
{
})
this
.
outSetValue
=
value
.
onChange
((
value
:
number
,
mode
:
SliderChangeMode
)
=>
{
console
.
info
(
'
value:
'
+
value
+
'
mode:
'
+
mode
.
toString
())
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
,
min
:
0
,
max
:
100
,
style
:
SliderStyle
.
OutSet
})
})
.
onChange
((
value
:
number
,
mode
:
SliderChangeMode
)
=>
{
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%
'
)
.
width
(
'
100%
'
)
}
}
...
@@ -114,4 +167,4 @@ struct Index {
...
@@ -114,4 +167,4 @@ struct Index {
}
}
```
```
![
zh-cn_image_borderImage
](
figures/borderImage.gif
)
![
borderImage
](
figures/borderImage.gif
)
\ No newline at end of file
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录