CMSS介紹

CMSS(Chameleon Style Sheets)是一套樣式語(yǔ)言，用于描述 CML 的組件樣式。

關(guān)于常用布局的匯總

使用 CMSS

CMSS 支持內(nèi)聯(lián)及類選擇器等。

普通寫(xiě)法

具體實(shí)現(xiàn)寫(xiě)在 .cml 文件的 <style> 標(biāo)簽內(nèi)。

目前支持有如下兩種關(guān)聯(lián)到元素上：

靜態(tài) class

<view class="kind-list-item-hd-show class2 class3"></view>

動(dòng)態(tài) class

目前 class 不支持傳入對(duì)象的形式； 簡(jiǎn)單數(shù)據(jù)綁定 {{}}之內(nèi)的會(huì)被當(dāng)做一個(gè)表達(dá)式去處理；

<view><text class="{{prefix+'a'}}">class數(shù)據(jù)綁定</text></view>
<script>
class Index {
  data() {
    return {
      prefix: 'cls',
    };
  }
}
export default new Index();
</script>

三元運(yùn)算符

<view class="{{open ? 'cls1 cls2' : 'cls3 cls4'}}"> </view>

或者將其放入計(jì)算屬性

<template>
  <view class="{{itemClass}}"> </view>
</template>
<script>
class Index {
  computed = {
    itemClass() {
      return open ? 'cls1 cls2' : 'cls3 cls4';
    },
  };
}
export default new Index();
</script>

內(nèi)聯(lián)寫(xiě)法

模版中寫(xiě)內(nèi)聯(lián)樣式，分為靜態(tài)和動(dòng)態(tài)兩種，靜態(tài)樣式指純字符串，動(dòng)態(tài)樣式是有數(shù)據(jù)綁定。style 也不支持對(duì)象語(yǔ)法和數(shù)組語(yǔ)法； 目前可以使用的方式如下：

靜態(tài)樣式：

<template>
  <view style="width: 200cpx;"> </view>
</template>

動(dòng)態(tài)樣式：

<template>
  <view style="{{inlineStyle}}"> </view>
</template>
<script>
class Index {
  data = {
    inlineStyle: 'width: 200cpx;',
  };
}
export default new Index();
</script>

布局

采用 FlexBox 布局模型，請(qǐng)勿使用 float 方式布局。

關(guān)于常用布局的匯總

Flexbox

chameleon 布局模型基于 CSS Flexbox，以便所有頁(yè)面元素的排版能夠一致可預(yù)測(cè)，同時(shí)頁(yè)面布局能適應(yīng)各種設(shè)備或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成員項(xiàng)。如果一個(gè) CML 元素可以容納其他元素，那么它就成為 flex 容器。需要注意的是，flexbox 的老版規(guī)范相較新版有些出入，比如是否能支持 wrapping。這些都描述在 W3C 的工作草案中了，你需要注意下新老版本之間的不同。

容器

在 CML 中，F(xiàn)lexbox 是默認(rèn)且唯一的布局模型，所以你不需要手動(dòng)為元素添加 display: flex; 屬性。

• flex-direction：定義了 flex 容器中 flex 成員項(xiàng)的排列方向。可選值為 row | column 默認(rèn)值為 columncolumn：從上到下排列。row：從左到右排列。
• justify-content：定義了 flex 容器中 flex 成員項(xiàng)在主軸方向上如何排列以處理空白部分。可選值為 flex-start | flex-end | center | space-between默認(rèn)值為 flex-start。flex-start：是默認(rèn)值，所有的 flex 成員項(xiàng)都排列在容器的前部；flex-end：則意味著成員項(xiàng)排列在容器的后部；center：即中間對(duì)齊，成員項(xiàng)排列在容器中間、兩邊留白；space-between：表示兩端對(duì)齊，空白均勻地填充到 flex 成員項(xiàng)之間。space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

- align-items：

定義了 flex 容器中 flex 成員項(xiàng)在縱軸方向上如何排列以處理空白部分?？蛇x值為 stretch | flex-start | center | flex-end 默認(rèn)值為 stretch。

• stretch： 是默認(rèn)值，即拉伸高度至 flex 容器的大?。?/li>
• flex-start： 則是上對(duì)齊，所有的成員項(xiàng)排列在容器頂部；
• flex-end： 是下對(duì)齊，所有的成員項(xiàng)排列在容器底部；
• center： 是中間對(duì)齊，所有成員項(xiàng)都垂直地居中顯示。
• baseline： 項(xiàng)目的第一行文字的基線對(duì)齊。

