Common Styles

You can set component appearance in the style attribute or .css files.

Name

Type

Default Value

Mandatory

Description

width

<length> | <percentage>

-

No

Component width.

If this attribute is not set, the width required for the element content is used.

height

<length> | <percentage>

-

No

Component height.

If this length attribute is not set, the length required for the element content is used.

min-width5+

<length>

0

No

Minimum component width

min-height5+

<length>

0

No

Minimum component height

max-width5+

<length>

-

No

Maximum component width, which has no restriction by default

max-height5+

<length>

-

No

Maximum component height, which has no restriction by default

padding

<length> | <percentage>5+

0

No

Shorthand attribute to set all padding attributes.

The attribute can have one to four values:
  • If you set only one value, it specifies the padding for four sides.

  • If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.

  • If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.

  • If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).

padding-[left|top|right|bottom]

<length> | <percentage>5+

0

No

Left, top, right, and bottom padding (in px).

padding-[start|end]

<length> | <percentage>5+

0

No

Start and end padding.

margin

<length> | <percentage>5+

0

No

Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:

  • If you set only one value, it specifies the margin for all the four sides.

  • If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.

  • If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.

  • If you set four values, they are margins for top, right, bottom, and left sides, respectively.

margin-[left|top|right|bottom]

<length> | <percentage>5+

0

No

Left, top, right, and bottom margins.

margin-[start|end]

<length> | <percentage>5+

0

No

Start and end margins.

border

-

0

No

Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

border-style

string

solid

No

Shorthand attribute to set the style for all borders. Available values are as follows:

  • dotted: Dotted border. The radius of a dot is half of border-width.
  • dashed: Dashed border
  • solid: Solid border

border-[left|top|right|bottom]-style

string

solid

No

Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid.

border-[left|top|right|bottom]

-

-

No

Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set.

border-width

<length>

0

No

Shorthand attribute to set the width of all borders, or separately set the width of each border.

border-[left|top|right|bottom]-width

<length>

0

No

Attribute to set widths of left, top, right, and bottom borders.

border-color

<color>

black

No

Shorthand attribute to set the color of all borders, or separately set the color of each border.

border-[left|top|right|bottom]-color

<color>

black

No

Attribute to set colors of left, top, right, and bottom borders.

border-radius

<length>

-

No

Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time.

border-[top|bottom]-[left|right]-radius

<length>

-

No

Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners

background

<linear-gradient>

-

No

This attribute supports Gradient Styles only but is not compatible with background-color or background-image.

background-color

<color>

-

No

Background color.

background-image

string

-

No

Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported.

Example:

background-image: url("/common/background.png")

background-size

  • string
  • <length> <length>
  • <percentage> <percentage>

auto

No

Background image size.

  • The string values are as follows:
    • contain: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.
    • cover: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.
    • auto: The original image width-height ratio is retained.
  • The two <length> values are as follows:

    Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

  • The two <percentage> values are as follows:

    Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.

background-repeat

string

repeat

No

How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.

  • repeat: Repeatedly draws images along the x-axis and y-axis at the same time.
  • repeat-x: Repeatedly draws images along the x-axis.
  • repeat-y: Repeatedly draws images along the y-axis.
  • no-repeat: The image is not drawn repeatedly.

background-position

  • string string
  • <length> <length>
  • <percentage> <percentage>

0px 0px

No

  • Using keywords: If only one keyword is specified, the other value is center by default. The two values define the horizontal position and vertical position, respectively.
    • left: leftmost in the horizontal direction
    • right: rightmost in the horizontal direction
    • top: top in the vertical direction
    • bottom: bottom in the vertical direction
    • center: center position
  • Using <length>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0 0 indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is 50%.
  • Using <percentage>: The first value indicates the horizontal position, and the second value indicates the vertical position. 0% 0% indicates the upper left corner. 100% 100% indicates the lower right corner. If only one value is specified, the other one is 50%.
  • Using both <percentage> and <length>.

