样式和类 #6

Open
sospartan opened this Issue Jun 13, 2016 · 21 comments

Projects

None yet
@sospartan
sospartan commented Jun 13, 2016 edited

Style & Class

0.4

基础语法

CSS样式可以理解为一系列的键值对, 其中的每一对描述了一个特定的样式, 例如组件的宽或者高.

width: 400; height: 50; ...

键值对的形式是 prop-name: prop-value;. 键名是prop-name, 键值是 prop-value. 一般情况下,键名按照连接符的方式进行命名, 键值可以是数字(默认的单位是px);键和值由:分隔,每对键值之间由;分隔.

在Weex页面上样式有两种形式:

  • <template>中标签的style属性
  • <style> 中样式表

style属性

在style属性中编写样式, 例如:

<template>
  <container style="width: 400; height: 50;">
    ...
  </container>
</template>

这段代码的意思是<container>组件的宽和高分别为400像素和50像素.

<style> 标签

例如:

<style>
  .wrapper {width: 600;}
  .title {width: 400; height: 50;}
  .highlight {color: #ff0000;}
</style>

样式表包含了多个样式规则, 每条规则有一个对应的类, 以及由{...}包括的多条样式. 例如:

.title {width: 400; height: 50;}

以上为一条样式规则.

Class 属性

<style> 标签的选择器会去匹配 <template> 标签中的class属性, 多个属性值之间由空格分隔. 例如:

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

这段代码的含义是container组件的宽度是600px, 两个title文本的尺寸为400px高50px宽, 其中第二个文本是红色.

注意事项

  • 为了简化页面设计和实现, 屏幕的宽度统一为750像素, 不同屏幕会按照比例转化为这一尺寸.
  • 标准CSS支持很多样式选择器, 但Weex目前只支持单个类的选择器.
  • 标准CSS支持很多的长度单位,Weex目前只支持像素,并且px在样式中可以忽略不写, 直接使用对应的数值.更多详情请查看 通用样式.
  • 子元素的样式不会继承自父元素, 这一点与标准CSS不同, 比如colorfont-size等属性.
  • 标准CSS包含了非常多的样式属性, 但Weex只支持了其中的一部分, 包括盒模型,flexbox,position等布局属性. 以及font-size, color等样式.

与数据绑定结合

文档 数据绑定styleclass属性相关的内容, 相关的内容可以查看该文档. 例如:

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

下一篇:事件.

@sospartan sospartan changed the title from 样式和类 (未完成) to 样式和类 Jun 15, 2016
@transtone
transtone commented Jul 1, 2016 edited

上一篇: 数据绑定
下一篇: 事件

@daochouwangu

键和值由:分割,每对键值之间由;分隔. @sospartan

@sospartan

@daochouwangu 谢谢反馈,已修正

@transtone nice work!

@jkwangbest

注意事项 - 这一点标准CSS不同

@flyzyh
flyzyh commented Jul 14, 2016

有错别字
Class属性——注意事项的第四条
“子元素的样式不会继承自父元素, 这一点标准CSS不同, 比如color和font-size等属性.”

@ChenYingPing

键和值由;分隔,每对键值之间由;分隔. 并没有修正呀

@sospartan

@ChenYingPing 我前面说的是'分"割"'这里的别字,你指的是?

@ChenYingPing

我说的是符号 ;应该改为 :

@sospartan

@ChenYingPing 这个还真没有错,键和值之间是冒号,一对键值与另外一对键值之前用分号,就像这样:key1:value;key2:value

@ChenYingPing

@sospartan 你说的没错,可是原文是(第七行中的内容): 键和值由;分隔,每对键值之间由;分隔.

@sospartan

@ChenYingPing sorry,我眼花了,已经修改了

@lanria990
lanria990 commented Aug 11, 2016 edited

更多详情请查看 通用样式

. 页面404@sospartan

@aizhimin

最最最最最最最最关心的安卓和ios多屏幕适配问题,具体怎么做?

@wzj583585700

weex组件布局和css一模一样吗,到底怎么布局,这文档也不说

@malaimoo
malaimoo commented Nov 6, 2016

@aizhimin "为了简化页面设计和实现, 屏幕的宽度统一为750像素, 不同屏幕会按照比例转化为这一尺寸.
" 按照750像素的宽度去适配就可以了,应该是这样。

@trk-huang

我在Weex Playground App中的Common Style有看到flex-wrap,这个样式属性是如何使用的呢

@DoranYun
DoranYun commented Dec 9, 2016

@aizhimin Weex 三端一直 750 宽度自适应,无需担心多屏适配问题,遇到 bug 欢迎提 issues

@DoranYun
DoranYun commented Dec 9, 2016

@wzj583585700
Weex 支持 盒模型和 Flex 布局,示例可参考新文档:

http://alibaba.github.io/weex/cn/doc/references/common-style.html

@DoranYun
DoranYun commented Dec 9, 2016

@trk-huang
目前暂不支持 flex-wrap 。Flex 支持列表可参考新文档 http://alibaba.github.io/weex/cn/doc/references/common-style.html#flexbox

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment