From 97a6365c0fce7986cb891e25337a0a2b841aa896 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Wed, 8 Nov 2017 22:33:37 +0800
Subject: [PATCH] =?UTF-8?q?[new=20feature]=20Docs:=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BD=BF=E7=94=A8=E6=96=87=E6=A1=A3=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 增加 徽章 文档

* add readme && change capsule css

* reset capsule css
---
 example/pages/capsule/index.wxss |  3 ++
 packages/badge/README.md         | 21 +++++++++++++
 packages/btn/README.md           | 40 +++++++++++++++++++++++
 packages/capsule/README.md       | 32 +++++++++++++++++++
 packages/capsule/index.wxml      |  2 +-
 packages/card/README.md          | 49 +++++++++++++++++++++++++++++
 packages/cell/README.md          | 54 ++++++++++++++++++++++++++++++++
 scripts/utils/extracter.js       |  4 ++-
 8 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 example/pages/capsule/index.wxss
 create mode 100644 packages/badge/README.md
 create mode 100644 packages/btn/README.md
 create mode 100644 packages/capsule/README.md
 create mode 100644 packages/card/README.md
 create mode 100644 packages/cell/README.md

diff --git a/example/pages/capsule/index.wxss b/example/pages/capsule/index.wxss
new file mode 100644
index 00000000..1141c678
--- /dev/null
+++ b/example/pages/capsule/index.wxss
@@ -0,0 +1,3 @@
+.zan-capsule + .zan-capsule {
+  margin-left: 10px;
+}
diff --git a/packages/badge/README.md b/packages/badge/README.md
new file mode 100644
index 00000000..c67972f6
--- /dev/null
+++ b/packages/badge/README.md
@@ -0,0 +1,21 @@
+## Badge 徽章
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+```html
+<view class="badge-container zan-badge">
+  <view class="zan-badge__count">10</view>
+</view>
+```
+
+```css
+.badge-container {
+  width: 100px;
+  height: 100px;
+}
+```
diff --git a/packages/btn/README.md b/packages/btn/README.md
new file mode 100644
index 00000000..6ac40453
--- /dev/null
+++ b/packages/btn/README.md
@@ -0,0 +1,40 @@
+## Button 按钮
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+```html
+<button class="zan-btn">取消订单</button>
+```
+
+#### 按钮类型
+按钮支持额外的三种类型 primary, danger, warn
+```html
+<button class="zan-btn zan-btn--primary">确认付款</button>
+<button class="zan-btn zan-btn--danger">确认付款</button>
+<button class="zan-btn zan-btn--warn">确认付款</button>
+```
+
+#### 按钮大小
+按钮支持额外三种大小 large, small, mini
+```html
+<button class="zan-btn zan-btn--large">确认付款</button>
+<button class="zan-btn zan-btn--small">取消订单</button>
+<button class="zan-btn zan-btn--mini">确认付款</button>
+```
+
+#### 其他
+按钮支持镂空状态，可以直接使用 zan-btn--plain
+```html
+<button class="zan-btn zan-btn--primary zan-btn--plain">确认付款</button>
+```
+同时支持加载状态，可以使用 zan-btn--loading 获得
+```html
+<button class="zan-btn zan-btn--loading">确认付款</button>
+```
diff --git a/packages/capsule/README.md b/packages/capsule/README.md
new file mode 100644
index 00000000..dfa17018
--- /dev/null
+++ b/packages/capsule/README.md
@@ -0,0 +1,32 @@
+## Capsule 胶囊
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+在需要使用的模板里引入组件库模板
+```html
+<import src="path/to/zanui-weapp/dist/capsule/index.wxml" />
+```
+
+### 代码演示
+
+#### 基础用法
+可以用 leftText 和 rightText 控制左右文案
+```html
+<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
+```
+
+#### 使用不同类型胶囊
+按钮支持额外的三种类型 primary, danger, warn
+```html
+<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
+```
+
+#### 自定义颜色
+通过 color 熟悉，可以自定义显示的颜色
+```html
+<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
+```
diff --git a/packages/capsule/index.wxml b/packages/capsule/index.wxml
index da86deba..8306b99f 100644
--- a/packages/capsule/index.wxml
+++ b/packages/capsule/index.wxml
@@ -9,4 +9,4 @@
       <view class="zan-capsule__right">{{ rightText }}</view>
     </block>
   </view>
