更新badge文档
parent
14da99d863
commit
b513baafa4
|
|
@ -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 | 是否开启小圆点模式 |
|
||||||
|
|
||||||
Loading…
Reference in New Issue