鸿蒙OpenHarmony【通用样式】JS组件
·
组件普遍支持的可以在style或css中设置组件外观样式，均不是必填项。
说明
从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| width | - | ||
| height | - | ||
| min-width | 0 | ||
| min-height | 0 | ||
| max-width | - | ||
| max-height | - | ||
| padding | 0 | ||
| padding-[left | top | right | bottom] |
| padding-[start | end] | ||
| margin | 0 | ||
| margin-[left | top | right | bottom] |
| margin-[start | end] | ||
| border | - | 0 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
| border-style | string | solid | 使用简写属性设置所有边框的样式，可选值为：- dotted：显示为一系列圆点，圆点半径为border-width的一半。- dashed：显示为一系列短的方形虚线。- solid：显示为一条实线。 |
| border-[left | top | right | bottom]-style |
| border-[left | top | right | bottom] |
| border-width | 0 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 | |
| border-[left | top | right | bottom]-width |
| border-color | black | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 | |
| border-[left | top | right | bottom]-color |
| border-radius | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left | |
| border-[top | bottom]-[left | right]-radius | |
| background | - | 仅支持设置渐变样式，与background-color、background-image不兼容。 | |
| background-color | - | 设置背景颜色。 | |
| background-image | string | - | 设置背景图片。与background-color、background不兼容，支持本地图片资源地址。示例：- background-image: url(“/common/background.png”)不支持svg格式图片。如需显示网络图片，应自行下载后使用内存图片方式刷新，禁用网络URL地址。 |
| background-size | - string- - | auto | 设置背景图片的大小。- string可选值：- contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。- cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。- auto：保持原图的比例不变。- length值参数方式：设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。- 百分比参数方式：以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| background-repeat | string | repeat | 针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。- repeat：在水平轴和竖直轴上同时重复绘制图片。- repeat-x：只在水平轴上重复绘制图片。- repeat-y：只在竖直轴上重复绘制图片。- no-repeat：不会重复绘制图片。 |
| background-position | - string string- - | 0px 0px | - 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。- left：水平方向上最左侧。- right：水平方向上最右侧。- top：竖直方向上最顶部。- bottom：竖直方向上最底部。- center：水平方向或竖直方向上中间位置。- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。- 可以混合使用和。 |
| box-shadow | string | 0 | 语法：box-shadow: h-shadow v-shadow blur spread color通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。示例：- box-shadow :10px 20px 5px 10px #888888- box-shadow :100px 100px 30px red- box-shadow :-100px -100px 0px 40px |
| filter | string | - | 语法：filter: blur(px)通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。示例：filter: blur(10px) |
| backdrop-filter | string | - | 语法：backdrop-filter: blur(px)通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。示例：backdrop-filter: blur(10px) |
| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
| display | string | flex | 确定一个元素所产生的框的类型，可选值为：- flex：弹性布局。- none：不渲染此元素。 |
| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将’display’属性设置为’none’来完全去除框），可选值为：- visible：元素正常显示。- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明visibility和display样式都设置时，仅display生效。 |
| flex | number | string | - |
| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。仅父容器为
、时生效。
|
| flex-shrink | number | 1 | 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。仅父容器为
、时生效。
|
| flex-basis | - | 设置组件在主轴方向上的初始大小。仅父容器为
、时生效。
|
|
| align-self | string | - | 设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：- stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。- flex-start 元素向交叉轴起点对齐。- flex-end 元素向交叉轴终点对齐。- center 元素在交叉轴居中。- baseline 元素在交叉轴基线对齐。 |
| position | string | relative | 设置元素的定位类型，不支持动态变更。- fixed：相对与整个界面进行定位。- absolute：相对于父元素进行定位。- relative：相对于其正常位置进行定位。absolute属性仅在父容器为
时生效。
|
| [left | top | right | bottom |
| [start | end] | ||
| z-index | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 |
| image-fill | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、image（src属性）。svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 | |
| clip-path | [ | ] | none |
| mask-image | - - string | - | 设置渐变色遮罩或本地图片设置。设置渐变色遮罩，示例：linear-gradient(to left, black, white)设置纯色遮罩，示例：linear-gradient(to right, grey , grey)设置本地svg图片为遮罩，示例：url(common/mask.svg) |
| mask-size | - string- - | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。string可选值：- contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。- cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。- auto：保持原图的比例不变。length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| mask-position | - string string- - | 0px 0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。string可选值：- left：水平方向上最左侧。- right：水平方向上最右侧。- top：竖直方向上最顶部。- bottom：竖直方向上最底部。- center：水平方向或竖直方向上中间位置。length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。可以混合使用和。 |
社区规范：仅讨论OpenHarmony相关问题。
更多推荐
17
0- 0
已为社区贡献70条内容
所有评论(0)