add page file
赵丽
parent
a5dc3f553c
commit
7b78d326d6
|
|
@ -1,5 +1,6 @@
|
|||
## API
|
||||
|
||||
|
||||
```vue
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<cn>
|
||||
#### 基本
|
||||
最简单的用法
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic usage
|
||||
The simplest use
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem><a href="">Application Center</a></BreadcrumbItem>
|
||||
<BreadcrumbItem><a href="">Application List</a></BreadcrumbItem>
|
||||
<BreadcrumbItem>An Application</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Icon, Breadcrumb } from 'antd/index'
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem: Breadcrumb.Item,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -1,21 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<Basic />
|
||||
<br>
|
||||
<withIcon />
|
||||
<br>
|
||||
<separator />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import withIcon from './withIcon'
|
||||
import separator from './separator'
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
withIcon,
|
||||
separator,
|
||||
},
|
||||
}
|
||||
import Basic from './basic.md'
|
||||
import WithIcon from './withIcon.md'
|
||||
import Separator from './separator.md'
|
||||
|
||||
import US from './../index.en-US.md'
|
||||
import CN from './../index.zh-CN.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Breadcrumb面包屑
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
## 何时使用
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
## 代码演示
|
||||
`,
|
||||
us: `# Breadcrumb
|
||||
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
|
||||
## When to use
|
||||
- When the system has more than two layers in a hierarchy.
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
- When the application has multi-layer architecture.
|
||||
## examples
|
||||
`,
|
||||
}
|
||||
|
||||
export default {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<Basic />
|
||||
<WithIcon />
|
||||
<Separator />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US />
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<cn>
|
||||
#### 分隔符
|
||||
使用` separator=">" `可以自定义分隔符
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Configuring the Separator
|
||||
The separator can be customized by setting the separator preperty: separator=">"
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Breadcrumb separator=">">
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem href="">Application Center</BreadcrumbItem>
|
||||
<BreadcrumbItem href="">Application List</BreadcrumbItem>
|
||||
<BreadcrumbItem>An Application</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Icon, Breadcrumb } from 'antd/index'
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem: Breadcrumb.Item,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<cn>
|
||||
#### 带有图标的
|
||||
图标放在文字前面
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### With an Icon
|
||||
The icon should be placed in front of the text
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="">
|
||||
<Icon type="home" />
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem href="">
|
||||
<Icon type="user" />
|
||||
<span>Application List</span>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem>
|
||||
Application
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Icon, Breadcrumb } from 'antd/index'
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem: Breadcrumb.Item,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
## API
|
||||
|
||||
| Property | Description | Type | Optional | Default |
|
||||
| -------- | ----------- | ---- | -------- | ------- |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
|
||||
| params | Routing parameters | object | | - |
|
||||
| routes | The routing stack information of router | object\[] | | - |
|
||||
| separator | Custom separator | string\|ReactNode | | `/` |
|
||||
|
||||
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
|
||||
|
||||
### Use with browserHistory
|
||||
|
||||
The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link.
|
||||
|
||||
```vue
|
||||
import { Link } from 'react-router';
|
||||
|
||||
const routes = [{
|
||||
path: 'index',
|
||||
breadcrumbName: 'home'
|
||||
}, {
|
||||
path: 'first',
|
||||
breadcrumbName: 'first'
|
||||
}, {
|
||||
path: 'second',
|
||||
breadcrumbName: 'second'
|
||||
}];
|
||||
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} />;
|
||||
```
|
||||
|
|
@ -1,18 +1,3 @@
|
|||
---
|
||||
category: Components
|
||||
subtitle: 面包屑
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
@ -26,7 +11,7 @@ title: Breadcrumb
|
|||
|
||||
### 和 browserHistory 配合
|
||||
|
||||
和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。
|
||||
|
||||
```vue
|
||||
import { Link } from 'react-router';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<cn>
|
||||
#### 典型卡片
|
||||
包含标题、内容、操作区域。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic card
|
||||
A basic card containing a title, content and an extra corner content.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-card title="Card Title">
|
||||
<a href="#" slot="extra">more</a>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<cn>
|
||||
#### 栅格卡片
|
||||
在系统概览页面常常和栅格进行配合。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Card in column
|
||||
Cards usually cooperate with grid column layout in overview page.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div style="background-color: #ececec; padding: 20px;">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered=false>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered=false>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-card title="Card title" :bordered=false>
|
||||
<p>card content</p>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<cn>
|
||||
#### 简洁卡片
|
||||
只包含内容区域
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Simple card
|
||||
A simple card only containing a content area.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-card style="width:300px">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
[>_<]:
|
||||
这个卡片没起作用还报错！一堆的那种！！！
|
||||
|
||||
<cn>
|
||||
#### 网格型内嵌卡片
|
||||
一种常见的卡片内容区隔模式。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Grid card
|
||||
Grid style card content.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Card title="Card Title">
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
<CardGrid style="width:25%;textAlign:'center'">Content</CardGrid>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Card } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Card,
|
||||
CardGrid: Card.Grid,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -1,46 +1,53 @@
|
|||
<template>
|
||||
<div>
|
||||
<Basic />
|
||||
<br>
|
||||
<NoBorder />
|
||||
<br>
|
||||
<Concise />
|
||||
<br>
|
||||
<ColRowCard />
|
||||
<br>
|
||||
<Loading />
|
||||
<br>
|
||||
<Grid />
|
||||
<br>
|
||||
<Inline />
|
||||
<br>
|
||||
<TabsCard />
|
||||
<br>
|
||||
<MoreConfigs />
|
||||
<br>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import NoBorder from './noBorder'
|
||||
import Concise from './concise'
|
||||
import ColRowCard from './colRowCard'
|
||||
import Loading from './loading'
|
||||
import Grid from './grid'
|
||||
import Inline from './inline'
|
||||
import TabsCard from './tabsCard'
|
||||
import MoreConfigs from './moreConfigs'
|
||||
import Basic from './basic.md'
|
||||
import NoBorder from './noBorder.md'
|
||||
import Concise from './concise.md'
|
||||
import ColRowCard from './colRowCard.md'
|
||||
import Loading from './loading.md'
|
||||
import Grid from './grid.md'
|
||||
import Inline from './inline.md'
|
||||
import TabsCard from './tabsCard.md'
|
||||
import MoreConfigs from './moreConfigs.md'
|
||||
|
||||
import CN from './../index.zh-CN.md'
|
||||
import US from './../index.en-US.md'
|
||||
|
||||
import '../style'
|
||||
|
||||
const md = {
|
||||
cn: `# Card 卡片
|
||||
通用卡片容器
|
||||
## 何时使用
|
||||
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||||
## 代码演示
|
||||
`,
|
||||
us: `# Card
|
||||
Simple rectangular container.
|
||||
##When To Use
|
||||
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
|
||||
##Examples
|
||||
`
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
NoBorder,
|
||||
Concise,
|
||||
ColRowCard,
|
||||
Loading,
|
||||
Grid,
|
||||
Inline,
|
||||
TabsCard,
|
||||
MoreConfigs,
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<Basic />
|
||||
<NoBorder />
|
||||
<Concise />
|
||||
<ColRowCard />
|
||||
<Loading />
|
||||
<Grid />
|
||||
<Inline />
|
||||
<TabsCard />
|
||||
<MoreConfigs />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US />
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<cn>
|
||||
#### 内部卡片
|
||||
可以放在普通卡片内部，展示多层级结构的信息
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Inner card
|
||||
It can be placed inside the ordinary card to display the information of the multilevel structure
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-card title="Card title">
|
||||
<p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
|
||||
>Group title</p>
|
||||
<a-card title="Inner card title">
|
||||
<a href="#" slot="extra">More</a>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
<a-card title="Inner card title">
|
||||
<a href="#" slot="extra">More</a>
|
||||
Inner Card content
|
||||
</a-card>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<cn>
|
||||
#### 预加载的卡片
|
||||
数据读入前会有文本块样式
|
||||
</cn>
|
||||
<us>
|
||||
#### Loading card
|
||||
Shows a loading indirector while the contents of the card is being featched
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-card loading title="Card title" style="width: 34%;">
|
||||
whatever content
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<cn>
|
||||
#### 更灵活的内容展示
|
||||
可以利用 `Card.Meta` 支持更灵活的内容
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Customized content
|
||||
You can use `Card.Meta` to support more flexible content.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<Card
|
||||
hoverable
|
||||
style="width: 300px"
|
||||
>
|
||||
<img
|
||||
alt="example"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
|
||||
slot="cover"
|
||||
/>
|
||||
<ul class="ant-card-actions" slot="actions">
|
||||
<li style="width: 33.3333%;"><Icon type="setting" /></li>
|
||||
<li style="width: 33.3333%;"><Icon type="edit" /></li>
|
||||
<li style="width: 33.3333%;"> <Icon type="ellipsis" /></li>
|
||||
</ul>
|
||||
<Meta
|
||||
title="Card title"
|
||||
description="This is the description">
|
||||
<Avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||
</Meta>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Card, Icon, Avatar } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Card,
|
||||
Icon,
|
||||
Avatar,
|
||||
Meta: Card.Meta,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<cn>
|
||||
#### 无边框
|
||||
在灰色背景上使用无边框的卡片
|
||||
</cn>
|
||||
<us>
|
||||
#### No border
|
||||
A borderless card on a gray background.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div style="background:#ECECEC; padding:30px">
|
||||
<Card title="Card title" :bordered="false" style="width: 300px">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Card } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<cn>
|
||||
#### 带页签的卡片
|
||||
可承载更多内容
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### With tabs
|
||||
More content can be hosted
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<Card
|
||||
style="width:100%"
|
||||
title="Card title"
|
||||
:tabList="tabList"
|
||||
@tabChange="key => onTabChange(key, 'key')"
|
||||
>
|
||||
<a href="#" slot="extra">More</a>
|
||||
{{contentList[key]}}
|
||||
</Card>
|
||||
<br /><br />
|
||||
<Card
|
||||
style="width:100%"
|
||||
:tabList="tabListNoTitle"
|
||||
@tabChange="key => onTabChange(key, 'noTitleKey')"
|
||||
>
|
||||
<div v-html="contentListNoTitle[noTitleKey]"></div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '../style'
|
||||
import { Card } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
tabList: [{
|
||||
key: 'tab1',
|
||||
tab: 'tab1',
|
||||
}, {
|
||||
key: 'tab2',
|
||||
tab: 'tab2',
|
||||
}],
|
||||
contentList: {
|
||||
tab1: 'content1',
|
||||
tab2: 'content2',
|
||||
},
|
||||
tabListNoTitle: [{
|
||||
key: 'article',
|
||||
tab: 'article',
|
||||
}, {
|
||||
key: 'app',
|
||||
tab: 'app',
|
||||
}, {
|
||||
key: 'project',
|
||||
tab: 'project',
|
||||
}],
|
||||
contentListNoTitle: {
|
||||
article: '<p>article content</p>',
|
||||
app: '<p>app content</p>',
|
||||
project: '<p>project content</p>',
|
||||
},
|
||||
key: 'tab1',
|
||||
noTitleKey: 'article',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTabChange (key, type) {
|
||||
console.log(key, type)
|
||||
this[type] = key
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
[^_^]:
|
||||
this is a ReactVersion for card. waiting to be transformed
|
||||
|
||||
## API
|
||||
|
||||
### Card
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
|
||||
| bodyStyle | Inline style to apply to the card content | object | - |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | `true` |
|
||||
| cover | Card cover | ReactNode | - |
|
||||
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
|
||||
| hoverable | Lift up when hovering card | boolean | false |
|
||||
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
|
||||
| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - |
|
||||
| title | Card title | string\|ReactNode | - |
|
||||
| type | Card style type, can be set to `inner` or not set | string | - |
|
||||
| onTabChange | Callback when tab is switched | (key) => void | - |
|
||||
|
||||
### Card.Grid
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| className | className of container | string | - |
|
||||
| style | style object of container | object | - |
|
||||
|
||||
### Card.Meta
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| avatar | avatar or icon | ReactNode | - |
|
||||
| className | className of container | string | - |
|
||||
| description | description content | ReactNode | - |
|
||||
| style | style object of container | object | - |
|
||||
| title | title content | ReactNode | - |
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
[^_^]:
|
||||
this is a ReactVersion for card. waiting to be transformed
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Card
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | 卡片操作组，位置在卡片底部 | Array<template> | - |
|
||||
| bodyStyle | 内容区域自定义样式 | object | - |
|
||||
| bordered | 是否有边框 | boolean | true |
|
||||
| cover | 卡片封面 | ReactNode | - |
|
||||
| extra | 卡片右上角的操作区域 | string\|template | - |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | false |
|
||||
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
|
||||
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
|
||||
| title | 卡片标题 | string\|ReactNode | - |
|
||||
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
|
||||
| onTabChange | 页签切换的回调 | (key) => void | - |
|
||||
|
||||
### Card.Grid
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| className | 网格容器类名 | string | - |
|
||||
| style | 定义网格容器类名的样式 | object | - |
|
||||
|
||||
### Card.Meta
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| avatar | 头像/图标 | ReactNode | - |
|
||||
| className | 容器类名 | string | - |
|
||||
| description | 描述内容 | ReactNode | - |
|
||||
| style | 定义容器类名的样式 | object | - |
|
||||
| title | 标题内容 | ReactNode | - |
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<cn>
|
||||
#### 基本用法
|
||||
简单的checkbox
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
Basic usage of checkbox
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-checkbox @change="onChange">Checkbox</a-checkbox>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox } from 'antd'
|
||||
export default {
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log(`checked = ${e.target.checked}`)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<cn>
|
||||
#### 全选
|
||||
在实现全选效果时，你可能会用到`indeterminate`属性
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Check all
|
||||
The `indeterminate` property can help you to achieve a 'check all' effect.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
|
||||
<a-checkbox
|
||||
:indeterminate="indeterminate"
|
||||
@change="onCheckAllChange"
|
||||
:checked="checkAll"
|
||||
>
|
||||
Check all
|
||||
</a-checkbox>
|
||||
</div>
|
||||
<br />
|
||||
<a-checkbox-group :options="plainOptions" v-model="checkedList" @change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox } from 'antd'
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
const defaultCheckedList = ['Apple', 'Orange']
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checkedList: defaultCheckedList,
|
||||
indeterminate: true,
|
||||
checkAll: false,
|
||||
plainOptions,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (checkedList) {
|
||||
this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
|
||||
this.checkAll = checkedList.length === plainOptions.length
|
||||
},
|
||||
onCheckAllChange (e) {
|
||||
Object.assign(this, {
|
||||
checkedList: e.target.checked ? plainOptions : [],
|
||||
indeterminate: false,
|
||||
checkAll: e.target.checked,
|
||||
})
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
CheckboxGroup: Checkbox.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<cn>
|
||||
#### 受控的checkbox
|
||||
联动checkbox
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Controlled Checkbox
|
||||
Communicated with other components
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<p :style="{ marginBottom: '20px' }">
|
||||
<a-checkbox
|
||||
:checked="checked"
|
||||
:disabled="disabled"
|
||||
@change="onChange"
|
||||
>
|
||||
{{label}}
|
||||
</a-checkbox>
|
||||
</p>
|
||||
<p>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="toggleChecked"
|
||||
>
|
||||
{{!checked ? 'Check' : 'Uncheck'}}
|
||||
</a-button>
|
||||
<a-button
|
||||
:style="{ marginLeft: '10px' }"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="toggleDisable"
|
||||
>
|
||||
{{!disabled ? 'Disable' : 'Enable'}}
|
||||
</a-button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox, Button } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
checked: true,
|
||||
disabled: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
label () {
|
||||
const { checked, disabled } = this
|
||||
return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleChecked () {
|
||||
this.checked = !this.checked
|
||||
},
|
||||
toggleDisable () {
|
||||
this.disabled = !this.disabled
|
||||
},
|
||||
onChange (e) {
|
||||
this.checked = e.target.checked
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<cn>
|
||||
#### 不可用
|
||||
checkbox 不可用
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Disabled
|
||||
Disabled checkbox
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-checkbox :defaultChecked="false" disabled />
|
||||
<br />
|
||||
<a-checkbox defaultChecked disabled />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<cn>
|
||||
#### Checkbox组
|
||||
方便的从数组生成checkbox
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Checkbox group
|
||||
Generate a group of checkboxes from an array
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<a-checkbox-group :options="plainOptions" v-model="value" @change="onChange" />
|
||||
<br />
|
||||
<a-checkbox-group :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
|
||||
<br />
|
||||
<a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
|
||||
<br />
|
||||
<a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox } from 'antd'
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
const options = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange' },
|
||||
]
|
||||
const optionsWithDisabled = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', disabled: false },
|
||||
]
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
plainOptions,
|
||||
options,
|
||||
optionsWithDisabled,
|
||||
value: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (checkedValues) {
|
||||
console.log('checked = ', checkedValues)
|
||||
console.log('value = ', this.value)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -1,35 +1,48 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Basic</h1>
|
||||
<Basic />
|
||||
<h1>CheckAll</h1>
|
||||
<CheckAll />
|
||||
<h1>Controller</h1>
|
||||
<Controller />
|
||||
<h1>Disabled</h1>
|
||||
<Disabled />
|
||||
<h1>Group</h1>
|
||||
<Group />
|
||||
<h1>Layout</h1>
|
||||
<Layout />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import CheckAll from './check-all'
|
||||
import Controller from './controller'
|
||||
import Disabled from './disabled'
|
||||
import Basic from './basic.md'
|
||||
import CheckAll from './check-all.md'
|
||||
import Controller from './controller.md'
|
||||
import Disabled from './disabled.md'
|
||||
import Group from './group.md'
|
||||
import Layout from './layout.md'
|
||||
|
||||
import Group from './group'
|
||||
import Layout from './layout'
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
CheckAll,
|
||||
Disabled,
|
||||
Controller,
|
||||
Group,
|
||||
Layout,
|
||||
},
|
||||
}
|
||||
import CN from './../index.zh-CN.md'
|
||||
import US from './../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# Checkbox多选框
|
||||
多选框
|
||||
## 何时使用
|
||||
- 在一组可选项中进行多项选择时；
|
||||
- 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
|
||||
## 代码演示
|
||||
`,
|
||||
us: `# Checkbox
|
||||
Checkbox
|
||||
## When to use
|
||||
- Used for selecting multiple values from several options.
|
||||
- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
|
||||
## Examples
|
||||
`
|
||||
}
|
||||
|
||||
export default {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<Basic />
|
||||
<CheckAll />
|
||||
<Disabled />
|
||||
<Controller />
|
||||
<Group />
|
||||
<Layout />
|
||||
<api>
|
||||
<CN slot='cn' />
|
||||
<US />
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<cn>
|
||||
#### 布局
|
||||
Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Use with grid
|
||||
We can use Checkbox and Grid Checkbox.group, to implement complex layout
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-checkbox-group @change="onChange">
|
||||
<AntRow>
|
||||
<AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
|
||||
<AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
|
||||
<AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
|
||||
<AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
|
||||
<AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
|
||||
</AntRow>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
<script>
|
||||
import { Checkbox, Row, Col } from 'antd'
|
||||
export default {
|
||||
methods: {
|
||||
onChange (checkedValues) {
|
||||
console.log('checked = ', checkedValues)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Checkbox,
|
||||
AntRow: Row,
|
||||
AntCol: Col,
|
||||
CheckboxGroup: Checkbox.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
## API
|
||||
|
||||
### Checkbox
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| checked | Specifies whether the checkbox is selected. | boolean | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
|
||||
| disabled | Disable checkbox | boolean | false |
|
||||
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| defaultValue | Default selected value | string\[] | \[] |
|
||||
| disabled | Disable all checkboxes | boolean | false |
|
||||
| options | Specifies options | string\[] | \[] |
|
||||
| value | Used for setting the currently selected value. | string\[] | \[] |
|
||||
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
|
||||
|
||||
## Methods
|
||||
|
||||
### Checkbox
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
## API
|
||||
|
||||
### Checkbox
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| checked | 指定当前是否选中 | boolean | false |
|
||||
| defaultChecked | 初始是否选中 | boolean | false |
|
||||
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
|
||||
| onChange | 变化时回调函数 | Function(e:Event) | - |
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
||||
| options | 指定可选项 | string\[] | \[] |
|
||||
| value | 指定选中的选项 | string\[] | \[] |
|
||||
| onChange | 变化时回调函数 | Function(checkedValue) | - |
|
||||
|
||||
## 方法
|
||||
|
||||
### Checkbox
|
||||
|
||||
| 名称 | 描述 |
|
||||
| --- | --- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
Loading…
Reference in New Issue