The supported styles is listed below, and some component may support custom style, which you can check in the component's doc. Except for this, other styles are not supported.

Notes

• nvue's css only supports flex layout, which is a subset of webview's css syntax. This is because the native layout of the operating system does not support web layouts other than flex. Of course, flex is enough to lay out all kinds of pages, but the writing needs to adapt.
• Only array syntax is supported when binding class.
• Media queries are not supported
• Font files cannot be introduced into style
• Percentage layout, such as width：100%, cannot be used
• Writing background pictures background-image in css is not supported, but image components and layers can be used to achieve background effects similar to those in the web. Because in native development, there is no such concept of background map like web.
• Use the image tag, base64 is supported
• Each component of nvue is transparent by default on Android. If background-color is not set, it may cause ghosting problems
• The text content must only be under the text component. In the text component, the content cannot be written in a new line, or otherwise there will be irremovable peripheral margins.
• Only the text tag can set the font size and font color

From HBuilderX 3.1.0+, more abbreviated styles are supported

• border
• border-top
• border-right
• border-bottom
• border-left
• border-style
• border-width
• border-color
• border-radius
• flex-flow
• background

From HBuilderX 3.1.0+, new style compilation mode is supported

• The newly added nvueStyleCompiler configuration supports combined selectors (adjacent brother selector, normal brother selector, child selector, descendant selector). See details (opens new window)

• In nvue's uni-app compilation mode, the styles in App.vue will be compiled to each nvue file. For shared styles, if there are illegal attributes, the console will give a warning. You can use conditional compilation (opens new window)APP-NVUE to block the warning in the App.

Box model

Weex box model based on the CSS box model, all of weex elements can be considered as boxes.

The term "box model" is used when talking about design and layout. The box model is essentially a box that wraps around every HTML element. It consists of margins, borders, paddings, and the actual content.

Weex only supports box-sizing:border-box, in which box size includes content, padding and border-width and excludes margin.

On Android, Weex only supports overflow:hidden.

On iOS, Weex supports overflow:hidden and overflow:visible and by default, it is overflow:visible.

basic usage

	<template>
		<view>
			<image style="width: 400rpx; height: 200rpx; margin-left: 20rpx;" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9c877c50-2f0c-11eb-899d-733ae62bed2f.png"></image>
		</view>
	</template>

Property	Describe
width {length}	width, default value 0
height {length}	height, default value 0

padding

padding specifies the space between element content and the element border. One can use shorthand for four edges or specify the padding for one edge:

Property	Describe
padding {length}	padding for four edges, default value 0
padding-left {length}	default value 0
padding-right {length}	default value 0
padding-top {length}	default value 0
padding-bottom {length}	default value 0

border

The border-style CSS property is a shorthand property that sets the line style for all four sides of an element's border. One can use shorthand for four edges or specify the style for one edge:

Property	Describe
border-left-style {string}	values solid / dashed / dotted, default value solid
border-top-style {string}	values solid / dashed / dotted, default value solid
border-right-style {string}	values solid / dashed / dotted, default value solid
border-bottom-style {string}	values solid / dashed / dotted, default value solid

Property	Describe
solid	The default value of the solid border is solid
dashed	Square dashed border
dotted	Dotted dashed border

border-width

The border-width shorthand CSS property sets the widths of all four sides of an element's border. One can use shorthand for four edges or specify the width for one edge:

Property	Describe
border-width {length}	non-negative, default value 0
border-left-width {length}	non-negative, default value 0
border-top-width {length}	non-negative, default value 0
border-right-width {length}	non-negative, default value 0
border-bottom-width {length}	non-negative, default value 0

border-color

The border-color shorthand CSS property sets the color of all sides of an element's border. One can use shorthand for four edges or specify the color for one edge:

Property	Describe
border-color {color}	default value #000000
border-left-color {color}	default value #000000
border-top-color {color}	default value #000000
border-right-color {color}	default value #000000
border-bottom-color {color}	default value #000000

border-radius

border-radius property rounds the corners of an element's outer border edge. One can use shorthand for four corners or specify the radius for one corner:

Property	Describe
border-radius {length}	default value 0 which means the corner is a right angle.
border-bottom-left-radius {length}	non-negative, default value 0
border-bottom-right-radius {length}	non-negative, default value 0
border-top-left-radius {length}	non-negative, default value 0
border-top-right-radius {length}	non-negative, default value 0

