github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Badge: add type attribute (#12991) 

* badge: add type attribute

* Update badge.md
pull/13003/head
hetech 2018-10-09 12:14:45 +08:00 committed by GitHub
parent ec0074bf8b
commit 261abd69fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/docs/en-US/badge.md
View File

@ -15,6 +15,12 @@ Displays the amount of new messages.
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">replies</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
@ -130,9 +136,10 @@ Use a red dot to mark content that needs to be noticed.
</style>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Attribute | Description | Type | Accepted Values | Default |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | display value | string, number | — | — |
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
| is-dot | if a little dot is displayed | boolean | — | false |
| hidden | hidden badge | boolean | — | false |
| value | display value | string, number | — | — |
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
| is-dot | if a little dot is displayed | boolean | — | false |
| hidden | hidden badge | boolean | — | false |
| type | button type | string | primary / success / warning / danger / info | — |

7
examples/docs/es/badge.md
View File

@ -15,6 +15,12 @@ Muestra la cantidad de mensajes nuevos.
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">replies</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
@ -136,3 +142,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — |
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
| hidden | hidden badge | boolean | — | false |
| type | tipo de botón | string | primary / success / warning / danger / info | — |

17
examples/docs/zh-CN/badge.md
View File

@ -20,6 +20,12 @@
<el-badge :value="3" class="item">
<el-button size="small">回复</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">评论</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">回复</el-button>
</el-badge>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
@ -133,8 +139,9 @@
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string, number | — | — |
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
| is-dot | 小圆点 | boolean | — | false |
| hidden | 隐藏 badge | boolean | — | false |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string, number | — | — |
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
| is-dot | 小圆点 | boolean | — | false |
| hidden | 隐藏 badge | boolean | — | false |
| type | 类型 | string | primary / success / warning / danger / info | — |

16
packages/badge/src/main.vue
View File

@ -6,7 +6,13 @@
v-show="!hidden && (content || content === 0 || isDot)"
v-text="content"
class="el-badge__content"
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
:class="[
'el-badge__content--' + type,
{
'is-fixed': $slots.default,
'is-dot': isDot
}
]">
</sup>
</transition>
</div>
@ -20,7 +26,13 @@ export default {
value: {},
max: Number,
isDot: Boolean,
hidden: Boolean
hidden: Boolean,
type: {
type: String,
validator(val) {
return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
}
}
},
computed: {

16
packages/theme-chalk/src/badge.scss
View File

@ -37,5 +37,21 @@
right: 0;
border-radius: 50%;
}
@each $type in (primary, success, warning, info, danger) {
@include m($type) {
@if $type == primary {
background-color: $--color-primary;
} @else if $type == success {
background-color: $--color-success;
} @else if $type == warning {
background-color: $--color-warning;
} @else if $type == info {
background-color: $--color-info;
} @else {
background-color: $--color-danger;
}
}
}
}
}