harmony 鸿蒙通用样式

  • 2023-06-24
  • 浏览 (632)

通用样式

组件普遍支持的可以在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+ number 1 元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。
display string flex 确定一个元素所产生的框的类型,可选值为:
- 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 #f0f8ff aliceblue
antiquewhite #faebd7 antiquewhite
aqua #00ffff aqua
aquamarine #7fffd4 aquamarine
azure #f0ffff azure
beige #f5f5dc beige
bisque #ffe4c4 bisque
black #000000 000000
blanchedalmond #ffebcd blanchedalmond
blue #0000ff blue
blueviolet #8a2be2 blueviolet
brown #a52a2a brown
burlywood #deB887 burlywood
cadetblue #5f9ea0 cadetblue
chartreuse #7fff00 chartreuse
chocolate #d2691e chocolate
coral #ff7f50 coral
cornflowerblue #6495ed cornflowerblue
cornsilk #fff8dc cornsilk
crimson #dc143c crimson
cyan #00ffff cyan
darkblue #00008b darkblue
darkcyan #008b8b darkcyan
darkgoldenrod #b8860b darkgoldenrod
darkgray #a9a9a9 darkgray
darkgreen #006400 darkgreen
darkgrey #a9a9a9 darkgrey
darkkhaki #bdb76b darkkhaki
darkmagenta #8b008b darkmagenta
darkolivegreen #556b2f darkolivegreen
darkorange #ff8c00 darkorange
darkorchid #9932cc darkorchid
darkred #8b0000 darkred
darksalmon #e9967a darksalmon
darkseagreen #8fbc8f darkseagreen
darkslateblue #483d8b darkslateblue
darkslategray #2f4f4f darkslategray
darkslategrey #2f4f4f darkslategrey
darkturquoise #00ced1 darkturquoise
darkviolet #9400d3 darkviolet
deeppink #ff1493 deeppink
deepskyblue #00bfff deepskyblue
dimgray #696969 dimgray
dimgrey #696969 dimgrey
dodgerblue #1e90ff dodgerblue
firebrick #b22222 firebrick
floralwhite #fffaf0 floralwhite
forestgreen #228b22 forestgreen
fuchsia #ff00ff fuchsia
gainsboro #dcdcdc gainsboro
ghostwhite #f8f8ff ghostwhite
gold #ffd700 gold
goldenrod #daa520 goldenrod
gray #808080 gray
green #008000 green
greenyellow #adff2f greenyellow
grey #808080 grey
honeydew #f0fff0 honeydew
hotpink #ff69b4 hotpink
indianred #cd5c5c indianred
indigo #4b0082 indigo
ivory #fffff0 ivory
khaki #f0e68c khaki
lavender #e6e6fa lavender
lavenderblush #fff0f5 lavenderblush
lawngreen #7cfc00 lawngreen
lemonchiffon #fffacd lemonchiffon
lightblue #add8e6 lightblue
lightcoral #f08080 lightcoral
lightcyan #e0ffff lightcyan
lightgoldenrodyellow #fafad2 lightgoldenrodyellow
lightgray #d3d3d3 lightgray
lightgreen #90ee90 lightgreen
lightpink #ffb6c1 lightpink
lightsalmon #ffa07a lightsalmon
lightseagreen #20b2aa lightseagreen
lightskyblue #87cefa lightskyblue
lightslategray #778899 lightslategray
lightslategrey #778899 lightslategrey
lightsteelblue #b0c4de lightsteelblue
lightyellow #ffffe0 lightyellow
lime #00ff00 lime
limegreen #32cd32 limegreen
linen #faf0e6 linen
magenta #ff00ff magenta
maroon #800000 maroon
mediumaquamarine #66cdaa mediumaquamarine
mediumblue #0000cd mediumblue
mediumorchid #ba55d3 mediumorchid
mediumpurple #9370db mediumpurple
mediumseagreen #3cb371 mediumseagreen
mediumslateblue #7b68ee mediumslateblue
mediumspringgreen #00fa9a mediumspringgreen
mediumturquoise #48d1cc mediumturquoise
mediumvioletred #c71585 mediumvioletred
midnightblue #191970 midnightblue
mintcream #f5fffa mintcream
mistyrose #ffe4e1 mistyrose
moccasin #ffe4b5 moccasin
navajowhite #ffdead navajowhite
navy #000080 navy
oldlace #fdf5e6 oldlace
olive #808000 olive
olivedrab #6b8e23 olivedrab
orange #ffa500 orange
orangered #ff4500 orangered
orchid #da70d6 orchid
palegoldenrod #eee8aa palegoldenrod
palegreen #98fb98 palegreen
paleturquoise #afeeee paleturquoise
palevioletred #db7093 palevioletred
papayawhip #ffefd5 papayawhip
peachpuff #ffdab9 peachpuff
peru #cd853f peru
pink #ffc0cb pink
plum #dda0dd plum
powderblue #b0e0e6 powderblue
purple #800080 purple
rebeccapurple #663399 rebeccapurple
red #ff0000 red
rosybrown #bc8f8f rosybrown
royalblue #4169e1 royalblue
saddlebrown #8b4513 saddlebrown
salmon #fa8072 salmon
sandybrown #f4a460 sandybrown
seagreen #2e8b57 seagreen
seashell #fff5ee seashell
sienna #a0522d sienna
silver #c0c0c0 silver
skyblue #87ceeb skyblue
slateblue #6a5acd slateblue
slategray #708090 slategray
slategrey #708090 slategray
snow #fffafa snow
springgreen #00ff7f springgreen
steelblue #4682b4 steelblue
tan #d2b48c tan
teal #008080 teal
thistle #d8Bfd8 thistle
tomato #ff6347 tomato
turquoise #40e0d0 turquoise
violet #ee82ee violet
wheat #f5deb3 wheat
white #ffffff white
whitesmoke #f5f5f5 whitesmoke
yellow #ffff00 yellow
yellowgreen #9acd32 yellowgreen

你可能感兴趣的鸿蒙文章

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

harmony 鸿蒙通用属性

harmony 鸿蒙通用事件

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

harmony 鸿蒙progress

0  赞