Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
fc4775e3
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看板
未验证
提交
fc4775e3
编写于
7月 07, 2022
作者:
P
pensir
提交者:
Gitee
7月 07, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
JS组件--通用样式(js-components-common-styles.md)中格式统一
Signed-off-by:
N
pensir
<
zhpengk@isoftstone.com
>
上级
6ccdb6bb
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
1 addition
and
1 deletion
+1
-1
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
...ion-dev/reference/arkui-js/js-components-common-styles.md
+1
-1
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md
浏览文件 @
fc4775e3
...
...
@@ -53,7 +53,7 @@
| [start
\|
end]
<sup>
6+
</sup>
|
<
length
>
\|
<
percentage
>
| - | start
\|
end需要配合position样式使用,来确定元素的偏移位置。
<br/>
-
start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
<br/>
-
end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 |
| z-index
<sup>
6+
</sup>
| number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大,渲染数据越靠后。
<br/>
z-index不支持auto,并且opacity等其他样式不会影响z-index的渲染顺序。 |
| image-fill
<sup>
6+
</sup>
|
<
color
>
| - | 为svg图片填充颜色,支持组件范围(与设置图片资源的属性):button(icon属性)、piece(icon属性)、search(icon属性)、input(headericon属性)、textarea(headericon属性)、image(src属性)、toolbar-item(icon属性)。
<br/>
svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值,且仅对svg图片内显示声明的fill属性生效。 |
| clip-path
<sup>
6+
</sup>
| [
<
geometry-box
>
\|
\|
<
basic-shape
>
]
\|
none | - | 设置组件的裁剪区域。区域内的部分显示,区域外的不显示。
<br/>
<
geometry-box
>
:表示裁剪区域的作用范围,默认为border-box。可选值为:
<br/>
-
margin-box:margin计算入长宽尺寸内。
<br/>
-
border-box:border计算入长宽尺寸内。
<br/>
-
padding-box:padding计算入长宽尺寸内。
<br/>
-
content-box:margin/border/padding不计算入长宽尺寸内。
<br/>
<
basic-shape
>
:表示裁剪的形状。包含以下类型:
<br/>
-
inset,格式为:inset(
<
percentage
>
{1,4}
[
round
<
'border-radius'
>
]?
)。
<br/>
-
circle,格式为:circle(
[
<
percentage
>
]?
[
at
<
percentage
> <
percentage
>
]?
)。
<br/>
-
ellipse,格式为:ellipse(
[
<
percentage
>
{2}
]?
[
at
<
percentage
> <
percentage
>
]?
)。
<br/>
-
polygon,格式为:polygon(
[
<
percentage
> <
percentage
>
]\#
)
<br/>
-
path,格式为:path(
<
string
>
)。 |
| clip-path
<sup>
6+
</sup>
| [
<
geometry-box
>
\|
<
basic-shape
>
]
\|
none | - | 设置组件的裁剪区域。区域内的部分显示,区域外的不显示。
<br/>
<
geometry-box
>
:表示裁剪区域的作用范围,默认为border-box。可选值为:
<br/>
-
margin-box:margin计算入长宽尺寸内。
<br/>
-
border-box:border计算入长宽尺寸内。
<br/>
-
padding-box:padding计算入长宽尺寸内。
<br/>
-
content-box:margin/border/padding不计算入长宽尺寸内。
<br/>
<
basic-shape
>
:表示裁剪的形状。包含以下类型:
<br/>
-
inset,格式为:inset(
<
percentage
>
{1,4}
[
round
<
'border-radius'
>
]?
)。
<br/>
-
circle,格式为:circle(
[
<
percentage
>
]?
[
at
<
percentage
> <
percentage
>
]?
)。
<br/>
-
ellipse,格式为:ellipse(
[
<
percentage
>
{2}
]?
[
at
<
percentage
> <
percentage
>
]?
)。
<br/>
-
polygon,格式为:polygon(
[
<
percentage
> <
percentage
>
]\#
)
<br/>
-
path,格式为:path(
<
string
>
)。 |
| mask-image
<sup>
6+
</sup>
| -
<
linear-gradient
>
<br/>
-
string | - | 设置渐变色遮罩或本地图片设置。
<br/>
设置渐变色遮罩,示例:
<br/>
linear-gradient(to
left,
black,
white)
<br/>
设置纯色遮罩,示例:
<br/>
linear-gradient(to
right,
grey
,
grey)
<br/>
设置本地svg图片为遮罩,示例:url(common/mask.svg) |
| mask-size
<sup>
6+
</sup>
| -
string
<br/>
-
<
length
><
length
>
<br/>
-
<
percentage
> <
percentage
>
| auto | 设置遮罩图片显示大小,仅当mask-image为图片资源时有效。
<br/>
string可选值:
<br/>
-
contain:把图像扩展至最大尺寸,以使其高度和宽度完全适用内容区域。
<br/>
-
cover:把图像扩展至足够大,以使背景图像完全覆盖背景区域;背景图像的某些部分也许无法显示在背景定位区域中。
<br/>
-
auto:保持原图的比例不变。
<br/>
length值参数方式:设置图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为
"auto"。
<br/>
百分比参数方式:以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为
"auto"。 |
| mask-position
<sup>
6+
</sup>
| -
string
string
<br/>
-
<
length
> <
length
>
<br/>
-
<
percentage
> <
percentage
>
| 0px
0px | 设置遮罩图片显示位置,仅当mask-image为图片资源时有效。关键词方式:如果仅规定了一个关键词,那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
<br/>
string可选值:
<br/>
-
left:水平方向上最左侧。
<br/>
-
right:水平方向上最右侧。
<br/>
-
top:竖直方向上最顶部。
<br/>
-
bottom:竖直方向上最底部。
<br/>
-
center:水平方向或竖直方向上中间位置。
<br/>
length值参数方式:第一个值是水平位置,第二个值是垂直位置。
左上角是
0
0。单位是像素
(0px
0px)
。如果仅规定了一个值,另外一个值将是50%。
<br/>
百分比参数方式:第一个值是水平位置,第二个值是垂直位置。左上角是
0%
0%。右下角是
100%
100%。如果仅规定了一个值,另外一个值为50%。
<br/>
可以混合使用
<
percentage
>
和
<
length
>
。 |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录