• flex-flow說(shuō)明:flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性, 用于設(shè)置或檢索彈性盒模型對(duì)象的子元素排列方式。flex-direction 屬性規(guī)定靈活項(xiàng)目的方向。flex-wrap 屬性規(guī)定靈活項(xiàng)目是否拆行或拆列。語(yǔ)法:flex-flow: flex-direction flex-wrap;

成員項(xiàng)

flex 屬性定義了 flex 成員項(xiàng)可以占用容器中剩余空間的大小。如果所有的成員項(xiàng)設(shè)置相同的值 flex: 1，它們將平均分配剩余空間. 如果一個(gè)成員項(xiàng)設(shè)置的值為 flex: 2，其它的成員項(xiàng)設(shè)置的值為 flex: 1，那么這個(gè)成員項(xiàng)所占用的剩余空間是其它成員項(xiàng)的 2 倍。

• flex {number}：值為 number 類型。

示例

一個(gè)簡(jiǎn)單的網(wǎng)格布局。

<template>
  <view>
    <view c-for="{{list}}" c-for-index="i" c-for-item="item" class="row">
      <view c-for="{{item}}" c-for-index="k" c-for-item="text" class="item">
        <view>
          <text>{{ text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
class Index {
  data = {
    list: [
      ['A', 'B', 'C'],
      ['D', 'E', 'F'],
      ['G', 'H', 'I'],
    ],
  };
}
export default new Index();
</script>
<style scoped>
.item {
  flex: 1;
  justify-content: center;
  align-items: center;
  border-width: 1;
}
.row {
  flex-direction: row;
  height: 80cpx;
}
</style>
<script cml-type="json">
{
  "base": {}
}
</script>

定位

CML 支持 position 定位，用法與 CSS position 類似。為元素設(shè)置 position 后，可通過(guò) top、right、bottom、left 四個(gè)屬性設(shè)置元素坐標(biāo)。

• position {string}：設(shè)置定位類型?？蛇x值為 relative | absolute | fixed | sticky默認(rèn)值為 relative。relative 是默認(rèn)值，指的是相對(duì)定位；absolute 是絕對(duì)定位，以元素的容器作為參考系；fixed 保證元素在頁(yè)面窗口中的對(duì)應(yīng)位置顯示；sticky 指的是僅當(dāng)元素滾動(dòng)到頁(yè)面之外時(shí)，元素會(huì)固定在頁(yè)面窗口的頂部。
• top {number}：距離上方的偏移量默認(rèn)為 0。
• bottom {number}：距離下方的偏移量默認(rèn)為 0。
• left {number}：距離左方的偏移量默認(rèn)為 0。
• right {number}：距離右方的偏移量默認(rèn)為 0。

示例

<template>
  <view class="wrapper">
    <view class="box box1"> </view>
    <view class="box box2"> </view>
    <view class="box box3"> </view>
  </view>
</template>
<script>
class Index {}
export default new Index();
</script>
<style>
.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #cccccc;
}
.box {
  width: 400cpx;
  height: 400cpx;
  position: absolute;
}
.box1 {
  top: 0;
  left: 0;
  background-color: #ff0000;
}
.box2 {
  top: 150cpx;
  left: 150cpx;
  background-color: #0055dd;
}
.box3 {
  top: 300cpx;
  left: 300cpx;
  background-color: #00ff49;
}
</style>
<script cml-type="json">
{
  "base": {}
}
</script>

盒模型

chameleon 中盒模型box-sizing默認(rèn)為border-box，即寬度包含內(nèi)容、內(nèi)邊距盒邊框。

chameleon 盒模型基于 CSS 盒模型，每個(gè) CML 元素都可視作一個(gè)盒子。我們一般在討論設(shè)計(jì)或布局時(shí)，會(huì)提到「盒模型」這個(gè)概念。

盒模型描述了一個(gè)元素所占用的空間。每一個(gè)盒子有四條邊界：外邊距邊界 margin edge, 邊框邊界 border edge, 內(nèi)邊距邊界 padding edge 與內(nèi)容邊界 content edge。這四層邊界，形成一層層的盒子包裹起來(lái)，這就是盒模型大體上的含義。

• width: {length} 默認(rèn)值 0
• height: {length} 默認(rèn)值 0
• padding：內(nèi)邊距，內(nèi)容和邊框之間的距離，默認(rèn)值 0?？捎幸韵聦?xiě)法:padding-left: {length} 默認(rèn)值 0padding-right: {length} 默認(rèn)值 0padding-top: {length} 默認(rèn)值 0padding-bottom: {length} 默認(rèn)值 0

