All weex labels have some common style rules

The box model

The Weex framework model is based on the CSS frame model. All Weex elements can be regarded as boxes. Use the term “box model” when talking about design and layout. The box model is essentially a box that wraps each HTML element. It consists of margins, borders, padding, and actual content.

You can use the following definitions in the WEEx Box model.

  • width:lengthType, default value0
  • height:lengthType, default value0
  • padding:lengthType, default value0, (The content space between the element content and the element border)
    • padding-left:lengthType, default value0
    • padding-right:lengthType, default value0
    • padding-top:lengthType, default value0
    • padding-bottom:lengthType, default value0
  • margin:lengthType, default value0(The space around the element, outside the boundary)
    • margin-left:lengthType, default value0
    • margin-right:lengthType, default value0
    • margin-top:lengthType, default value0
    • margin-bottom:lengthType, default value0
  • border
    • border-styleValue:solid| dashed| dottedA default value,solid
      • border-left-styleValue:solid| dashed| dottedA default value,solid
      • border-top-styleValue:solid| dashed| dottedA default value,solid
      • border-right-styleValue:solid| dashed| dottedA default value,solid
      • border-bottom-styleValue:solid| dashed| dottedA default value,solid
    • border-width:lengthType, non-negative, default value0
      • border-left-width:lengthType, non-negative, default value0
      • border-top-width:lengthType, non-negative, default value0
      • border-right-width:lengthType, non-negative, default value0
      • border-bottom-width:lengthType, non-negative, default value0
    • border-color:colorType, default value# 000000
      • border-left-color:colorType, default value# 000000
      • border-top-color:colorType, default value# 000000
      • border-right-color:colorType, default value# 000000
      • border-bottom-color:colorType, default value# 000000
  • border-radius:lengthType, default value0, (The rounded boundary of the element. Default is0Represents a right Angle)
    • border-bottom-left-radius:lengthType, non-negative, default value0
    • border-bottom-right-radius:lengthType, non-negative, default value0
    • border-top-left-radius:lengthType, non-negative, default value0
    • border-top-right-radius:lengthType, non-negative, default value0

notes

Weex box model border-box is used as the default value box-sizing, meaning that the width and height properties include content, padding, and borders, but not margins.

The border-top-left-radius component in iOS currently does not support the border-radius rule for a specific corner. This only happens on iOS and it works fine on Android.

Although Overflow: Hidden is default on Android, the view will not clip its border-radius child unless all of the following conditions are met. This only happens on Android, it works fine on iOS.

  • The view type is div, A, cell, refresh, or loading.
  • Operating system version is Android 4.3 or higher.
  • The operating system version is not Android 7.0
  • The view does not have background-image properties or the OS version is Android 5.0 or higher.

case

< template > < div > < image SRC = "..." Style = "width: 400; Height: 200; Margin - left: 20;" > </ image > </ div > </ template >Copy the code

Flexbox

The Weex box-style model is based on CSS Flexbox, ensuring that elements behave predictably and page layouts can be adapted to different screen sizes and display devices.

Flexbox consists of flexible containers and flexible objects. A WEEx element is an elastic container if it can contain other elements.

Note that the older version of Flexbox specification differs from the newer version, such as whether packaging is supported. This is described in the W3C working draft, and you should be aware of the differences. Also note that older versions only support Android versions below 4.4.

Flex container

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

  • flex-directionValue:row| columnA default value,column

The flexible orientation property specifies the orientation of the flexible item within the flexible container. The default value is column (top to bottom).

  • justify-contentValue:flex-start| flex-end| center| space-betweenA default value,flex-start

The context-Content attribute aligns the flexible container’s items horizontally when the item does not use all of the available space on the main axis. The default is flex-start, which means the Flex project is at the beginning of the container. Flex-end means that the item is at the end of the container. Center means the object is in the center of the container. Space-between means that the project is positioned in the space between the lines.

  • align-itemsValue:stretch| flex-start| center| flex-endA default value,stretch

The align-items property aligns the flexible container’s items vertically when the item does not use all of the available space on the horizontal axis. The default is “stretch” when the item is stretched to fit the container. Flex-start means that the item is at the top of the container; Flex-end means that the item is at the bottom of the container; Center means that the object is in the center of the container (vertical).

The Flex project

  • flex:numberType, default value0

The Flex property specifies the length of the Flex project relative to the rest of the Flex projects in the same container. If all elastic items have Flex: 1 set, they will have the same width or height flex-direction in the direction of the elastic container. If you have two elastic projects, one set flex: 1 and the other flex: 2, the first will take up 1/3 of the container space and the second will take up 2/3 of the container space. If all elastic projects have no Flex set, they will be aligned according to the context-content property of the container.

