page for badge
赵丽
parent
aa62123899
commit
d736aec108
|
|
@ -59,3 +59,6 @@ typings/
|
||||||
.idea
|
.idea
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist/
|
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>
|
<script>
|
||||||
let i = 0
|
import Basic from './basic.md'
|
||||||
export default {
|
import NoWapper from './no-wrapper'
|
||||||
data () {
|
import Dot from './dot'
|
||||||
return {
|
import Change from './change'
|
||||||
currentStatus: 'warning',
|
import Overflow from './overflow'
|
||||||
count: 3,
|
import Status from './status'
|
||||||
isShow: true,
|
|
||||||
}
|
import CN from './../index.zh-CN.md'
|
||||||
},
|
import US from './../index.en_US.md'
|
||||||
methods: {
|
|
||||||
changeStatus () {
|
const md = {
|
||||||
this.currentStatus = 'processing'
|
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>
|
</script>
|
||||||
<style scoped>
|
|
||||||
|
<style>
|
||||||
.head-example {
|
.head-example {
|
||||||
width: 42px;
|
width: 42px;
|
||||||
height: 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 Button
|
||||||
`ghost` property will make button's background transparent, it is common used in colored background.
|
`ghost` property will make button's background transparent, it is common used in colored background.
|
||||||
</us>
|
</us>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
|
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue