openharmony 鸿蒙 js-lite-common-styles

2025-06-12 浏览 (1)

通用样式

组件普遍支持的可以在style或css中设置组件外观样式。

名称类型默认值必填描述
width<length> | <percentage>5+-设置组件自身的宽度。
未设置时组件宽度默认为0。
height<length> | <percentage>5+-设置组件自身的高度。
未设置时组件高度默认为0。
padding<length>0使用简写属性设置所有的内边距属性。
  该属性可以有1到4个值:
- 指定一个值时,该值指定四个边的内边距。
- 指定两个值时,第一个值指定上下两边的内边距,第二个指定左右两边的内边距。
- 指定三个值时,第一个指定上边的内边距,第二个指定左右两边的内边距,第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距(顺时针顺序)。
padding-[left|top|right|bottom]<length>0设置左、上、右、下内边距属性。
margin<length> | <percentage>5+0使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
- 只有一个值时,这个值会被指定给全部的四个边。
- 两个值时,第一个值被匹配给上和下,第二个值被匹配给左和右。
- 三个值时,第一个值被匹配给上, 第二个值被匹配给左和右,第三个值被匹配给下。
- 四个值时,会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。
margin-[left|top|right|bottom]<length> | <percentage>5+0设置左、上、右、下外边距属性。
border-width<length>0使用简写属性设置元素的所有边框宽度。
border-color<color>black使用简写属性设置元素的所有边框颜色。
border-radius<length>-border-radius属性是设置元素的外边框圆角半径。
background-color<color>-设置背景颜色。
opacity5+number1元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。
displaystringflex确定一个元素所产生的框的类型,可选值为:
- flex:弹性布局。
- none:不渲染此元素。
[left|top]<length> | <percentage>6+-left|top确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

说明:

通用样式都不是必填项。

目前,样式支持的颜色格式如下:

  • rgb(255, 255, 255)

  • rgba(255, 255, 255, 1.0)

  • HEX格式:#rrggbb,#aarrggbb

  • 枚举格式:black,white等,详见 表1 当前支持的颜色枚举。Script脚本中不支持枚举格式。

表1 当前支持的颜色枚举