example

Lists of images with equal proportions are aligned on the vertical axis:

<template> <div style="width: 300; height: 100;" > <image src="..." style="flex: 1;" ></image> <image src="..." style="flex: 1;" ></image> <image src="..." style="flex: 1;" ></image> </div> </template>Copy the code

Fixed width image aligned with stretched text:

<template> <div style="width: 300; height: 100;" > <image src="..." style="width: 100; height: 100;" ></image> <text style="flex: 1;" >... </text> </div> </template>Copy the code

Mixed direction alignment:

<template> <div style="width: 100;" > <image src="..." style="width: 100; height: 100;" ></image> <div style="flex-direction: row;" > <text style="flex: 2; font-size: 32;" >title</text> <text style="flex: 1; font-size: 16;" >$100</text> </div> </div> </template>Copy the code

Align one text left and the other right:

<template> <div style="flex-direction: row; justify-content: space-between;" > <text>WEEX</text> <text>2016-05-08</text> </div> </template>Copy the code

location

We can use the following attributes to control the position of the WEEX label

  • positionValue:relative| absolute| fixed| stickyA default value,relative

Relative means that an item is positioned relative to its normal position. Absolute means that the item is located relative to its container. Fixed Keeps elements in a fixed position while the page scrolls. Sticky keeps elements located inside the viewport “stuck” at the top or “relative” in their original position, depending on whether you want to scroll the view.

  • top:numberType, default value0, the upward offset value
  • bottom:numberType, default value0, the downward offset value
  • left:numberType, default value0, the left offset value
  • right:numberType, default value0Is offset to the right

example

<template> <div style="flex-direction: column;" > <div style="height: 3000;" > <image src="..." style="top: 50px; left: 50px;" ></image> </div> <div style="height: 3000;" > <image src="..." style="position: sticky;" ></image> </div> <div style="height: 3000;" > <image src="..." style="position: absolute; top: 50px; left: 50px;" ></image> </div> </div> </template>Copy the code

transform

Use the CSS Transform property to modify the coordinate space of the CSS visual format model. Using it, elements can be translated, rotated, and scaled.

The following styles are supported

  • translate
  • translateX
  • translateY
  • scale
  • scaleX
  • scaleY
  • rotate
  • rotateX
  • rotateY
  • perspective
  • transform-origin

example

<template> <div class="wrapper"> <div class="transform"> <text class="title">Transformed element</text> </div> </div> </template> <style> .transform { align-items: center; transform: translate(150px,200px) rotate(20deg); transform-origin: 0 -250px; border-color:red; border-width:2px; } .title {font-size: 48px; } </style>Copy the code

transition

You can now use the Transition property in CSS to enhance the interactivity and visual experience of your application. Transitions include the LayoutAnimation, LayoutAnimation, which now changes the layout and uses the smooth animation of transitions. Transition allows CSS property values to Transition smoothly over a period of time.

attribute

  • Transition-property: Allows the name of the transition animation to set the value of different styles of transition effects. The default value is null, that is, no transition is performed. The following table lists all legal parameters for this property:

    • widthPerform transformations when the width of the component involves animation
    • heightPerform transformations when the component is highly involved in the animation
    • topWhen animation is involved at the top of the component, the transformation is performed
    • bottomPerform the transformation when the bottom of the component involves animation
    • leftPerform transformations when animation is involved on the left side of the component
    • rightPerform the transformation when animation is involved on the right side of the component
    • backgroundColorThe transformation is performed when the component’s backgroundColor participates in the animation
    • opacityPerform transformations when the component’s opacity involves animation
    • transformTransformations are performed when a component transformation involves an animation

  • Transition-duration: specifies the transition duration in milliseconds. The default value is 0, indicating no animation.

  • Transition-delay: Specifies the interval (in milliseconds or seconds) between the request conversion conversion and the conversion conversion. The default value is 0, indicating that there is no delay and that the conversion conversion is performed immediately after the request.

  • Transition-timing-function: describes the speed curve of the transition to make the transition smoother. The default is simple. The following table lists all valid attributes:

    • easeThe transformation gradually slows down the transformation effect
    • ease-inThe conversion starts slow, then becomes faster
    • ease-outThe transition starts quickly and then slows down
    • ease-in-outThe transition starts slow, then fast, then ends slowly
    • linearThe conversion changes at a constant rate
    • cubic-bezier(x1, y1, x2, y2)To use custom conversions in third-order Bessel functions, the parameter values of the function must be between 0 and 1. For more information about cubic Bessel, see Cubic Bezier curves and Bezier curves.

case

