[breaking change] Label: 重命名为 Tag && 整理样式 (#55)

* 重新更改 标签 组件 && 修复 Layout 错误命名

* update readme

README.md

@@ -49,7 +49,6 @@ npm run dev
 * [Cell - 单元格](./packages/cell/README.md)
 * [Helper - 基础样式](./packages/helper/README.md)
 * [Icon - 图标](./packages/icon/README.md)
-* [Label - 标签](./packages/label/README.md)
 * [Layout - 布局](./packages/row/README.md)
 * [Loadmore - 加载](./packages/loadmore/README.md)
 * [Noticebar - 通告栏](./packages/noticebar/README.md)
@@ -62,6 +61,7 @@ npm run dev
 * [Tab - 标签](./packages/tab/README.md)
 * [Field - 输入框](./packages/field/README.md)
 * [Dialog - 弹出框](./packages/dialog/README.md)
+* [Tag - 标签](./packages/tag/README.md)
 * [Toast - 轻提示](./packages/toast/README.md)
 * [Toptips - 顶部提示](./packages/toptips/README.md)
 

example/app.json

@@ -10,7 +10,6 @@
     "pages/field/index",
     "pages/helper/index",
     "pages/icon/index",
-    "pages/label/index",
     "pages/layout/index",
     "pages/loadmore/index",
     "pages/noticebar/index",
@@ -20,6 +19,7 @@
     "pages/steps/index",
     "pages/switch/index",
     "pages/tab/index",
+    "pages/tag/index",
     "pages/toptips/index",
     "pages/toast/index",
     "pages/select/index"

example/pages/dashboard/config.js

@@ -24,10 +24,10 @@ export default {
         name: 'Icon 图标',
         path: '/pages/icon/index'
       }, {
-        name: 'Label 标签',
+        name: 'Tag 标记',
-        path: '/pages/label/index'
+        path: '/pages/tag/index'
       }, {
-        name: 'Layout 标签',
+        name: 'Layout 布局',
         path: '/pages/layout/index'
       }, {
         name: 'Loadmore 加载',

example/pages/label/index.json

@@ -1,3 +0,0 @@
-{
-  "navigationBarTitleText": "Label 标签"
-}

example/pages/label/index.wxml

@@ -1,25 +0,0 @@
-<view class="container">
-
-  <view class="doc-title">LABEL</view>
-
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-label">灰色</view>
-      <view class="zan-label zan-label--primary">红色</view>
-      <view class="zan-label zan-label--disabled">黑色</view>
-    </view>
-  </view>
-  <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-label zan-label--primary zan-label--small">会员折扣</view>
-      <view class="zan-label zan-label--primary zan-label--small">返现</view>
-    </view>
-  </view>
-
-    <view class="zan-panel">
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-label zan-label--primary zan-label--small zan-label--plain">会员折扣</view>
-      <view class="zan-label zan-label--primary zan-label--small zan-label--plain">返现</view>
-    </view>
-  </view>
-</view>

example/pages/tag/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Tag 标记"
+}

example/pages/tag/index.wxml

@@ -0,0 +1,29 @@
+<view class="container">
+
+  <view class="doc-title">Tag</view>
+
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-tag">灰色</view>
+      <view class="zan-tag zan-tag--danger">红色</view>
+      <view class="zan-tag zan-tag--disabled">黑色</view>
+    </view>
+  </view>
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-tag zan-tag--danger">会员折扣</view>
+      <view class="zan-tag zan-tag--warn">返现</view>
+      <view class="zan-tag zan-tag--primary">返现</view>
+      <view class="zan-tag zan-tag--primary zan-tag--disabled">黑色</view>
+    </view>
+  </view>
+
+    <view class="zan-panel">
+    <view class="zan-cell zan-cell--last-child">
+      <view class="zan-tag zan-tag--danger zan-tag--plain">会员折扣</view>
+      <view class="zan-tag zan-tag--warn zan-tag--plain">返现</view>
+      <view class="zan-tag zan-tag--primary zan-tag--plain">返现</view>
+      <view class="zan-tag zan-tag--primary zan-tag--plain zan-tag--disabled">返现</view>
+    </view>
+  </view>
+</view>

example/pages/tag/index.wxss

@@ -0,0 +1,3 @@
+.zan-tag + .zan-tag {
+  margin-left: 10px;
+}

packages/index.pcss

@@ -9,7 +9,6 @@
 @import "field/index.pcss";
 @import "helper/index.pcss";
 @import "icon/index.pcss";
-@import "label/index.pcss";
 @import "loadmore/index.pcss";
 @import "noticebar/index.pcss";
 @import "panel/index.pcss";
@@ -20,5 +19,6 @@
 @import "steps/index.pcss";
 @import "switch/index.pcss";
 @import "tab/index.pcss";
+@import "tag/index.pcss";
 @import "toast/index.pcss";
 @import "toptips/index.pcss";

packages/label/index.pcss

@@ -1,34 +0,0 @@
-.zan-label {
-  display: inline-block;
-  font-size: 12px;
-  height: 28px;
-  line-height: 28px;
-  color: #333;
-  border: 1rpx solid #999;
-  padding: 0px 10px;
-  border-radius: 2px;
-  margin-right: 10px;
-  box-sizing: border-box;
-  vertical-align: middle;
-  text-align: center;
-}
-.zan-label--primary {
-  color: #fff;
-  background: #f44;
-  border: 1rpx solid #f44;
-}
-.zan-label--disabled {
-  color: #cacaca;
-  background: #eee;
-  border: 1rpx solid #e5e5e5;
-}
-.zan-label--small {
-  font-size: 11px;
-  height: 16px;
-  line-height: 16px;
-  padding: 0px 3px;
-}
-.zan-label--plain.zan-label--primary {
-  color: #f44;
-  background: #fff;
-}

packages/tag/index.pcss

@@ -0,0 +1,54 @@
+.zan-tag {
+  display: inline-block;
+  box-sizing: border-box;
+  line-height: 16px;
+  padding: 0 5px;
+  border-radius: 2px;
+  font-size: 11px;
+  background: #c9c9c9;
+  border: 1rpx solid #e5e5e5;
+  color: #fff;
+}
+
+/* 各种主题代码 */
+.zan-tag--primary {
+  color: #fff;
+  background-color: #4b0;
+  border: 1rpx solid #4b0;
+
+  /* 空心形式 */
+  &.zan-tag--plain {
+    color: #4b0;
+    background: #fff;
+  }
+}
+.zan-tag--danger {
+  color: #fff;
+  background: #f44;
+  border: 1rpx solid #f44;
+
+  /* 空心形式 */
+  &.zan-tag--plain {
+    color: #f44;
+    background: #fff;
+  }
+}
+.zan-tag--warn {
+  color: #fff;
+  background: #f85;
+  border: 1rpx solid #f85;
+
+  /* 空心形式 */
+  &.zan-tag--plain {
+    color: #f85;
+    background: #fff;
+  }
+}
+
+
+/* disabled tag */
+.zan-tag--disabled {
+  color: #cacaca !important;
+  background: #eee;
+  border: 1rpx solid #e5e5e5;
+}