ant-design-vue/components/badge/demo/index.vue

64 lines
1.6 KiB
Vue
Raw Normal View History

2017-11-16 10:29:02 +00:00
<script>
2018-02-07 10:44:11 +00:00
import Basic from './basic.md'
import NoWapper from './no-wrapper'
import Dot from './dot'
import Change from './change'
import Overflow from './overflow'
import Status from './status'
import CN from './../index.zh-CN.md'
import US from './../index.en_US.md'
const md = {
cn: `# Badge徽标数
图标右上角的圆形徽标数字
## 何时使用
一般出现在通知图标或头像的右上角用于显示需要处理的消息条数通过醒目视觉形式吸引用户处理
## 代码演示
`,
us: `# Badge
Small numerical value or status descriptor for UI elements.
2018-03-09 09:50:33 +00:00
## When To Use
2018-02-07 10:44:11 +00:00
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
2018-03-09 09:50:33 +00:00
## Examples
`,
2018-02-07 10:44:11 +00:00
}
export default {
2018-03-20 13:48:01 +00:00
category: 'Components',
subtitle: '徽标数',
type: 'Data Display',
title: 'Badge',
2018-02-07 10:44:11 +00:00
render () {
return (
2018-03-09 09:50:33 +00:00
<div id='components-badge-demo'>
2018-02-07 10:44:11 +00:00
<md cn={md.cn} us={md.us} />
<Basic />
<NoWapper />
<Overflow />
<Dot />
<Status />
<Change />
<api>
<CN slot='cn' />
<US />
</api>
</div>
)
2017-11-16 10:29:02 +00:00
},
2018-02-07 10:44:11 +00:00
}
2017-11-16 10:29:02 +00:00
</script>
2018-02-07 10:44:11 +00:00
<style>
2018-03-09 09:50:33 +00:00
#components-badge-demo .ant-badge:not(.ant-badge-status) {
margin-right: 20px;
}
#components-badge-demo .head-example {
width: 42px;
height: 42px;
border-radius: 4px;
background: #eee;
display: inline-block;
}
2017-11-16 10:29:02 +00:00
</style>