<style scoped> .panel { margin: 10px; top:10px; align-items: center; justify-content: center; border: solid; border-radius: 10px; transition-property: width,height,backgroundColor; The transition - duration: 0.3 s; transition-delay: 0s; Transition-timing -function: cubic-bezier(0.25, 0.1, 0.25, 1.0); } </style>Copy the code

pseudo-classes

Weex supports four groups of pseudo classes: Active, Focus, Disabled, and Enabled

All components support active, but only the input component and TextArea component support Focus, Enabled, diabled.

The rules

  • When the rules take effect at the same time, the higher priority overrides the lower priority
    • For example, input: active: Enabled overwrites Input: active.
  • The interconnection rules are as follows

case

<template> <div class="wrapper"> <image :src="logoUrl" class="logo"></image> </div> </template> <style scoped> .wrapper { align-items: center; margin-top: 120px; } .title { font-size: 48px; } .logo { width: 360px; height: 82px; background-color: red; } .logo:active { width: 180px; height: 82px; background-color: green; } </style> <script> export default { props: { logoUrl: { default: 'https://alibaba.github.io/weex/img/[email protected]' }, target: { default: 'World' } }, methods: { update (e) { this.target = 'Weex'; }}}; </script>Copy the code

linear-gradient

Weex supports linear gradient backgrounds, and you can see the W3C description of gradients.

Supported Components

All components in Weex support gradients

usage

You can use a linear gradient with the background-image property

background-image: linear-gradient(to top,#a80077,#66ff00);
Copy the code

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

Weex currently supports two color gradients. The direction of the gradient is shown below:

  • From right to left
  • Left from right to left
  • Bottom from top to bottom
  • Top from bottom to top
  • To the bottom right corner from the top left corner to the bottom right corner
  • Upper left corner from lower right corner to upper left corner

Pay attention to

  • background-imageandbackground-colorSet at the same time,background-imagebeforebackground-color.
  • Do not use shorthand attributes such asbackground.

case

<template> <scroller style="background-color: #3a3a3a"> <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);" > <text class="direction">to right</text> </div> <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);" > <text class="direction">to left</text> </div> <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);" > <text class="direction">to bottom</text> </div> <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);" > <text class="direction">to top</text> </div> <div style="flex-direction: row; align-items: center; justify-content: center"> <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);" > <text class="direction">to bottom right</text> </div> <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);" > <text class="direction">to top left</text> </div> </div> </scroller> </template> <style> .container1 { margin: 10px; width: 730px; height: 200px; align-items: center; justify-content: center; border: solid; border-radius: 10px; } .container2 { margin: 10px; width: 300px; height: 300px; align-items: center; justify-content: center; border: solid; border-radius: 10px; } .direction { font-size: 40px; color: white; } </style>Copy the code

box-shadow

Weex supports the following box-shadow functions on iOS devices: inset, offset-x, offset-y, blur-radius, and color

note

  • Box shadows work on iOS

case

<template> <div class="wrapper"> <div style="width:400px; height:60px; background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);" > <text class="title" style="text-align: center">Hello {{target}}</text> </div> <div style="margin-top: 80px; width:400px; height:60px; background-color: #FFE4C4; Box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);" > <text class="title" style="text-align: center">Hello {{target}}</text> </div> <div style="margin-top: 80px; width:400px; height:60px; background-color: #FFE4C4; Box-shadow :inset 20px 10px 5px rgba(255, 69, 0, 0.8); > <text class="title" style="text-align: center">Hello {{target}}</text> </div> <div style="margin-top: 80px; width:400px; height:60px; background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);" > <text class="title" style="text-align: center">Hello {{target}}</text> </div> <div style="margin-top: 80px; width:400px; height:60px; background-color: #FFE4C4; box-shadow:20px 10px 5px black;" > <text class="title" style="text-align: center">Hello {{target}}</text> </div> <div style="margin-top: 80px; width:400px; height:60px; background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;" > <text class="title" style="text-align: center">Hello {{target}}</text> </div> </div> </template> <style scoped> .wrapper {align-items: center; margin-top: 120px; } .title {font-size: 48px; } </style> <script> module.exports = { data: function () { return { logoUrl: 'https://alibaba.github.io/weex/img/[email protected]', target: 'World' }; }}; </script>Copy the code

Other common styles

  • opacity
  • background-color

The type of the style value

  • lengthtype
  • numbertype
  • colortype
  • Enumerated type

An easy step

These top-down steps can help you plan the entire style of weeX pages

1. Overall style: Divide the entire page into different sections

2. Bend and align: Align each part of the page with the box

3. Position box: Place the box and set the offset

4. Element-specific style: Set styles for specific elements if needed