mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
add page file
This commit is contained in:
赵丽
parent
d736aec108
commit
ff47347cf1
@ -1,5 +1,6 @@
|
||||
## API
|
||||
|
||||
|
||||
```vue
|
||||
<a-badge count=5>
|
||||
<a href="#" class="head-example" />
|
||||
|
||||
33
components/breadcrumb/demo/basic.md
Normal file
33
components/breadcrumb/demo/basic.md
Normal file
@ -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>
|
||||
|
||||
33
components/breadcrumb/demo/separator.md
Normal file
33
components/breadcrumb/demo/separator.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
39
components/breadcrumb/demo/withIcon.md
Normal file
39
components/breadcrumb/demo/withIcon.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
35
components/breadcrumb/index.en-US.md
Normal file
35
components/breadcrumb/index.en-US.md
Normal file
@ -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';
|
||||
|
||||
20
components/card/demo/basic.md
Normal file
20
components/card/demo/basic.md
Normal file
@ -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>
|
||||
```
|
||||
33
components/card/demo/colRowCard.md
Normal file
33
components/card/demo/colRowCard.md
Normal file
@ -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>
|
||||
```
|
||||
19
components/card/demo/concise.md
Normal file
19
components/card/demo/concise.md
Normal file
@ -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>
|
||||
```
|
||||
37
components/card/demo/grid.md
Normal file
37
components/card/demo/grid.md
Normal file
@ -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>
|
||||
|
||||
27
components/card/demo/inline.md
Normal file
27
components/card/demo/inline.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
18
components/card/demo/loading.md
Normal file
18
components/card/demo/loading.md
Normal file
@ -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>
|
||||
```
|
||||
|
||||
|
||||
47
components/card/demo/moreConfigs.md
Normal file
47
components/card/demo/moreConfigs.md
Normal file
@ -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>
|
||||
```
|
||||
30
components/card/demo/noBorder.md
Normal file
30
components/card/demo/noBorder.md
Normal file
@ -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>
|
||||
```
|
||||
83
components/card/demo/tabsCard.md
Normal file
83
components/card/demo/tabsCard.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
37
components/card/index.en-US.md
Normal file
37
components/card/index.en-US.md
Normal file
@ -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 | - |
|
||||
38
components/card/index.zh-CN.md
Normal file
38
components/card/index.zh-CN.md
Normal file
@ -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 | - |
|
||||
30
components/checkbox/demo/basic.md
Normal file
30
components/checkbox/demo/basic.md
Normal file
@ -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>
|
||||
```
|
||||
60
components/checkbox/demo/check-all.md
Normal file
60
components/checkbox/demo/check-all.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
74
components/checkbox/demo/controller.md
Normal file
74
components/checkbox/demo/controller.md
Normal file
@ -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>
|
||||
```
|
||||
27
components/checkbox/demo/disabled.md
Normal file
27
components/checkbox/demo/disabled.md
Normal file
@ -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>
|
||||
```
|
||||
56
components/checkbox/demo/group.md
Normal file
56
components/checkbox/demo/group.md
Normal file
@ -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>
|
||||
|
||||
39
components/checkbox/demo/layout.md
Normal file
39
components/checkbox/demo/layout.md
Normal file
@ -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>
|
||||
```
|
||||
30
components/checkbox/index.en-US.md
Normal file
30
components/checkbox/index.en-US.md
Normal file
@ -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 |
|
||||
29
components/checkbox/index.zh-CN.md
Normal file
29
components/checkbox/index.zh-CN.md
Normal file
@ -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
Block a user