更新badge文档

public/docset/ui/wc-badge.md

@@ -0,0 +1,148 @@
+## WC-BADGE
+> 按钮和图标上的数字或状态标记。
+
+
+
+### 基础用法
+可以用来展示新消息的数量。
+<br/>
+数量值可接受 Number 或 String。
+
+
+
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/badge/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+     document.querySelectorAll('wc-badge').forEach(item=>{
+      item.addEventListener('click',function(e){
+          this.value++
+       })
+     })
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space gap="xl">
+  <wc-badge type="primary" value="1" >
+   <wc-button>primary</wc-button>
+  </wc-badge>
+  <wc-badge type="info" value="2">
+     <wc-button type="info">info</wc-button>
+  </wc-badge>
+  <wc-badge type="success"  value="3" >
+  <wc-button type="info">success</wc-button>
+  </wc-badge>
+  
+</wc-space>
+<wc-space gap="xl">
+  <wc-badge type="help" value="4" > <wc-button type="help">help</wc-button></wc-badge>
+  <wc-badge type="secondary" value="4">  <wc-button type="secondary">secondary</wc-button> </wc-badge>
+  <wc-badge type="warning" value="6">
+  <wc-button type="warning">warning</wc-button>
+  </wc-badge>
+</wc-space>
+  </wc-lang>
+    <wc-lang slot="css">
+     wc-badge{
+      margin-right:15px;
+     }
+  </wc-lang>
+</wc-sandbox>
+
+
+
+
+
+
+
+### 最大值
+你还可以自定义最大值
+<br/>
+由 max 属性定义，接受 Number 值。 请注意，仅在值也是 Number 时起作用。
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/badge/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-badge  value="10" max="9" type="danger">
+  <wc-button type="help">info</wc-button>
+  </wc-badge>
+  <wc-badge type='danger' value="100" max="99"> <wc-button type="help">info</wc-button></wc-badge>
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-badge{
+      margin-right:15px;
+    }
+  </wc-lang>
+</wc-sandbox>
+
+
+### 自定义显示内容
+当 value 是 `String` 时，可以显示自定义文字。
+<br/><br/>
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/badge/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-badge   value="new" type="danger"><wc-button type="help">comments</wc-button>
+</wc-badge>
+  <wc-badge  value="hot"  type="danger"> <wc-button type="help">replies</wc-button>
+</wc-badge>
+</wc-space>
+<wc-space>
+    
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-badge{ 
+      margin-right:20px;
+     }
+  </wc-lang>
+</wc-sandbox>
+
+### 小红点
+通过一个小红点标记来告知用户有新内容。
+<br/>
+使用 `is-dot` 属性。 是个布尔值。
+<wc-sandbox>
+  <wc-lang slot="javascript">
+import '//jscdn.ink/@bd/ui/latest/space/index.js'
+import '//jscdn.ink/@bd/ui/latest/badge/index.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+  </wc-lang>
+  <wc-lang slot="html">
+<wc-space>
+  <wc-badge is-dot type="danger">query</wc-badge>
+  <wc-badge is-dot type="danger"><wc-button type="info" >visits</wc-button></wc-badge>
+
+</wc-space>
+  </wc-lang>
+  <wc-lang slot="css">
+    wc-badge{  margin-right:20px; }
+  </wc-lang>
+</wc-sandbox>
+
+
+
+
+
+
+### 完整APIs
+
+|  属性  |  值类型  |   默认值   |     描述   |
+|  :-:  |   :-:   |   :-:   |     -   |
+|  value |  String |  无    | 标记绑定值	 |
+|  type  |  String  |   无   |   标记类型, 仅能决定标记的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger`   |
+| max    |  Number |   无   |  最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。  |
+|  hidden | Boolean  |  false | 为`true`时隐藏标记 |
+|  is-dot | Boolean  |  false | 是否开启小圆点模式 |
+