# Common Styles

All of weex tags share some common style rules

# 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.

The following code snippets shows the basic usage of box model

<template>
  <div>
    <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
  </div>
</template>

# width

width: length type, default value auto

# height

height: length type, default value auto

# 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:

• 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

# border-style

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:

• border-style: values solid | dashed | dotted, default value solid
• border-left-style: values solid | dashed | dotted, default value solid
• border-top-style: values solid | dashed | dotted, default value solid
• border-right-style: values solid | dashed | dotted, default value solid
• border-bottom-style: values solid | dashed | dotted, default value solid

# 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:

• border-width: length type, non-negative, default value 0
• border-left-width: length type, non-negative, default value 0
• border-top-width: length type, non-negative, default value 0
• border-right-width: length type, non-negative, default value 0
• border-bottom-width: length type, 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:

• border-color: color type, default value #000000
• border-left-color: color type, default value #000000
• border-top-color: color type, default value #000000
• border-right-color: color type, default value #000000
• border-bottom-color: color type, 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:

• border-radius: length type, default value 0 which means the corner is a right angle.
• border-bottom-left-radius: length type, non-negative, default value 0
• border-bottom-right-radius: length type, non-negative, default value 0
• border-top-left-radius: length type, non-negative, default value 0
• border-top-right-radius: length type, non-negative, default value 0

# 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:

• 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

# Flexbox

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.

Flexbox consists of flex containers and flex items. If a weex element can containing other elements, it is a flex container.

# Flex container

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

# direction

The direction CSS property sets the direction of text, flex-container. The default value is lrt

• ltr: Text and other elements go from left to right. This is the default value.
• rtl: Text and other elements go from right to left.

# 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).

• 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
• 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.

# 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

• 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.

• 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.

  

# 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.

• 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.

• align-items: values stretch | flex-start | center | flex-end, default value stretch

  

# Flex item

# 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.

The following code snippet show three div with the same height

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

• flex: number type, default value 0

# Examples

• Vertical and horizontal alignment
• Grid layout
• The same height div

# Position

we can use properties below to control placement of weex tag

• position: values relative | absolute | fixed | sticky, default value relative

relative means the item is positioned relative to its normal position. absolute means the item is positioned relative to its container. fixed keeps the elements position fixed when the page is scrolling. sticky keeps elements positioned inside the viewport as "stuck" at the top or "relative" at its original place depending on whether does it about to scroll out of the view.

• top: number type, default value 0, upward offset value
• bottom: number type, default value 0, downward offset value
• left: number type, default value 0, leftward offset value
• right: number type, default value 0, rightward offset value

# Examples

<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>

# 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.

# Property

• 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:

• transition-duration:Specifies the duration of the transition 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 transition and the transition transition. The default value is 0, indicating that there is no delay, and the transition transition is performed immediately after the request.

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

# Example

<style scoped>
    .panel {
        margin: 10px;
        top:10px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;

        transition-property: width,height,backgroundColor;
        transition-duration: 0.3s;
        transition-delay: 0s;
        transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }
</style>

# Transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated and scaled.

Currently supported format:

• translate( {<length/percentage>} [, {<length/percentage>}]?)
• translateX( {<length/percentage>})
• translateY( {<length/percentage>})
• scale: number
• scaleX: number
• scaleY: number
• rotate: degree
• rotateX: degreev0.14+
• rotateY: degreev0.14+
• rotateZ: degreev0.26+
• perspective: number, supported for Android 4.1 and above. v0.16+
• transform-origin: number, percentage, keyword (top/left/right/bottom)

# 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>

# Pseudo class v0.9.5+

Weex support four pseudo-classes: active, focus, disabled, enabled

All components support active, but only the input component and the textarea component support focus, enabled, diabled.

# Rule

• 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

  

# Example

<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/weex_logo_blue@3x.png'
      },
      target: {
        default: 'World'
      }
    },
    methods: {
      update (e) {
        this.target = 'Weex';
      }
    }
  };
</script>

Try it

# Linear-gradient v0.10+

Weex support linear-gradient background, You can see W3C description of the gradient.

# Supported components

All components in Weex support gradients

# Usage

You can use linear gradient by background-image property.

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

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

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

• 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

# Note

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

# Example

<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>

# Box-shadow v0.11+

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

# Example

<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/weex_logo_blue@3x.png',
        target: 'World'
      };
    }
  };
</script>

# Accessibility

• role: show compoent‘s role web define
  • button
  • input inputcompoent default role is input
  • img image compoent default role is image
  • link
  • search
  • tab
  • text textcompoent default role is text
• aria-hidden :hide compoent which is unnecessary for user
• aria-label : configure the msg after the current element is focused

# Example

<text class='txt' role='text' aria-label='I am a text'>text</text>

<a class='a' role='link' href='http://xxx.xxx.xxx' aria-label='I am a link'></a>


<image class='img' aria-hidden='true' role='img' src="http://xxx.png" aria-label='I am a image，but you can not see me'></image>

# Other Common Style

• opacity {number}:Set the transparency of an element or the degree to which content behind an element is visible. The {number} range is 0 to 1, 0 for fully transparent and 1 for fully opaque.
• background-color {color}: Set the background color of an element. The following color format is supported.
  • RGB, e.g. rgb(250, 0, 0)
  • RGBA, e.g. rgba(255, 0, 0, 0.5)
  • Hexadecimal color e.g. #ff0000 or #f00
  • Keywords, include basic keywords and extends keywords

# Simple Step

These up-to-down steps may help you to plan the whole style of weex pages.

1. overall style: divide the whole page to different parts
2. flex alignment: align boxes in every part of page
3. position box: place box, set offset
4. element specific style: set styles for certain element if needed