-</template>
\ No newline at end of file
+</template>
diff --git a/packages/card/README.md b/packages/card/README.md
new file mode 100644
index 00000000..e9c548ed
--- /dev/null
+++ b/packages/card/README.md
@@ -0,0 +1,49 @@
+## Card 卡片
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+卡片可以用于左侧图片，右侧描述信息的展示。
+`zan-card` 由 `zan-card__thumb` 和 `zan-card__detail` 组成。分别负责左侧图片展示和右侧内容区域展示
+如下，是一个商品信息的展示：
+```html
+<view class="zan-card">
+  <!-- 卡片左侧商品图片 -->
+  <view class="zan-card__thumb">
+    <image class="zan-card__img"
+      src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
+      mode="aspectFit"
+    ></image>
+  </view>
+  <!-- 卡片右侧详情描述 -->
+  <view class="zan-card__detail">
+    <!-- 商品标题行 -->
+    <!-- 每行可以使用 zan-card__detail-row 来控制展示区域 -->
+    <!-- 每行里面可以用 zan-card__left-col zan-card__right-col 来控制左右展示 -->
+    <view class="zan-card__detail-row">
+      <view class="zan-card__right-col">¥ 999.99</view>
+      <view class="zan-card__left-col zan-ellipsis--l2">
+         红烧牛肉【虚拟商品】【有库存】【有sku】
+      </view>
+    </view>
+    <!-- 商品附属信息展示行 -->
+    <view class="zan-card__detail-row zan-c-gray-darker">
+      <view class="zan-card__right-col">x2</view>
+      <view class="zan-card__left-col">
+        3000克 50%
+      </view>
+    </view>
+    <!-- 商品操作按钮相关 -->
+    <view class="zan-card__detail-row zan-c-gray-darker">
+      <view class="zan-card__left-col zan-c-red">已发货</view>
+    </view>
+  </view>
+</view>
+```
+
diff --git a/packages/cell/README.md b/packages/cell/README.md
new file mode 100644
index 00000000..4129159d
--- /dev/null
+++ b/packages/cell/README.md
@@ -0,0 +1,54 @@
+## Cell 单元格
+
+### 使用指南
+在 app.wxss 中引入组件库所有样式
+```css
+@import "path/to/zanui-weapp/dist/index.wxss";
+```
+
+### 代码演示
+
+#### 基础用法
+`zan-cell` 有三部分组成：
+顶部 Icon：`zan-cell__icon`
+主内容区：`zan-cell__bd`
+附属内容：`zan-cell__ft`
+
+```html
+<view class="zan-cell">
+  <view class="zan-cell__icon zan-icon zan-icon-check"></view>
+  <view class="zan-cell__bd">单行列表</view>
+  <view class="zan-cell__ft">详细信息</view>
+</view>
+```
+
+当然，也可以在内容区增加附加描述
+```html
+<view class="zan-cell">
+  <view class="zan-cell__bd">
+    <view class="zan-cell__text">单行列表</view>
+    <view class="zan-cell__desc">附加描述</view>
+  </view>
+  <view class="zan-cell__ft">详细信息</view>
+</view>
+```
+
+#### 带箭头的单元格
+在根元素上增加 `zan-cell--access`，可以在右侧显示出箭头。
+```html
+<view class="zan-cell zan-cell--access">
+  <view class="zan-cell__bd">单行列表</view>
+  <view class="zan-cell__ft"></view>
+</view>
+```
+
+#### 带开关的单元格
+增加 `zan-cell--switch`，更好的适配带有开关的情况
+```html
+<view class="zan-cell zan-cell--switch">
+  <view class="zan-cell__bd">开关</view>
+  <view class="zan-cell__ft">
+    <template is="zan-switch" data="{{ checked }}"/>
+  </view>
+</view>
+```
diff --git a/scripts/utils/extracter.js b/scripts/utils/extracter.js
index 41a0e289..32d5a1e9 100644
--- a/scripts/utils/extracter.js
+++ b/scripts/utils/extracter.js
@@ -1,3 +1,4 @@
+const path = require('path');
 const fs = require('fs-extra');
 const nodeWatch = require('node-watch');
 require('shelljs/global');
@@ -18,7 +19,8 @@ function extracter(config = {}) {
   // 复制 src
   fs.copySync(config.src, config.dist, {
     filter(src = '') {
-      return src.indexOf('.pcss') < 0;
+      const extname = path.extname(src);
+      return ['.pcss', '.md'].indexOf(extname) < 0;
     }
   });