支持簡(jiǎn)寫(xiě)模式：padding：{length length length length}

• margin: {length} 外邊距，元素和元素之間的空白距離。值類型為 length 默認(rèn)值 0?？捎腥缦聦?xiě)法：margin-left: {length} 默認(rèn)值 0margin-right: {length} 默認(rèn)值 0margin-top: {length} 默認(rèn)值 0margin-bottom: {length} 默認(rèn)值 0

支持簡(jiǎn)寫(xiě)模式：margin: {length length length length}

• border：設(shè)定邊框，簡(jiǎn)寫(xiě)方式：border：1px solid #ff0000;
• border-style: {string} 設(shè)定邊框樣式，值類型為 string，可選值為 solid | dashed | dotted，默認(rèn)值 solid?？捎腥缦聦?xiě)法：border-left-style: {string} 可選值為 solid | dashed | dotted默認(rèn)值 solidborder-top-style: {string} 可選值為 solid | dashed | dotted默認(rèn)值 solidborder-right-style: {string} 可選值為 solid | dashed | dotted默認(rèn)值 solidborder-bottom-style: {string} 可選值為 solid | dashed | dotted默認(rèn)值 solid
• border-width: {length} 設(shè)定邊框?qū)挾确秦?fù)值，默認(rèn)值 0?？捎腥缦聦?xiě)法：border-left-width: {length} 非負(fù)值，默認(rèn)值 0border-top-width: {length} 非負(fù)值，默認(rèn)值 0border-right-width: {length} 非負(fù)值，默認(rèn)值 0border-bottom-width: {length} 非負(fù)值，默認(rèn)值 0
• border-color: {color}：設(shè)定邊框顏色默認(rèn)值 #000000?？捎腥缦聦?xiě)法：border-left-color: {color} 默認(rèn)值 #000000border-top-color: {color} 默認(rèn)值 #000000border-right-color: {color} 默認(rèn)值 #000000border-bottom-color: {color} 默認(rèn)值 #000000
• border-radius: {length} 設(shè)定圓角默認(rèn)值 0?？捎腥缦聦?xiě)法：border-bottom-left-radius: {length} 非負(fù)值，默認(rèn)值 0border-bottom-right-radius: {length} 非負(fù)值，默認(rèn)值 0border-top-left-radius: {length} 非負(fù)值，默認(rèn)值 0border-top-right-radius: {length} 非負(fù)值，默認(rèn)值 0

** 注意 **

chameleon 盒模型的 box-sizing 默認(rèn)為 border-box，即盒子的寬高包含內(nèi)容、內(nèi)邊距和邊框的寬度，不包含外邊距的寬度。

目前在 <image> 組件上尚無(wú)法只定義一個(gè)或幾個(gè)角的 border-radius。比如你無(wú)法在這兩個(gè)組件上使用 border-top-left-radius。該約束只對(duì) iOS 生效，Android 并不受此限制。

盡管 overflow:hidden 在 Android 上是默認(rèn)行為，但只有下列條件都滿足時(shí)，一個(gè)父 view 才會(huì)去 clip 它的子 view。這個(gè)限制只對(duì) Android 生效，iOS 不受影響。

• 父 view 是 div, a, cell, refresh 或 loading。
• 系統(tǒng)版本是 Android 4.3 或更高。
• 系統(tǒng)版本不是 Andorid 7.0。
• 父 view 沒(méi)有 background-image 屬性或系統(tǒng)版本是 Android 5.0 或更高。

示例：

<template>
  <view>
    <image
      style="width: 400cpx; height: 200cpx; margin-left: 20cpx;"
      src="https://g.alicdn.com/mtb/lab-zikuan/0.0.18/weex/weex_logo_blue@3x.png" rel="external nofollow" 
    ></image>
  </view>
</template>

文本

文本類組件及通用樣式。

文本類組件共享一些通用樣式, 這類組件目前包括 <text>和<input>。