border-radius defines the radius of a quarter ellipse that defines the shape of the corner of the outer border edge by definition, but weex may not render as expected if you need a smooth transition between different border-radius or border-width on adjoining sides.

margin

margin specifies the space around elements which is outside the border. One can use shorthand for four edges or specify the margin for one edge:

Property	Describe
margin {length}	margin for four edges, default value 0
margin-left {length}	margin for left edge, default value 0
margin-right {length}	margin for left edge, default value 0
margin-top {length}	margin for left edge, default value 0
margin-bottom {length}	margin for bottom edge, default value 0

Only for Android

Although overflow:hidden is default on Android, a view will not clip its children according to border-radius unless all the following conditions meet.

• The view type is div, A, cell, refresh or loading.
• OS version is Android 4.3 or higher.
• OS version is not Android 7.0
• A view does not have background-image property nor OS version is Android 5.0 or higher.

Flexbox

Flexbox

Flex is the abbreviation of Flexible Box, meaning "flexible layout", which is used to provide maximum flexibility for box model.

Weex box style model based on the CSS flexbox, ensures that elements behave predictably and the page layout can accommodates to different screen sizes and different display devices.

Only styles listed below is supported, other style like order and flex-flow are not supported.

Flexbox is the default and only style model in Weex, so you don't have to add display: flex; in a container.

flex-direction

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Property	Describe
column	The flex container's main-axis is vertical. The main-start and main-end points is top and bottom.
column-reverse	Behaves the same as column but the main-start and main-end are permuted.
row	The flex container's main-axis is horizontal and defined to be the same as direction. The main-start and main-end points are the same as the direction.
row-reverse	Behaves the same as row but the main-start and main-end points are permuted

flex-wrap

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. The default value is nowrap

Property	Describe
nowrap	The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. This is the default value.
wrap	The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.
wrap-reverse	Behaves the same as wrap but cross-start and cross-end are permuted.

justify-content

The CSS justify-content property defines how Weex distributes space between and around content items along the main-axis of a flex container. The default value is flex-start.

Property	Describe
flex-start	The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side.
flex-end	The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side.
center	The items are packed flush to each other toward the center of the alignment container along the main axis.
space-between	The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
space-around	It indicates equal intervals on both sides of flex member items, so the interval between member items is twice as large as the interval between member items and borders

align-items

The CSS align-items property sets the align-self value on all direct children as a group. It controls the alignment of items on the cross Axis. The default value is stretch.

Property	Describe
stretch	Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
flex-start	The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
flex-end	The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
center	The flex items' margin boxes are centered within the line on the cross-axis.

flex

The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.

• If all of the flex items set flex: 1, they will have equal width or height on direction of flex container's flex-direction.
• If there are two flex items, with one setting flex: 1, and the other setting flex: 2, the first one will take 1/3 container space, and the second one will take 2/3 container space.
• If all of flex items don't set flex, they will be aligned depending on the container's justify-content property.

Notes

Flex member item does not support flex-shrink, flex-basis, align-content attributes temporarily.

That attribute does not support flex: Abbreviation for flex-grow | flex-shrink | flex-basis.

	//Gird layout
	<template>
		<view>
			<view v-for="(v, i) in list" class="row">
				<view v-for="(text, k) in v" class="item">
					<view>
						<text>{{text}}</text>
					</view>
				</view>
			</view>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					list: [
						['A', 'B', 'C'],
						['D', 'E', 'F'],
						['G', 'H', 'I']
					]
				}
			}
		}
	</script>
	<style scoped>
	.row {
		flex-direction: row;
		height: 80px;
	}
	.item {
		flex: 1;
		justify-content: center;
		align-items: center;
		border-width: 1;
		border-style: solid;
		border-color: #FFFFFF;
		background-color: #00AAFF;
	}
	</style>

	//Isometric module
	<template>
	  <view>
	    <view style="width:300px; height:100px;">
	      <view style="flex: 1;background-color:blue"></view>
	      <view style="flex: 1;background-color:red"></view>
	      <view style="flex: 1;background-color:yellow"></view>
	    </view>
	  </view>
	</template>

position localization

Set the positioning type. The default value is relative.