box-shadow5+

-

0

No

Shadow style of the current component. The value consists of the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: 0), extension distance (optional, default value: 0), and color (optional, default value: black) of the shadow.

Syntax: box-shadow: h-shadow v-shadow blur spread color

Example:

  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px

filter5+

string

-

No

Radius of the blur area within the component layout. If the radius is not set, the default value 0 (no blur area) is used. Percentage values are not supported.

Syntax: filter: blur(px)

Example:

filter: blur(10px)

backdrop-filter5+

string

-

No

Radius of the background blur area within the component layout. If the radius is not set, the default value 0 (no background blur) is used. Percentage values are not supported.

Syntax: backdrop-filter: blur(px)

Example:

backdrop-filter: blur(10px)

opacity

number

1

No

Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.

display

string

flex

No

How and whether to display the box containing an element. Available values are as follows:

  • flex: flexible layout
  • none: The element is hidden.

visibility

string

visible

No

Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows:

  • visible: The element is visible.
  • hidden: The element is hidden but still takes up space.
NOTE:

If both visibility and display are set, only display takes effect.

flex

-

-

No

How to divide available space of the parent component for a child component.

You can set one, two5+, or three5+ values for this style.

Set one value in either of the following ways:

  • A unitless number to set flex-grow.
  • A valid width value5+ to set flex-basis.

Set two values5+ in the following ways:

The first value must be a unitless number used to set flex-grow. The second value must be either of the following:

  • A unitless number to set flex-shrink.
  • A valid width value to set flex-basis.

Set three values5+ in the following ways:

The first value must be a unitless number used to set flex-grow. The second value must be a unitless number used to set flex-shrink. The third value must be a valid width value used to set flex-basis.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

flex-grow

number

0

No

How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value 0 indicates that the child component does not grow.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

flex-shrink

number

1

No

How much a child component will shrink. The shrink occurs only when the sum of default child component widths is greater than that of the parent component. Value 0 indicates that the child component does not shrink.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

flex-basis

<length>

-

No

Initial length of the flex item on the main axis.

NOTE:

This style takes effect only when the container is any of the following components: <div>, <list-item>, <refresh>, <stepper-item>5+, and <tabs>.

position

string

relative

No

Positioning type of an element. Dynamic changes are not supported.

  • fixed: The element is positioned related to the browser window.
  • absolute: The element is positioned absolutely to its parent element.
  • relative: The element is positioned relative to its normal position.
NOTE:

The absolute attribute takes effect only when the parent component is <div> or <stack>.

[left|top|right|bottom]

<length>

-

No

left|top|right|bottom must be used together with position to determine the offset position of an element.

  • The left attribute specifies the left edge position of the element. This attribute defines the offset between the left edge of a positioned element and that of a block included in the element.
  • The top attribute specifies the top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.
  • The right attribute specifies the right edge position of the element. This attribute defines the offset between the right edge of a positioned element and that of a block included in the element.
  • The bottom attribute specifies the bottom edge position of the element. This attribute defines the offset between the bottom edge of a positioned element and that of a block included in the element.

NOTE:

  • The above-mentioned universal styles are not mandatory.
  • Currently, the following color formats are supported:
  • rgb(255, 255, 255)
  • rgba(255, 255, 255, 1.0)
  • HEX formats: #rrggbb and #aarrggbb
  • Color name enumeration: For example, black and white. For details, see Table 1. The enumeration formats are not supported in scripts.

Table 1 Currently supported colors

Name

Hexadecimal Code

Color

aliceblue

#f0f8ff

antiquewhite

#faebd7

aqua

#00ffff

aquamarine

#7fffd4

azure

#f0ffff

beige

#f5f5dc

bisque

#ffe4c4

black

#000000

blanchedalmond

#ffebcd

blue

#0000ff

blueviolet

#8a2be2

brown

#a52a2a

burlywood

#deB887

cadetblue

#5f9ea0