枚举名称对应颜色颜色
aliceblue#f0f8ffaliceblue
antiquewhite#faebd7antiquewhite
aqua#00ffffaqua
aquamarine#7fffd4aquamarine
azure#f0ffffazure
beige#f5f5dcbeige
bisque#ffe4c4bisque
black#000000000000
blanchedalmond#ffebcdblanchedalmond
blue#0000ffblue
blueviolet#8a2be2blueviolet
brown#a52a2abrown
burlywood#deB887burlywood
cadetblue#5f9ea0cadetblue
chartreuse#7fff00chartreuse
chocolate#d2691echocolate
coral#ff7f50coral
cornflowerblue#6495edcornflowerblue
cornsilk#fff8dccornsilk
crimson#dc143ccrimson
cyan#00ffffcyan
darkblue#00008bdarkblue
darkcyan#008b8bdarkcyan
darkgoldenrod#b8860bdarkgoldenrod
darkgray#a9a9a9darkgray
darkgreen#006400darkgreen
darkgrey#a9a9a9darkgrey
darkkhaki#bdb76bdarkkhaki
darkmagenta#8b008bdarkmagenta
darkolivegreen#556b2fdarkolivegreen
darkorange#ff8c00darkorange
darkorchid#9932ccdarkorchid
darkred#8b0000darkred
darksalmon#e9967adarksalmon
darkseagreen#8fbc8fdarkseagreen
darkslateblue#483d8bdarkslateblue
darkslategray#2f4f4fdarkslategray
darkslategrey#2f4f4fdarkslategrey
darkturquoise#00ced1darkturquoise
darkviolet#9400d3darkviolet
deeppink#ff1493deeppink
deepskyblue#00bfffdeepskyblue
dimgray#696969dimgray
dimgrey#696969dimgrey
dodgerblue#1e90ffdodgerblue
firebrick#b22222firebrick
floralwhite#fffaf0floralwhite
forestgreen#228b22forestgreen
fuchsia#ff00fffuchsia
gainsboro#dcdcdcgainsboro
ghostwhite#f8f8ffghostwhite
gold#ffd700gold
goldenrod#daa520goldenrod
gray#808080gray
green#008000green
greenyellow#adff2fgreenyellow
grey#808080grey
honeydew#f0fff0honeydew
hotpink#ff69b4hotpink
indianred#cd5c5cindianred
indigo#4b0082indigo
ivory#fffff0ivory
khaki#f0e68ckhaki
lavender#e6e6falavender
lavenderblush#fff0f5lavenderblush
lawngreen#7cfc00lawngreen
lemonchiffon#fffacdlemonchiffon
lightblue#add8e6lightblue
lightcoral#f08080lightcoral
lightcyan#e0fffflightcyan
lightgoldenrodyellow#fafad2lightgoldenrodyellow
lightgray#d3d3d3lightgray
lightgreen#90ee90lightgreen
lightpink#ffb6c1lightpink
lightsalmon#ffa07alightsalmon
lightseagreen#20b2aalightseagreen
lightskyblue#87cefalightskyblue
lightslategray#778899lightslategray
lightslategrey#778899lightslategrey
lightsteelblue#b0c4delightsteelblue
lightyellow#ffffe0lightyellow
lime#00ff00lime
limegreen#32cd32limegreen
linen#faf0e6linen
magenta#ff00ffmagenta
maroon#800000maroon
mediumaquamarine#66cdaamediumaquamarine
mediumblue#0000cdmediumblue
mediumorchid#ba55d3mediumorchid
mediumpurple#9370dbmediumpurple
mediumseagreen#3cb371mediumseagreen
mediumslateblue#7b68eemediumslateblue
mediumspringgreen#00fa9amediumspringgreen
mediumturquoise#48d1ccmediumturquoise
mediumvioletred#c71585mediumvioletred
midnightblue#191970midnightblue
mintcream#f5fffamintcream
mistyrose#ffe4e1mistyrose
moccasin#ffe4b5moccasin
navajowhite#ffdeadnavajowhite
navy#000080navy
oldlace#fdf5e6oldlace
olive#808000olive
olivedrab#6b8e23olivedrab
orange#ffa500orange
orangered#ff4500orangered
orchid#da70d6orchid
palegoldenrod#eee8aapalegoldenrod
palegreen#98fb98palegreen
paleturquoise#afeeeepaleturquoise
palevioletred#db7093palevioletred
papayawhip#ffefd5papayawhip
peachpuff#ffdab9peachpuff
peru#cd853fperu
pink#ffc0cbpink
plum#dda0ddplum
powderblue#b0e0e6powderblue
purple#800080purple
rebeccapurple#663399rebeccapurple
red#ff0000red
rosybrown#bc8f8frosybrown
royalblue#4169e1royalblue
saddlebrown#8b4513saddlebrown
salmon#fa8072salmon
sandybrown#f4a460sandybrown
seagreen#2e8b57seagreen
seashell#fff5eeseashell
sienna#a0522dsienna
silver#c0c0c0silver
skyblue#87ceebskyblue
slateblue#6a5acdslateblue
slategray#708090slategray
slategrey#708090slategray
snow#fffafasnow
springgreen#00ff7fspringgreen
steelblue#4682b4steelblue
tan#d2b48ctan
teal#008080teal
thistle#d8Bfd8thistle
tomato#ff6347tomato
turquoise#40e0d0turquoise
violet#ee82eeviolet
wheat#f5deb3wheat
white#ffffffwhite
whitesmoke#f5f5f5whitesmoke
yellow#ffff00yellow
yellowgreen#9acd32yellowgreen

你可能感兴趣的鸿蒙文章

harmony 鸿蒙兼容JS的类Web开发范式(ArkUI.Lite)

harmony 鸿蒙通用属性

harmony 鸿蒙通用事件

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

harmony 鸿蒙progress

  • 所属分类: 后端技术
  • 本文标签: 软件 鸿蒙
  • 版权声明: 本文链接 https://seaxiang.com/blog/m3c1rl