Property	Describe
relative	is the default value and refers to relative localization
absolute	Absolute localization, with the container of the element as the reference system
fixed	Fixed localization, ensure that the element is displayed in the corresponding position in the page window, even if the window is scrolling, it will not move
sticky	It means that only when the element is scrolled out of the page, the element will be fixed at the top of the page window, achieving sticky effect/sticky localization (layout).

Use position:sticky or position: fixed can fix the head navigation bar (sticky effect)

	//Horizontal, vertical, center
	<template>
		<view class="wrapper">
			<view class="box"></view>
		</view>
	</template>
	<style scoped>
		.wrapper{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: #cccccc;
			justify-content: center;
			align-items: center;
		}
		.box{
			width: 200px;
			height: 200px;
			background-color: #fc0000;
		}
	</style>

Only for Android

If your component is bigger than its parent, it will be partial invisible as Weex on Android only supports overflow:hidden.

Transition

Now you can use the transition attribute in CSS to enhance the interactivity and visual experience of your application. The transition includes the layout animation, that is, LayoutAnimation, which now changes the layout and uses the fluent animation of the transition. Transition allows the CSS attribute values to transition smoothly over a certain time interval.

transition-property

Allows the name of the transitional animation to set the value of the different styles transition effect, the default value is empty, that does not perform any transition, the following table lists all the legitimate parameters of the property:

Property	Describe
width	The transition is performed when the width of the component is involved in the animation
height	The transition is performed when the height of the component is involved in the animation
top	The transition is performed when the top of the component is involved in the animation
bottom	The transition is performed when the bottom of the component is involved in the animation
left	The transition is performed when the left of the component is involved in the animation
right	The transition is performed when the right of the component is involved in the animation
background-color	The transition is performed when the backgroundColor of the component is involved in the animation
opacity	The transition is performed when the opacity of the component is involved in the animation
transform	The transition is performed when the transform of the component is involved in the animation

transition-duration

Specifies the duration of the transition (in milliseconds). The default value is 0, indicating that there is no animation.

transition-delay

Specifies the time interval (in milliseconds or seconds) between the request transition and the transition. The default value is 0, indicating that there is no delay, and the transition is performed immediately after the request.

transition-timing-function

Describes the velocity curve of the transition, which is used to make the transition smoother. The default is ease. The following table lists all the valid attributes:

Property	Describe
ease	The transition gradually slow down the transition effect
ease-in	The transition starts slowly and then becomes faster for the transition effect
ease-out	The transition starts quickly and then slows the transition effect
ease-in-out	The transition starts slowly, then goes fast and then slowly ends the transition effect
linear	The transition changes at constant speed
cubic-bezier(x1, y1, x2, y2)	Using the custom transition in the third-order Bessel function, the parameter values of the function must be between 0 and 1. For more information on three times Bessel, see cubic-bezier (opens new window) and Bézier curve (opens new window).

Example

<template>
	<view class="row">
		<view class="box" :class="{'active':isActive}" @click="isActive = !isActive">
			<image class="img" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9c877c50-2f0c-11eb-899d-733ae62bed2f.png" mode="aspectFill"></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"isActive":false
			}
		}
	}
</script>
<style scoped>
	.row{
		align-items: center;
		justify-content: center;
	}
	.box{
		margin:20px;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		width:200rpx;
		height:200rpx;
		background-color: #007AFF;
		transition-property: width, height, background-color;
		transition-duration:0.3s;
		transition-delay:0.1s;
		transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
	}
	.active{
		width:300rpx;
		height:300rpx;
		background-color: #6bd8ff;
	}
	.img{
		width:80rpx;
		height:80rpx;
	}
</style>

Transform

Applied in the 2D or 3D transformation of elements. This attribute allows the rotation, scaling, moving, tilting and so on of the element.