chartreuse

#7fff00

chocolate

#d2691e

coral

#ff7f50

cornflowerblue

#6495ed

cornsilk

#fff8dc

crimson

#dc143c

cyan

#00ffff

darkblue

#00008b

darkcyan

#008b8b

darkgoldenrod

#b8860b

darkgray

#a9a9a9

darkgreen

#006400

darkgrey

#a9a9a9

darkkhaki

#bdb76b

darkmagenta

#8b008b

darkolivegreen

#556b2f

darkorange

#ff8c00

darkorchid

#9932cc

darkred

#8b0000

darksalmon

#e9967a

darkseagreen

#8fbc8f

darkslateblue

#483d8b

darkslategray

#2f4f4f

darkslategrey

#2f4f4f

darkturquoise

#00ced1

darkviolet

#9400d3

deeppink

#ff1493

deepskyblue

#00bfff

dimgray

#696969

dimgrey

#696969

dodgerblue

#1e90ff

firebrick

#b22222

floralwhite

#fffaf0

forestgreen

#228b22

fuchsia

#ff00ff

gainsboro

#dcdcdc

ghostwhite

#f8f8ff

gold

#ffd700

goldenrod

#daa520

gray

#808080

green

#008000

greenyellow

#adff2f

grey

#808080

honeydew

#f0fff0

hotpink

#ff69b4

indianred

#cd5c5c

indigo

#4b0082

ivory

#fffff0

khaki

#f0e68c

lavender

#e6e6fa

lavenderblush

#fff0f5

lawngreen

#7cfc00

lemonchiffon

#fffacd

lightblue

#add8e6

lightcoral

#f08080

lightcyan

#e0ffff

lightgoldenrodyellow

#fafad2

lightgray

#d3d3d3

lightgreen

#90ee90

lightpink

#ffb6c1

lightsalmon

#ffa07a

lightseagreen

#20b2aa

lightskyblue

#87cefa

lightslategray

#778899

lightslategrey

#778899

lightsteelblue

#b0c4de

lightyellow

#ffffe0

lime

#00ff00

limegreen

#32cd32

linen

#faf0e6

magenta

#ff00ff

maroon

#800000

mediumaquamarine

#66cdaa

mediumblue

#0000cd

mediumorchid

#ba55d3

mediumpurple

#9370db

mediumseagreen

#3cb371

mediumslateblue

#7b68ee

mediumspringgreen

#00fa9a

mediumturquoise

#48d1cc

mediumvioletred

#c71585

midnightblue

#191970

mintcream

#f5fffa

mistyrose

#ffe4e1

moccasin

#ffe4b5

navajowhite

#ffdead

navy

#000080

oldlace

#fdf5e6

olive

#808000

olivedrab

#6b8e23

orange

#ffa500

orangered

#ff4500

orchid

#da70d6

palegoldenrod

#eee8aa

palegreen

#98fb98

paleturquoise

#afeeee

palevioletred

#db7093

papayawhip

#ffefd5

peachpuff

#ffdab9

peru

#cd853f

pink

#ffc0cb

plum

#dda0dd

powderblue

#b0e0e6

purple

#800080

rebeccapurple

#663399

red

#ff0000

rosybrown

#bc8f8f

royalblue

#4169e1

saddlebrown

#8b4513

salmon

#fa8072

sandybrown

#f4a460

seagreen

#2e8b57

seashell

#fff5ee

sienna

#a0522d

silver

#c0c0c0

skyblue

#87ceeb

slateblue

#6a5acd

slategray

#708090

slategrey

#708090

snow

#fffafa

springgreen

#00ff7f

steelblue

#4682b4

tan

#d2b48c

teal

#008080

thistle

#d8Bfd8

tomato

#ff6347

turquoise

#40e0d0

violet

#ee82ee

wheat

#f5deb3

white

#ffffff

whitesmoke

#f5f5f5

yellow

#ffff00

yellowgreen

#9acd32