屬性

• color {color}：文字顏色?？蛇x值為色值，支持 RGB（ rgb(255, 0, 0) ）；RGBA（ rgba(255, 0, 0, 0.5) ）；十六進(jìn)制（ #ff0000 ）；精簡(jiǎn)寫(xiě)法的十六進(jìn)制（ #f00 ）；色值關(guān)鍵字（red）。
• lines {number}: 指定文本行數(shù)。僅在 <text> 組件中支持。默認(rèn)值是 0 代表不限制行數(shù)。
• font-size {number}：文字大小。
• font-style {string}：字體類別?？蛇x值 normal | italic 默認(rèn)為 normal。
• font-weight {string}：字體粗細(xì)程度可選值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900normal 等同于 400, bold 等同于 700；默認(rèn)值: normal；iOS 支持 9 種 font-weight 值；Android 僅支持 400 和 700, 其他值會(huì)設(shè)為 400 或 700類似 lighter, bolder 這樣的值暫時(shí)不支持
• text-decoration {string}：字體裝飾，可選值 none | underline | line-through 默認(rèn)值為 none。
• text-align {string}：對(duì)齊方式?？蛇x值 left | center | right 默認(rèn)值為 left。目前暫不支持 justify, justify-all。
• font-family {string}：設(shè)置字體。這個(gè)設(shè)置 不保證 在不同平臺(tái)，設(shè)備間的一致性。如所選設(shè)置在平臺(tái)上不可用，將會(huì)降級(jí)到平臺(tái)默認(rèn)字體。
• text-overflow {string}：設(shè)置內(nèi)容超長(zhǎng)時(shí)的省略樣式?？蛇x值 clip | ellipsis

尺寸

為了統(tǒng)一多端尺寸單位，呈現(xiàn)效果一致，同時(shí)頁(yè)面響應(yīng)式，項(xiàng)目中統(tǒng)一采用cpx作為尺寸單位，規(guī)定以屏幕 750px（占滿屏幕）視覺(jué)稿作為標(biāo)準(zhǔn)。

禁止.cml組件中使用 px，若要使用請(qǐng)使用多態(tài)協(xié)議。

在 CML 項(xiàng)目中，我們使用cpx作為統(tǒng)一的長(zhǎng)度單位。cpx可以根據(jù) 屏幕寬度自適應(yīng)，我們規(guī)定屏幕寬度為 750cpx。你也可以在 多態(tài)組件灰度層使用某一端的長(zhǎng)度單位。

使用 cpx 設(shè)置元素寬度高度

<template>
  <view style="width: 100cpx; height: 100cpx; background: red;"></view>
</template>

使用 cpx 設(shè)置字體大小

<template>
  <text style="font-size: 24cpx;">Chameleon</text>
</template>

使用 cpx 設(shè)置行高

<template>
  <text style="font-size: 24cpx; line-height: 30cpx;">Chameleon</text>
</template>

使用 cpx 注意事項(xiàng)

** 應(yīng)避免以下寫(xiě)法 **

<template>
  <text style="{{'font-size: ' + fontSize + 'cpx'}}">Chameleon</text>
</template>
<script>
class Test {
  data: {
    fontSize: 24,
  };
}
export default new Test();
</script>

可以改成以下寫(xiě)法

<template>
  <text style="{{cstyle}}">Chameleon</text>
</template>
<script>
class Test {
  data: {
    fontSize: 24
  },
  computed: {
    cstyle() {
      return 'font-size: ' + this.fontSize + 'cpx'
    }
  }
}
export default new Test()
</script>

color 單位

支持以下寫(xiě)法：

.class-name {
  color: #0f0; /* 3-chars hex */
  color: #00ff00; /* 6-chars hex */
  color: rgb(255, 0, 0); /* rgba */
  color: rgba(255, 0, 0, 0.5); /* rgba */
  color: transparent; /* transparent */
  color: orange; /* Basic color keywords */
  color: darkgray; /* Extended color keywords */
}

注意

• 不支持 hsl(), hsla(), currentColor, 8 個(gè)字符的十六進(jìn)制顏色。
• rgb(a,b,c) 或 rgba(a,b,c,d) 的性能比其他顏色格式差很多，請(qǐng)選擇合適的顏色格式。

number 單位

僅僅一個(gè)數(shù)字。用于 opacity，lines 等。

