## 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 | 是否开启小圆点模式 |