Property	Describe
translateX({<length/percentage>})	X-axis direction panning, length unit or percentage is supported.
translateY({<length/percentage>})	Y-axis direction panning, length unit or percentage is supported.
translate({<length/percentage>} {<length/percentage>})	X-axis and y-axis directions are simultaneously translated, translateX + translateY abbreviation.
scaleX(<number>)	X-axis direction scaling, in numeric value, indicates scaling ratio. Percentage is supported.
scaleY(<number>)	Y-axis direction scaling, in numeric value, indicates scaling ratio. Percentage is supported.
scale(<number>)	X-axis and Y-axis directions are zoomed simultaneously, scaleX + scaleY abbreviation.
rotate(<angle/degree>)	The transformation that rotates the element around a fixed point (specified by the transform-origin attribute) without deformation. The specified angle defines the measure of rotation. If the angle is positive, rotate clockwise; Otherwise, rotate counterclockwise.
rotateX(<angle/degree>)	Rotation in the X-axis direction.
rotateY(<angle/degree>)	Rotation in the Y-axis direction.
rotateZ(<angle/degree>)	Rotation in the Z-axis direction.
perspective(<length>)	Specify the distance between the observer and the z=0 plane, which makes the elements with three-dimensional position transformation produce perspective effect. The three-dimensional elements with z>0 are larger than the normal ones, and those with z<0 are smaller. The size is determined by the value of this attribute. Supported by Android 4.1+.
transform-origin {length/percentage/keyword (top/left/right/bottom)}:	Set the origin of an element deformation, which only supports 2D coordinates.

Consider use transition instead, which supports all the style that transform supports except for transform-origin and perspective rotate is the same as rotateZ.

Example

<template>
	<view class="card">
		<view class="box">
			<view class="row-box">
				<view @click="isRotate = !isRotate" class="fill row-rotate " :class="{'rotate':isRotate}"></view>
			</view>
			<text>rotate(45deg) </text>
		</view>
		<view class="box">
			<view class="row-box">
				<view @click="isScale = !isScale" class="fill row-scale" :class="{'scale':isScale}"></view>
			</view>
			<text>scale(2)</text>
		</view>
		<view class="box">
			<view class="row-box">
				<view @click="isTranslateX = !isTranslateX" class="fill row-translateX" :class="{'translateX':isTranslateX}"></view>
			</view>
			<text>translateX(45px)</text>
		</view>
		<view class="box">
			<view class="row-box">
				<view @click="isTranslateY = !isTranslateY" class="fill row-translateY" :class="{'translateY':isTranslateY}"></view>
			</view>
			<text>translateY(45px)</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				"isRotate": false,
				"isScale":false,
				"isTranslateX":false,
				"isTranslateY":false
			}
		},
	}
</script>
<style>
	.card {
		width:710rpx;
		margin:20rpx;
		flex-direction:row;
		flex-wrap: wrap;
	}
	.box{
		width:355rpx;
		height:355rpx;
		justify-content: center;
		align-items: center;
	}
	.row-box{
		width:200rpx;
		height:200rpx;
		margin:10rpx;
		background-color: #DDDDDD;
	}
	.fill{
		width:200rpx;
		height:200rpx;
		position: relative;
		background-color: #03A9F4;
		opacity: 0.5;
	}
	.row-rotate{
		transition-duration:0.3s;
		transform:rotate(0deg);
	}
	.rotate{
		transition-duration:0.3s;
		transform:rotate(45deg);
	}
	.row-scale{
		transition-duration:0.3s;
		transform:scale(1);
	}
	.scale{
		transform:scale(2);
	}
	.row-translateX{
		transition-duration:0.3s;
		transform:translateX(0px);
	}
	.translateX{
		transform:translateX(45px);
	}
	.row-translateY{
		transition-duration:0.3s;
		transform:translateY(0px);
	}
	.translateY{
		transform:translateY(45px);
	}
</style>

Pseudo class

Property	Describe
active	All components are supported
focus	Only the input component and textarea component are supported
disabled	Only the input component and textarea component are supported
enabled	Only the input component and textarea component are supported

Notes

the high priority override low priority when rules take effect at the same time. such as: "input:active:enabled" will override "input:active".

• the interconnection rule as follow

Linear-gradient