有時(shí)值必須是整數(shù)，例如：lines。

percentage 單位 (暫不支持)

表示百分比值，如“50％”，“66.7％”等。

它是 CSS 標(biāo)準(zhǔn)的一部分，但 CML 暫不支持。

顏色

樣式多態(tài)

更加方便地為不同端定制樣式。

.cml 文件中的 style 標(biāo)簽支持樣式的多態(tài)，即可以針對(duì)不同的平臺(tái)寫(xiě)不同的樣式，格式如下：

<style>
@media cml-type (支持的平臺(tái)) {

}
.common {
  /**/
}
<style>

其中支持的平臺(tái)為可以用逗號(hào)分隔多個(gè)平臺(tái)，可選平臺(tái)為 web, weex, wx, alipay, baidu。 demo 示例，class1 在各端的差異實(shí)現(xiàn)。

<template>
  <view><text class="class1">chameleon</text><view>
</template>
<script>
  class DemoPage {

  }
  export default new DemoPage();
</script>
<style>
@media cml-type (web) {
  .class1 {
    color: red;
  }
}
@media cml-type (weex) {
  .class1 {
    color: green;
  }
}
@media cml-type (wx,alipay,baidu,qq,tt) {
  .class1 {
    color: blue;
  }
}
</style>
<script cml-type="json">
{}
</script>

注意： 多態(tài)差異 語(yǔ)法只能在.cml 文件中使用，不能在.css,.less等其他樣式文件中使用，如果需要分文件實(shí)現(xiàn)，可以在多態(tài)內(nèi)部分別引入文件。例如：

<style lang="less">
@media cml-type (web) {
  @import './style1.less';
}
@media cml-type (weex) {
  @import './style2.less';
}
@media cml-type (wx,alipay,baidu,qq,tt) {
  @import './style3.less';
}
</style>

一致性基礎(chǔ)樣式

統(tǒng)一各端基礎(chǔ)樣式，增強(qiáng)表現(xiàn)一致性。

通常情況下，H5、小程序、客戶端擁有各自的默認(rèn)樣式，各端呈現(xiàn)效果不一。所以，cml 框架會(huì)給各端添加一致性基礎(chǔ)樣式。

基礎(chǔ)樣式包括以下方面：

針對(duì) H5 端添加的基礎(chǔ)樣式如下

.cml-root {
  width: 100%;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  font-family: BlinkMacSystemFont, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cml-base {
  text-align: left;
  font-size: 0.4rem; /*15px*/
  letter-spacing: 0.02rem;
}

.cml-base,
.cml-base::before,
.cml-base::after {
  box-sizing: border-box;
  text-size-adjust: none;
}

.cml-view {
  display: flex;
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  align-items: stretch;
  align-content: flex-start;
  border: 0 solid black;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cml-text {
  display: block;
  box-sizing: border-box;
  position: relative;
  white-space: pre-wrap; /* not using 'pre': support auto line feed. */
  word-wrap: break-word;
  overflow: hidden; /* it'll be clipped if the height is not high enough. */

  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  border: 0 solid black;
  margin: 0;
  padding: 0;
  min-width: 0;
}

針對(duì)小程序添加的基礎(chǔ)樣式如下：

.cml-base {
  text-align: left;
  font-size: 32rpx;
  letter-spacing: 1rpx;
  font-family: BlinkMacSystemFont, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cml-base,
.cml-base::before,
.cml-base::after {
  box-sizing: border-box;
  text-size-adjust: none;
}
.cml-view {
  display: flex;
  box-sizing: border-box;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  align-items: stretch;
  align-content: flex-start;
  border: 0 solid black;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.cml-text {
  display: block;
  box-sizing: border-box;
  position: relative;
  white-space: pre-wrap; /* not using 'pre': support auto line feed. 保留空白符序列，但是正常地進(jìn)行換行 */
  word-wrap: break-word; /* 在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。 */
  overflow: hidden; /* it'll be clipped if the height is not high enough. */

  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  border: 0 solid black;
  margin: 0;
  padding: 0;
  min-width: 0;
}

說(shuō)明如下：

只跨 Web 和小程序的應(yīng)用

受限于客戶端的 CMSS 渲染能力，開(kāi)發(fā)會(huì)有諸多限制。如果你只需要跨 H5 和小程序應(yīng)用時(shí)，開(kāi)發(fā)會(huì)變得很輕便。