page for badge
赵丽
parent
aa62123899
commit
d736aec108
|
|
@ -59,3 +59,6 @@ typings/
|
|||
.idea
|
||||
.DS_Store
|
||||
dist/
|
||||
|
||||
# 备份文件
|
||||
/components/test/*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import PropTypes from '../_util/vue-types'
|
||||
export default () => ({
|
||||
count: PropTypes.number,
|
||||
dot: PropTypes.bool,
|
||||
offset: PropTypes.arrayOf([PropTypes.number, PropTypes.number]),
|
||||
overflowCount: PropTypes.number.def('99'),
|
||||
showZero: PropTypes.bool.def('false'),
|
||||
status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
|
||||
text: PropTypes.string,
|
||||
})
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<cn>
|
||||
#### 基本
|
||||
简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### basic
|
||||
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-badge count=0 showZero>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<cn>
|
||||
#### 动态
|
||||
展示动态变化的效果。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Dynamic
|
||||
The count will be animated as it changes.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-badge :count="count">
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-button-group>
|
||||
<a-button @click="decline">
|
||||
<a-icon type="minus"></a-icon>
|
||||
</a-button>
|
||||
<a-button @click="increase">
|
||||
<a-icon type="plus"></a-icon>
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
<br />
|
||||
<a-badge :dot="isShow">
|
||||
<a href="#" class="head-example()"></a>
|
||||
</a-badge>
|
||||
<a-button @click="changeShow()">toggle</a-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
count: 3,
|
||||
isShow: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
decline () {
|
||||
let count = this.count - 1
|
||||
if (count < 0) {
|
||||
count = 0
|
||||
}
|
||||
this.count = count
|
||||
},
|
||||
increase () {
|
||||
const count = this.count+1
|
||||
this.count = count // 为什么不用this.count++?省事还简单？
|
||||
},
|
||||
changeShow () {
|
||||
this.isShow = !this.isShow
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<cn>
|
||||
#### 讨嫌的小红点
|
||||
没有具体的数字。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Red badge
|
||||
This will simply display a red badge, without a specific count.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-badge dot>
|
||||
<a-icon type="notification" />
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</a-badge>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -1,126 +1,51 @@
|
|||
<template>
|
||||
<div>
|
||||
基本：
|
||||
<div>
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge count=0 showZero>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<br>
|
||||
独立使用：
|
||||
<div>
|
||||
<a-badge count=25 />
|
||||
<a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
|
||||
<a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
|
||||
</div>
|
||||
<br>
|
||||
封顶数字：
|
||||
<div style="margin-top: 10px">
|
||||
<a-badge count=99>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge count=100>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge count=99 overflowCount=10>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-badge count=1000 overflowCount=999>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<br>
|
||||
讨嫌的小红点：
|
||||
<div style="margin-top: 10px">
|
||||
<a-badge dot>
|
||||
<a-icon type="notification" />
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</a-badge>
|
||||
</div>
|
||||
<br>
|
||||
状态点：
|
||||
<div>
|
||||
<a-badge status="success" />
|
||||
<a-badge status="error" />
|
||||
<a-badge status="default" />
|
||||
<a-badge status="processing" />
|
||||
<a-badge :status="currentStatus" />
|
||||
<a-button @click="changeStatus">改processing</a-button>
|
||||
<br />
|
||||
<a-badge status="success" text="Success" />
|
||||
<br />
|
||||
<a-badge status="error" text="Error" />
|
||||
<br />
|
||||
<a-badge status="default" text="Default" />
|
||||
<br />
|
||||
<a-badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<a-badge status="warning" text="Warning" />
|
||||
</div>
|
||||
<br />
|
||||
动态：
|
||||
<div>
|
||||
<a-badge :count="count">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-button @click="changeMinsValue()">
|
||||
<a-icon type="minus" />
|
||||
</a-button>
|
||||
<a-button @click="changePlusValue(1)">
|
||||
<a-icon type="plus" />
|
||||
</a-button>
|
||||
<br/>
|
||||
<a-badge :dot="isShow">
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
<a-button @click="changeShow()">toggle</a-button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
let i = 0
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currentStatus: 'warning',
|
||||
count: 3,
|
||||
isShow: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeStatus () {
|
||||
this.currentStatus = 'processing'
|
||||
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.
|
||||
##When To Use
|
||||
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
|
||||
##Examples
|
||||
`
|
||||
}
|
||||
|
||||
export default {
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<Basic />
|
||||
<NoWapper />
|
||||
<Overflow />
|
||||
<Dot />
|
||||
<Status />
|
||||
<Change />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US />
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
changeMinsValue () {
|
||||
i++
|
||||
console.dir(i)
|
||||
let count = this.count - 1
|
||||
if (count < 0) {
|
||||
count = 0
|
||||
}
|
||||
this.count = count
|
||||
},
|
||||
changePlusValue () {
|
||||
// setInterval(() => {
|
||||
// const count = this.count + 1
|
||||
// this.count = count
|
||||
// }, 300)
|
||||
const count = this.count + 1
|
||||
this.count = count
|
||||
},
|
||||
changeShow () {
|
||||
this.isShow = !this.isShow
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
<style>
|
||||
.head-example {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<cn>
|
||||
#### 可点击
|
||||
用 a 标签进行包裹即可。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Clickable
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-badge dot>
|
||||
<Icon type="notification"></Icon>
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a href="#" class="head-example">Link something</a>
|
||||
</a-badge>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<cn>
|
||||
#### 独立使用
|
||||
不包裹任何元素即是独立使用，可自定样式展现。
|
||||
在右上角的 badge 则限定为红色。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Standalone
|
||||
Used in standalone when children is empty.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-badge count=25 />
|
||||
<a-badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
|
||||
<a-badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<cn>
|
||||
#### 封顶数字
|
||||
超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Overflow Count
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-badge count=99>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-badge count=100>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-badge count=99 overflowCount=10>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
<a-badge count=1000 overflowCount=999>
|
||||
<a href="#" class="head-example"></a>
|
||||
</a-badge>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<cn>
|
||||
#### 状态点
|
||||
用于表示状态的小圆点。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Status
|
||||
Standalone badge with status.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-badge status="success" />
|
||||
<a-badge status="error" />
|
||||
<a-badge status="default" />
|
||||
<a-badge status="processing" />
|
||||
<a-badge status="warning" />
|
||||
<br />
|
||||
<a-badge status="success" text="Success" />
|
||||
<br />
|
||||
<a-badge status="error" text="Error" />
|
||||
<br />
|
||||
<a-badge status="default" text="Default" />
|
||||
<br />
|
||||
<a-badge status="processing" text="Processing" />
|
||||
<br />
|
||||
<a-badge status="warning" text="warning" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
## API
|
||||
|
||||
```vue
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
```
|
||||
|
||||
```vue
|
||||
<a-badge count=5 />
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| count | Number to show in badge | number\|ReactNode | |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
|
||||
| offset | set offset of the badge dot, like [x, y] | [number, number] | - |
|
||||
| overflowCount | Max count to show | number | 99 |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
## API
|
||||
|
||||
```vue
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example" />
|
||||
</a-badge>
|
||||
```
|
||||
|
||||
```vue
|
||||
<a-badge count=5 />
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number|ReactNode | |
|
||||
| dot | 不展示数字，只有一个小红点 | boolean | false |
|
||||
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number, number] | - |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 |
|
||||
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
|
||||
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
|
||||
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
|
||||
| params | 路由的参数 | object | | - |
|
||||
| routes | router 的路由栈信息 | object\[] | | - |
|
||||
| separator | 分隔符自定义 | string\|ReactNode | | '/' |
|
||||
|
||||
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。
|
||||
|
||||
### 和 browserHistory 配合
|
||||
|
||||
和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
|
||||
```vue
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const routes = [{
|
||||
path: 'index',
|
||||
breadcrumbName: '首页'
|
||||
}, {
|
||||
path: 'first',
|
||||
breadcrumbName: '一级面包屑'
|
||||
}, {
|
||||
path: 'second',
|
||||
breadcrumbName: '当前页面'
|
||||
}];
|
||||
function itemRender(route, params, routes, paths) {
|
||||
const last = routes.indexOf(route) === routes.length - 1;
|
||||
return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
|
||||
}
|
||||
|
||||
return <Breadcrumb itemRender={itemRender} routes={routes}/>;
|
||||
```
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
#### Ghost Button
|
||||
`ghost` property will make button's background transparent, it is common used in colored background.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
|
||||
|
|
|
|||
Loading…
Reference in New Issue