Weex support linear-gradient background, You can see W3C description of the gradient (opens new window). You can use linear gradient by background-image property.

	background-image:linear-gradient(to bottom right,#AD18F9,#05DFC7);

Weex currently supports two color gradients. The direction of the gradient is as follows:

Value	Describe
to right	From left to right
to left	From right to left
to bottom	From top to bottom
to top	From bottom to top
to bottom right	From the upper left corner to the lower right corner
to top left	From the lower right corner to the upper left corner

Notes

background-image and background-color are set at the same time, background-image precedes background-color. Do not use shorthand property such as background.

radial-gradient is not currently supported, do not use it.

Box-shadow

Weex supports box-shadow in iOS: inset,offset-x,offset-y, blur-radius,color

{box-shadow:inset offset-x offset-y blur-radius color}

Property	Describe
inset (optional)	Shadow is outside the border by default. After using inset, the shadow is inside the border (even if it is a transparent border), and below the content above the background.
offset-x	Set the horizontal offset, if it is negative, the shadow is located to the left of the element.
offset-y	Set the vertical offset, if it is negative, the shadow is located above the element.
blur-radius	Set the blur radius, px unit length value, the larger the value, the larger the blur area, and the bigger and lighter the shadow. Cannot be negative. The default value is 0, and the shadow edge is sharp at this value.
color	Set shadow color

Example

	.box4 {
	    box-shadow: inset 3px 5px 20px rgb(255, 69, 0);
	}

Notes

• Currently the box-shadow attribute is only supported by iOS and not supported by Android temporarily. You can use elevation or pictures instead.
• Each element only supports setting one shadow effect, and does not support multiple shadows acting on one element at the same time.

Android platform: shadows elevation

The Android platform weex has imperfect support for shadow style (box-shadow), such as the shadow style is displayed abnormally when the border-radius is set, displayed abnormally on Android7 when animation is set, and flickered on Android10, etc.

To solve these problems, from HBuilderX 2.4.7+, the elevation attribute ( attribute of the component, not css style) is added to set the level of the component and the Number type. The larger the level value, the more obvious the shadow. The shadow effect is also related to the position of the component, the closer to the bottom of the page, the more obvious the shadow effect

Usage

	<view elevation="5px"></view>

Notes

• The color of the shadow created by setting the elevation attribute cannot be modified temporarily
• After setting elevation, the level of the current component will be higher than that of other components without elevation. The larger the value range of elevation, the higher the level! Be aware of component coverage scenarios
• To avoid conflict between the shadow effect of the elevation attribute and the shadow style (box-shadow), the box-shadow style becomes invalid after setting the elevation attribute
• To use elevation, the parent element of the shadow element needs to be larger than the shadow range, or otherwise the shadow will be clipped
• IOS does not support the elevation attribute, please use box-shadow to set the shadow

Text style

color

color: <colors> this property set the foreground color of an component's text content.. The property color support multiple formats of values.

• RGB（ rgb(255, 0, 0) ）
• RGBA（ rgba(255, 0, 0, 0.5) ）
• Hexadecimal ( #ff0000 );
• Simplified hexadecimal notation ( #f00 )
• Color value keyword (red)

Only text tags can set the font color

font-size

font-size: <length> this property specifies the size of the font.

font-style

font-style: <enum> normal | italic. This property lets you select italic or normal faces within a font-family. Default value is normal.

font-weight

This property indicate the weight of the text.

• values: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
• normal is equal to 400, bold equel to 700
• ios support showing 9 kind of font-weight.android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700.
• Some standard values like lighter, bolder, number unit are not supported.

text-decoration

text-decoration: <enum> none | underline | line-through. This property is used to set the text formatting to underline or line-through. The default value is none.

Property	Describe
none	Default. Define standard text
underline	Define a line below the text
line-through	Define a line through the text

Only support for <text> and <ricthext>

text-decoration:overline not supported

text-align

text-align: <enum> left | center | right. This property describes how inline content like text is aligned in its parent component. The default value is left.

Property	Describe
left	Align the text to the left
center	Align the text to the middle
right	Align the text to the right

text-align:justify not supported

font-family

font-family:<string> this property set the font-family of the text. This property doesn't guarantee the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref dom.addRule instead.

text-overflow

text-overflow:<enum> clip | ellipsis. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.

Property	Describe
clip	Trimmed text
ellipsis	Display ellipsis to represent the trimmed text

Only support for <text> and <ricthext>

lines

lines: <number> positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value.

line-height

line-height: <length> The line height of every line in the text. line-height is the space between top and bottom. line-height There is no relationship between line-height and font-size, as line-height is restricted by top and bottom, font-size is interpreted by glyph. Usually but not always, line-height and font-size with the same value will cause the text clipped.

word-wrap

word-wrap:<string> break-word | normal | anywhere. This property determins word wrap mode. For Weex, anywhere means clipping at character boundaries, other values or by default we break at word boundaries.

Property	Describe
break-word	Line feed inside long words or URL addresses
normal	Line feed only at allowed hyphenation points
anywhere	Use characters as the smallest element to do truncation and line feed