CSS style description can be viewed as a series of key-value pairs,each of which describes a particular style, such as the width and height of a component.
.box { width: 400; height: 50; }
The format of key-value pairs is prop-name: prop-value;
. The key name is prop-name
, the value name is prop-value
. Usually,the key name and the value name follow Horizontal connection nomenclature, the value may be a number(the default units is px); The key and the value must be separated by :
, between each key-value pairs must be separated by ;
.
The style description will appear on a weex page in two formats:
<template>
label<style>
labelThe style written in the style label, for example:
<template> <container style="width: 400; height: 50;"> ... </container> </template>
It is said that the width and height of <container>
label is 400 pixels and 50 pixels respectively.
<style>
tagFor example:
<style> .wrapper {width: 600;} .title {width: 400; height: 50;} .highlight {color: #ff0000;} </style>
The stylesheets contain multiple style rules, each style rule has only one class which is contained by its style selector, a pair of curly braces {...}
, and the styles of the curly braces. For example:
.title { width: 400; height: 50; }
The above is a rule.
The selectors of <style>
label are matched with the class attribute of <template>
label, we should use spaces to separate the class names. For example:
<template> <container class="wrapper"> <text class="title">...</text> <text class="title highlight">...</text> </container> </template> <style> .wrapper {width: 600;} .title {width: 400; height: 50;} .highlight {color: #ff0000;} </style>
It means that the width of the outermost container is 600px, The inside of the two title text is 400 pixels wide 50 pixels high, the second piece of text is red.
px
unit could be ignored, you can write number directly. More details can be found in commmon styles.color
and font-size
.font-size
, color
, etc.Page data can be bound in style
and class
attribute. For example:
<template> <container> <text style="font-size: {{fontSize}};">Alibaba</text> <text class="large {{textClass}}">Weex Team</text> </container> </template> <style> .large {font-size: 32;} .highlight {color: #ff0000;} </style> <script> module.exports = { data: { fontSize: 32, textClass: 'highlight' } } </script>
Next, let's have a look at events.