github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update demo

pull/165/head
tjz 2018-03-20 21:48:01 +08:00
parent f1587ace7e
commit c82dab3a47
71 changed files with 786 additions and 906 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/affix/demo/index.vue
View File

@ -16,9 +16,13 @@ const md = {
## When To Use
When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions.
Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
`,
## Examples `,
}
export default {
category: 'Components',
subtitle: '固钉',
type: 'Navigation',
title: 'Affix',
render () {
return (
<div>

1
components/alert/demo/index.vue
View File

@ -21,6 +21,7 @@ const md = {
## When To Use
- When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions.
## Examples
`,
}
export default {

6
components/auto-complete/demo/index.vue
View File

@ -18,9 +18,15 @@ const md = {
Autocomplete function of input field.
## When To Use
When there is a need for autocomplete functionality.
## Examples
`,
}
export default {
category: 'Components',
subtitle: '自动完成',
type: 'Data Entry',
cols: 2,
title: 'AutoComplete',
render () {
return (
<div>

5
components/avatar/demo/index.vue
View File

@ -12,9 +12,14 @@ const md = {
## 代码演示`,
us: `# Avatar
Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
## Examples
`,
}
export default {
category: 'Components',
subtitle: '头像',
type: 'Data Display',
title: 'Avatar',
render () {
return (
<div>

5
components/back-top/demo/index.vue
View File

@ -15,9 +15,14 @@ const md = {
## When To Use
- When the page content is very long.
- When you need to go back to the top very frequently in order to view the contents.
## Examples
`,
}
export default {
category: 'Components',
type: 'Other',
subtitle: '回到顶部',
title: 'BackTop',
render () {
return (
<div>

4
components/badge/demo/index.vue
View File

@ -25,6 +25,10 @@
}
export default {
category: 'Components',
subtitle: '徽标数',
type: 'Data Display',
title: 'Badge',
render () {
return (
<div id='components-badge-demo'>

2
components/breadcrumb/demo/index.vue
View File

@ -23,7 +23,7 @@
- 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
## Examples
`,
}

5
components/button/demo/index.vue
View File

@ -19,9 +19,14 @@ const md = {
To trigger an operation.
## When To Use
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
## Examples
`,
}
export default {
category: 'Components',
type: 'General',
title: 'Button',
subtitle: '按钮',
render () {
return (
<div>

4
components/calendar/demo/index.vue
View File

@ -21,7 +21,9 @@ Container for displaying data in calendar form.
## When To Use
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.`,
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
## Examples
`,
}
export default {
category: 'Components',

23
components/card/demo/basic.vue
View File

@ -1,23 +0,0 @@
<template>
<div>
<md>
## 基本
</md>
<Card title="Card title">
<a href="#" slot="extra">More</a>
<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>

20
components/card/demo/colRowCard.vue
View File

@ -1,20 +0,0 @@
<template>
<div>
<md>
## 栅格卡片
</md>
<div style="background: #ECECEC; padding: 30px">
<a-row :gutter="16">
<a-col :span="8">
<a-card title="Card title" :bordered="false">Card content</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered="false">Card content</a-card>
</a-col>
<a-col :span="8">
<a-card title="Card title" :bordered="false">Card content</a-card>
</a-col>
</a-row>
</div>
</div>
</template>

32
components/card/demo/concise.vue
View File

@ -1,32 +0,0 @@
<template>
<div>
<md>
## 简洁卡片
</md>
<Card
hoverable
style="width: 240px"
>
<img
alt="example"
src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
slot="cover"
/>
<Meta
title="Europe Street beat"
description="www.instagram.com"
/>
</Card>
</div>
</template>
<script>
import '../style'
import { Card } from 'antd'
export default {
components: {
Card,
Meta: Card.Meta,
},
}
</script>

27
components/card/demo/grid.vue
View File

@ -1,27 +0,0 @@
<template>
<div>
<md>
## 网格型内嵌卡片
</md>
<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>
</div>
</template>
<script>
import '../style'
import { Card } from 'antd'
export default {
components: {
Card,
CardGrid: Card.Grid,
},
}
</script>

29
components/card/demo/index.vue
View File

@ -1,13 +1,13 @@
<script>
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 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 CN from './../index.zh-CN.md'
import US from './../index.en-US.md'
@ -25,11 +25,16 @@ const md = {
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
`
## Examples
`,
}
export default {
render() {
category: 'Components',
type: 'Data Display',
title: 'Card',
subtitle: '卡片',
cols: 1,
render () {
return (
<div>
<md cn={md.cn} us={md.us} />

39
components/card/demo/inline.vue
View File

@ -1,39 +0,0 @@
<template>
<div>
<md>
## 内部卡片
</md>
<Card title="Card title">
<p
style="fontSize: 14px;color: 'rgba(0, 0, 0, 0.85)'; marginBottom: 16px;fontWeight: 500"
>
Group title
</p>
<Card
type="inner"
title="Inner Card title"
>
<a href="#" slot="extra">More</a>
Inner Card content
</Card>
<Card
style="margin-top: 16px"
type="inner"
title="Inner Card title"
>
<a href="#" slot="extra">More</a>
Inner Card content
</Card>
</Card>
</div>
</template>
<script>
import '../style'
import { Card } from 'antd'
export default {
components: {
Card,
},
}
</script>

20
components/card/demo/loading.vue
View File

@ -1,20 +0,0 @@
<template>
<div>
<md>
## 预加载卡片
</md>
<Card loading title="Card title" style="width: 34%">
Whatever content
</Card>
</div>
</template>
<script>
import '../style'
import { Card } from 'antd'
export default {
components: {
Card,
},
}
</script>

40
components/card/demo/moreConfigs.vue
View File

@ -1,40 +0,0 @@
<template>
<div>
<md>
## 支持更多内容配置
</md>
<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>
</div>
</template>
<script>
import '../style'
import { Card, Icon, Avatar } from 'antd'
export default {
components: {
Card,
Icon,
Avatar,
Meta: Card.Meta,
},
}
</script>

24
components/card/demo/noBorder.vue
View File

@ -1,24 +0,0 @@
<template>
<div>
<md>
## 无边框
</md>
<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>
</div>
</template>
<script>
import '../style'
import { Card } from 'antd'
export default {
components: {
Card,
},
}
</script>

74
components/card/demo/tabsCard.vue
View File

@ -1,74 +0,0 @@
<template>
<div>
<md>
## 带页签的卡片
</md>
<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>
</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>

5
components/cascader/demo/index.vue
View File

@ -26,9 +26,14 @@ const md = {
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- Chooses cascade items in one float layer for better user experience.
## Examples
`,
}
export default {
category: 'Components',
type: 'Data Entry',
title: 'Cascader',
subtitle: '级联选择',
render () {
return (
<div id='components-cascader-demo'>

4
components/checkbox/demo/index.vue
View File

@ -26,6 +26,10 @@
}
export default {
category: 'Components',
subtitle: '多选框',
type: 'Data Entry',
title: 'Checkbox',
render () {
return (
<div>

9
components/collapse/demo/index.vue
View File

@ -22,9 +22,16 @@ const md = {
us: `# When To Use
- Can be used to group or hide complex regions to keep the page clean.
- 'Accordion' is a special kind of 'Collapse', which allows only one panel to be expanded at a time.`,
- 'Accordion' is a special kind of 'Collapse', which allows only one panel to be expanded at a time.
## Examples
`,
}
export default {
category: 'Components',
type: 'Data Display',
title: 'Collapse',
subtitle: '折叠面板',
cols: 1,
render () {
return (
<div>

8
components/divider/demo/index.vue
View File

@ -15,9 +15,15 @@ const md = {
A divider line separates different content.
## When To Use
- Divide sections of article.
- Divide inline text and links such as the operation column of table.`,
- Divide inline text and links such as the operation column of table.
## Examples
`,
}
export default {
category: 'Components',
type: 'Other',
title: 'Divider',
subtitle: '分割线',
render () {
return (
<div>

8
components/dropdown/demo/index.vue
View File

@ -19,9 +19,15 @@ const md = {
us: `# Dropdown
A dropdown list.
## When To Use
If there are too many operations to display, you can wrap them in a \`Dropdown\`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.`,
If there are too many operations to display, you can wrap them in a \`Dropdown\`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
## Examples
`,
}
export default {
category: 'Components',
subtitle: '下拉菜单',
type: 'Navigation',
title: 'Dropdown',
render () {
return (
<div>

1
components/grid/demo/index.vue
View File

@ -53,6 +53,7 @@ Following is a brief look at how it works:
## Flex layout
Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \`order\`.
Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
## Examples
`,
}
export default {

6
components/index.js
View File

@ -95,11 +95,7 @@ export { default as Modal } from './modal'
export { default as Alert } from './alert'
export { default as TimePicker } from './time-picker'
const api = {
notification,
message,
}
export { api, notification, message }
export { notification, message }
import Steps from './steps'
const { Step } = Steps

3
components/input/demo/index.vue
View File

@ -22,7 +22,8 @@ const md = {
Keyboard and mouse can be used for providing or changing data.
## When To Use
- A user input in a form field is needed.
- A search input is required. `,
- A search input is required.
## Examples `,
}
export default {
category: 'Components',

50
components/menu/demo/horizontal.md Normal file
View File

@ -0,0 +1,50 @@
<cn>
#### 顶部导航
水平的顶部导航菜单。
</cn>
<us>
#### Top Navigation
Horizontal top navigation menu.
</us>
```html
<template>
<div>
<a-menu
v-model="current"
mode="horizontal"
>
<a-menu-item key="mail">
<a-icon type="mail" />Navigation One
</a-menu-item>
<a-menu-item key="app" disabled>
<a-icon type="appstore" />Navigation Two
</a-menu-item>
<a-sub-menu>
<span slot="title"><a-icon type="setting" />Navigation Three - Submenu</span>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</a-menu-item>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
current: ['mail'],
}
},
}
</script>
```

54
components/menu/demo/horizontal.vue
View File

@ -1,54 +0,0 @@
<template>
<div>
<md>
## 顶部导航
水平的顶部导航菜单。
</md>
<Menu
v-model="current"
mode="horizontal"
>
<MenuItem key="mail">
<Icon type="mail" />Navigation One
</MenuItem>
<MenuItem key="app" disabled>
<Icon type="appstore" />Navigation Two
</MenuItem>
<SubMenu>
<span slot="title"><Icon type="setting" />Navigation Three - Submenu</span>
<MenuItemGroup title="Item 1">
<MenuItem key="setting:1">Option 1</MenuItem>
<MenuItem key="setting:2">Option 2</MenuItem>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<MenuItem key="setting:3">Option 3</MenuItem>
<MenuItem key="setting:4">Option 4</MenuItem>
</MenuItemGroup>
</SubMenu>
<MenuItem key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</MenuItem>
</Menu>
</div>
</template>
<script>
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
current: ['mail'],
}
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

56
components/menu/demo/index.vue
View File

@ -1,13 +1,3 @@
<template>
<div>
<Horizontal />
<InlineCollapsed />
<SiderCurrent />
<SwitchMode />
<Theme />
<Vertical />
</div>
</template>
<script>
import Horizontal from './horizontal'
import InlineCollapsed from './inline-collapsed'
@ -15,14 +5,46 @@ import SiderCurrent from './sider-current'
import SwitchMode from './switch-mode'
import Theme from './theme'
import Vertical from './vertical'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Menu 导航菜单
为页面和功能提供导航的菜单列表。
## 何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
## 代码演示`,
us: `# Menu
Menu list of Navigation.
## When To Use
Navigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.
## Examples`,
}
export default {
components: {
Horizontal,
InlineCollapsed,
SiderCurrent,
SwitchMode,
Theme,
Vertical,
category: 'Components',
cols: 1,
type: 'Navigation',
title: 'Menu',
subtitle: '导航菜单',
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Horizontal />
<InlineCollapsed />
<SiderCurrent />
<SwitchMode />
<Theme />
<Vertical />
<api>
<CN slot='cn' />
<US/>
</api>
</div>
)
},
}
</script>
<style>
</style>

70
components/menu/demo/inline-collapsed.md Normal file
View File

@ -0,0 +1,70 @@
<cn>
#### 缩起内嵌菜单
内嵌菜单可以被缩起/展开。
</cn>
<us>
#### Collapsed inline menu
Inline menu could be collapsed.
</us>
```html
<template>
<div style="width: 256px">
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
</a-button>
<a-menu
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
mode="inline"
theme="dark"
:inlineCollapsed="collapsed"
>
<a-menu-item key="1">
<a-icon type="pie-chart" />
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="desktop" />
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="inbox" />
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
collapsed: false,
}
},
methods: {
toggleCollapsed () {
this.collapsed = !this.collapsed
},
},
}
</script>
```

77
components/menu/demo/inline-collapsed.vue
View File

@ -1,77 +0,0 @@
<template>
<div>
<md>
## 缩起内嵌菜单
内嵌菜单可以被缩起/展开。
你可以在 [Layout](/components/layout/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
</md>
<div style="width: 256px">
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<Icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
</a-button>
<Menu
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
mode="inline"
theme="dark"
:inlineCollapsed="collapsed"
>
<MenuItem key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</MenuItem>
<MenuItem key="2">
<Icon type="desktop" />
<span>Option 2</span>
</MenuItem>
<MenuItem key="3">
<Icon type="inbox" />
<span>Option 3</span>
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
<SubMenu key="sub3" title="Submenu">
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</SubMenu>
</Menu>
</div>
</div>
</template>
<script>
import { Menu, Icon, Button } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
collapsed: false,
}
},
methods: {
toggleCollapsed () {
this.collapsed = !this.collapsed
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

76
components/menu/demo/inline.md Normal file
View File

@ -0,0 +1,76 @@
<cn>
#### 内嵌菜单
垂直菜单，子菜单内嵌在菜单区域。
</cn>
<us>
#### Inline menu
Vertical menu with inline submenus.
</us>
```html
<template>
<div>
<a-menu
@click="handleClick"
style="width: 256px"
:defaultSelectedKeys="['1']"
:openKeys.sync="openKeys"
mode="inline"
>
<a-sub-menu key="sub1" @titleClick="titleClick">
<span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
<a-menu-item-group key="g1">
<template slot="title"><a-icon type="qq" /><span>Item 1</span></template>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group key="g2" title="Item 2">
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-sub-menu key="sub2" @titleClick="titleClick">
<span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
current: ['mail'],
openKeys: ['sub1'],
}
},
methods: {
handleClick (e) {
console.log('click', e)
},
titleClick (e) {
console.log('titleClick', e)
},
},
watch: {
openKeys (val) {
console.log('openKeys', val)
},
},
}
</script>
```

79
components/menu/demo/inline.vue
View File

@ -1,79 +0,0 @@
<template>
<div>
<md>
## 内嵌菜单
垂直菜单，子菜单内嵌在菜单区域。
</md>
<Menu
@click="handleClick"
style="width: 256px"
:defaultSelectedKeys="['1']"
:openKeys.sync="openKeys"
mode="inline"
>
<SubMenu key="sub1" @titleClick="titleClick">
<span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
<MenuItemGroup key="g1">
<template slot="title"><Icon type="qq" /><span>Item 1</span></template>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
</MenuItemGroup>
<MenuItemGroup key="g2" title="Item 2">
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" @titleClick="titleClick">
<span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
<SubMenu key="sub3" title="Submenu">
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4">
<span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
current: ['mail'],
openKeys: ['sub1'],
}
},
methods: {
handleClick (e) {
console.log('click', e)
},
titleClick (e) {
console.log('titleClick', e)
},
},
watch: {
openKeys (val) {
console.log('openKeys', val)
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

67
components/menu/demo/sider-current.md Normal file
View File

@ -0,0 +1,67 @@
<cn>
#### 只展开当前父级菜单
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
</cn>
<us>
#### Open current submenu only
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
</us>
```html
<template>
<div>
<a-menu
mode="inline"
:openKeys="openKeys"
@openChange="onOpenChange"
style="width: 256px"
>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
<a-menu-item key="1">Option 1</a-menu-item>
<a-menu-item key="2">Option 2</a-menu-item>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub4">
<span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
openKeys: ['sub1'],
}
},
methods: {
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys
} else {
this.openKeys = latestOpenKey ? [latestOpenKey] : []
}
},
},
}
</script>
```

70
components/menu/demo/sider-current.vue
View File

@ -1,70 +0,0 @@
<template>
<div>
<md>
## 只展开当前父级菜单
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
</md>
<Menu
mode="inline"
:openKeys="openKeys"
@openChange="onOpenChange"
style="width: 256px"
>
<SubMenu key="sub1">
<span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
<SubMenu key="sub3" title="Submenu">
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4">
<span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
openKeys: ['sub1'],
}
},
methods: {
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys
} else {
this.openKeys = latestOpenKey ? [latestOpenKey] : []
}
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

72
components/menu/demo/switch-mode.md Normal file
View File

@ -0,0 +1,72 @@
<cn>
#### 切换菜单类型
展示动态切换模式。
</cn>
<us>
#### Switch the menu type
Show the dynamic switching mode (between 'inline' and 'vertical').
</us>
```html
<template>
<div>
<a-checkbox @change="changeMode" /> Change Mode
<span className="ant-divider" style="margin: 0 1em"/>
<a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<a-menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
:mode="mode"
:theme="theme"
>
<a-menu-item key="1">
<a-icon type="mail" />
Navigation One
</a-menu-item>
<a-menu-item key="2">
<a-icon type="calendar" />
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
mode: 'inline',
theme: 'light',
}
},
methods: {
changeMode ({ target }) {
this.mode = target.checked ? 'vertical' : 'inline'
},
changeTheme ({ target }) {
this.theme = target.checked ? 'dark' : 'light'
},
},
}
</script>
```

76
components/menu/demo/switch-mode.vue
View File

@ -1,76 +0,0 @@
<template>
<div>
<md>
## 切换菜单类型
展示动态切换模式。
</md>
<a-checkbox @change="changeMode" /> Change Mode
<span className="ant-divider" style="margin: 0 1em"/>
<a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
:mode="mode"
:theme="theme"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
mode: 'inline',
theme: 'light',
}
},
methods: {
changeMode ({ target }) {
this.mode = target.checked ? 'vertical' : 'inline'
},
changeTheme ({ target }) {
this.theme = target.checked ? 'dark' : 'light'
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

77
components/menu/demo/theme.md Normal file
View File

@ -0,0 +1,77 @@
<cn>
#### 主题
内建了两套主题 `light|dark`，默认 `light`。
</cn>
<us>
#### Menu Themes
There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
</us>
```html
<template>
<div>
<md>
## 主题
内建了两套主题 `light|dark`，默认 `light`。
</md>
<a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<a-menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
mode="inline"
:theme="theme"
:selectedKeys="[current]"
@click="handleClick"
>
<a-menu-item key="1">
<a-icon type="mail" />
Navigation One
</a-menu-item>
<a-menu-item key="2">
<a-icon type="calendar" />
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
data () {
return {
current: '1',
theme: 'dark',
}
},
methods: {
handleClick (e) {
console.log('click ', e)
this.current = e.key
},
changeTheme ({ target }) {
this.theme = target.checked ? 'light' : 'dark'
},
},
}
</script>
```

77
components/menu/demo/theme.vue
View File

@ -1,77 +0,0 @@
<template>
<div>
<md>
## 主题
内建了两套主题 `light|dark`，默认 `light`。
</md>
<a-checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
mode="inline"
:theme="theme"
:selectedKeys="[current]"
@click="handleClick"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
current: '1',
theme: 'dark',
}
},
methods: {
handleClick (e) {
console.log('click ', e)
this.current = e.key
},
changeTheme ({ target }) {
this.theme = target.checked ? 'light' : 'dark'
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

56
components/menu/demo/vertical.md Normal file
View File

@ -0,0 +1,56 @@
<cn>
#### 垂直菜单
子菜单是弹出的形式。
</cn>
<us>
#### Vertical menu
Submenus open as pop-ups.
</us>
```html
<template>
<div>
<a-menu
style="width: 256px"
mode="vertical"
@click="handleClick"
>
<a-menu-item key="1">
<a-icon type="mail" />
Navigation One
</a-menu-item>
<a-menu-item key="2">
<a-icon type="calendar" />
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
methods: {
handleClick (e) {
console.log('click ', e)
},
},
}
</script>
```

60
components/menu/demo/vertical.vue
View File

@ -1,60 +0,0 @@
<template>
<div>
<md>
## 垂直菜单
子菜单是弹出的形式。
</md>
<Menu
style="width: 256px"
mode="vertical"
@click="handleClick"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
methods: {
handleClick (e) {
console.log('click ', e)
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

73
components/menu/index.en-US.md Normal file
View File

@ -0,0 +1,73 @@
## API
````html
<template>
<a-menu>
<a-menu-item>菜单项</a-menu-item>
<a-sub-menu title="子菜单">
<a-menu-item>子菜单项</a-menu-item>
</a-sub-menu>
</a-menu>
</template>
````
### Menu
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| defaultOpenKeys | array with the keys of default opened sub menus | | |
| defaultSelectedKeys | array with the keys of default selected menu items | string\[] | |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `vertical-right` \| `horizontal` \| `inline` | `vertical` |
| multiple | Allow selection of multiple items | boolean | false |
| openKeys(.sync) | array with the keys of currently opened sub menus | string\[] | |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys(v-model) | array with the keys of currently selected menu items | string\[] | |
| style | style of the root node | object | |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 |
| theme | color theme of the menu | string: `light` `dark` | `light` |
### Menu Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| click | callback executed when a menu item is clicked | function({ item, key, keyPath }) |
| deselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) |
| openChange | called when open/close sub menu | function(openKeys: string\[]) |
| select | callback executed when a menu item is selected | function({ item, key, selectedKeys }) |
### Menu.Item
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| disabled | whether menu item is disabled or not | boolean | false |
| key | unique id of the menu item | string | |
### Menu.SubMenu
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | |
| disabled | whether sub menu is disabled or not | boolean | false |
| key | unique id of the sub menu | string | |
| title | title of the sub menu | string\|ReactNode | |
### Menu.SubMenu Events
| Events Name | Description | Arguments |
| --- | --- | --- |
| titleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) |
### Menu.ItemGroup
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| children | sub menu items | MenuItem\[] | |
| title | title of the group | string\|ReactNode | |
### Menu.Divider
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.

33
components/menu/index.zh-CN.md
View File

@ -1,29 +1,16 @@
---
category: Components
cols: 1
type: Navigation
title: Menu
subtitle: 导航菜单
---
为页面和功能提供导航的菜单列表。
## 何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
更多布局和导航的使用可以参考：[通用布局](/components/layout)。
## API
```html
<Menu>
<Menu.Item>菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>子菜单项</Menu.Item>
</SubMenu>
</Menu>
```
````html
<template>
<a-menu>
<a-menu-item>菜单项</a-menu-item>
<a-sub-menu title="子菜单">
<a-menu-item>子菜单项</a-menu-item>
</a-sub-menu>
</a-menu>
</template>
````
### Menu

13
components/message/demo/duration.md
View File

@ -14,13 +14,14 @@ Customize message display duration from default `3s` to `10s`.
<a-button @click="success">Customized display duration</a-button>
</template>
<script>
export default {
methods: {
success () {
this.$message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
},
}
import { message } from 'antd'
export default {
methods: {
success () {
message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
},
}
}
</script>
```

8
components/message/demo/index.vue
View File

@ -17,9 +17,15 @@ const md = {
Display global messages as feedback in response to user operations.
## When To Use
- To provide feedback such as success, warning, error etc.
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.`,
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
## Examples `,
}
export default {
category: 'Components',
subtitle: '全局提示',
type: 'Feedback',
noinstant: true,
title: 'Message',
render () {
return (
<div>

3
components/message/demo/info.md
View File

@ -14,10 +14,11 @@ Normal messages as feedbacks.
<a-button type="primary" @click="info">Display normal message</a-button>
</template>
<script>
import { message } from 'antd'
export default {
methods: {
info () {
this.$message.info('This is a normal message');
message.info('This is a normal message');
},
}
}

3
components/message/demo/loading.md
View File

@ -14,10 +14,11 @@ Display a global loading indicator, which is dismissed by itself asynchronously.
<a-button @click="success">Display a loading indicator</a-button>
</template>
<script>
import { message } from 'antd'
export default {
methods: {
success () {
const hide = this.$message.loading('Action in progress..', 0);
const hide = message.loading('Action in progress..', 0);
setTimeout(hide, 2500);
},
}

7
components/message/demo/other.md
View File

@ -18,16 +18,17 @@ Messages of success, error and warning types.
</div>
</template>
<script>
import { message } from 'antd'
export default {
methods: {
success () {
this.$message.success('This is a message of success');
message.success('This is a message of success');
},
error () {
this.$message.error('This is a message of error');
message.error('This is a message of error');
},
warning () {
this.$message.warning('This is message of warning');
message.warning('This is message of warning');
},
}
}

1
components/modal/demo/index.vue
View File

@ -26,6 +26,7 @@ the user's workflow, you can use \`Modal\` to create a new floating layer over t
feedback or display information.
Additionally, if you need show a simple confirmation dialog, you can use \`antd.Modal.confirm()\`,
and so on.
## Examples
`,
}
export default {

3
components/notification/demo/basic.md
View File

@ -14,10 +14,11 @@ The simplest usage that close the notification box after 4.5s.
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'antd'
export default {
methods: {
openNotification () {
this.$notification.open({
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});

3
components/notification/demo/custom-icon.md
View File

@ -14,10 +14,11 @@ The icon can be customized to any vue node or (h) => vue node.
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'antd'
export default {
methods: {
openNotification () {
this.$notification.open({
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
icon: <a-icon type="smile-circle" style="color: #108ee9" />,

3
components/notification/demo/custom-style.md
View File

@ -14,10 +14,11 @@ The style and className are available to customize Notification.
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'antd'
export default {
methods: {
openNotification () {
this.$notification.open({
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
style: {

3
components/notification/demo/duration.md
View File

@ -16,10 +16,11 @@ the notification box will never close automatically.
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'antd'
export default {
methods: {
openNotification () {
this.$notification.open({
notification.open({
message: 'Notification Title',
description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
duration: 0,

8
components/notification/demo/index.vue
View File

@ -26,9 +26,15 @@ used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details
about upcoming steps the user may have to follow.
- A notification that is pushed by the application.`,
- A notification that is pushed by the application.
## Examples `,
}
export default {
category: 'Components',
type: 'Feedback',
noinstant: true,
title: 'Notification',
subtitle: '通知提醒框',
render () {
return (
<div>

13
components/notification/demo/placement.md
View File

@ -12,13 +12,14 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o
```html
<template>
<div>
<select v-model="selected">
<option v-for="val in options">{{val}}</option>
</select>
<a-select v-model="selected" :style="{ width: '120px', marginRight: '10px' }">
<a-select-option v-for="val in options" :key="val" :value="val">{{val}}</option>
</a-select>
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</div>
</template>
<script>
import { notification } from 'antd'
const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
export default {
data () {
@ -29,14 +30,14 @@ A notification box can pop up from `topRight` or `bottomRight` or `bottomLeft` o
},
watch: {
selected(val) {
this.$notification.config({
notification.config({
placement: val,
});
}
},
methods: {
openNotification () {
this.$notification.open({
openNotification (val) {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});

5
components/notification/demo/with-btn.md
View File

@ -14,6 +14,7 @@ The simplest usage that close the notification box after 4.5s.
<a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'antd'
const close = () => {
console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
};
@ -21,7 +22,7 @@ The simplest usage that close the notification box after 4.5s.
methods: {
openNotification () {
const key = `open${Date.now()}`;
this.$notification.open({
notification.open({
message: 'Notification Title',
description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
btn: (h)=>{
@ -31,7 +32,7 @@ The simplest usage that close the notification box after 4.5s.
size: 'small',
},
on: {
click: () => this.$notification.close(key)
click: () => notification.close(key)
}
}, 'Confirm')
},

3
components/notification/demo/with-icon.md
View File

@ -19,10 +19,11 @@ A notification box with a icon at the left side.
</div>
</template>
<script>
import { notification } from 'antd'
export default {
methods: {
openNotificationWithIcon (type) {
this.$notification[type]({
notification[type]({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
});

18
components/pagination/demo/index.vue
View File

@ -31,33 +31,29 @@ const md = {
## When To Use
- When it will take a long time to load/render all items.
- If you want to browse the data by navigating through pages.`,
- If you want to browse the data by navigating through pages.
## Examples `,
}
export default {
category: 'Components',
subtitle: '分页',
type: 'Navigation',
title: 'Pagination',
cols: 1,
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<br/>
<More />
<br/>
<Changer />
<br/>
<CustomChanger />
<br/>
<Jump />
<br/>
<Mini />
<br/>
<Simple />
<br/>
<Controlled />
<br/>
<Total />
<br/>
<ItemRender />
<br/>
<api>
<template slot='cn'>
<CN/>

4
components/popconfirm/demo/index.vue
View File

@ -16,6 +16,10 @@ import Trigger from './dynamic-trigger'
import Local from './local'
import Placement from './placement'
export default {
category: 'Components',
subtitle: '气泡确认框',
type: 'Feedback',
title: 'Popconfirm',
components: {
Basic,
Trigger,

4
components/popover/demo/index.vue
View File

@ -19,6 +19,10 @@ import Control from './control'
import Placement from './placement'
import TriggerType from './triggerType'
export default {
category: 'Components',
subtitle: '气泡卡片',
type: 'Data Display',
title: 'Popover',
components: {
Basic,
ArrowCenter,

4
components/radio/demo/index.vue
View File

@ -28,6 +28,10 @@ import RadioGroupWithName from './radioGroup-with-name'
import RadioGroup from './radioGroup'
import Size from './size'
export default {
category: 'Components',
subtitle: '单选框',
type: 'Data Entry',
title: 'Radio',
components: {
Basic,
Disabled,

6
components/rate/demo/index.vue
View File

@ -39,8 +39,12 @@
</template>
<script>
import '../style'
import { Rate, Icon, Button } from 'antd/index'
import { Rate, Icon } from 'antd/index'
export default {
category: 'Components',
subtitle: '评分',
type: 'Data Entry',
title: 'Rate',
data () {
return {
allowHalf: true,

6
components/select/demo/index.vue
View File

@ -27,9 +27,13 @@ const md = {
## When To Use
- A dropdown menu for displaying choices - an elegant alternative to the native \`<select>\` element.
- Utilizing [Radio](#/us/components/radio/) is recommended when there are fewer total options (less than 5).
`,
## Examples `,
}
export default {
category: 'Components',
subtitle: '选择器',
type: 'Data Entry',
title: 'Select',
render () {
return (
<div id='components-select-demo'>

14
components/spin/demo/index.vue
View File

@ -24,27 +24,25 @@ const md = {
# When To Use
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.`,
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
## Examples `,
}
export default {
category: 'Components',
type: 'Feedback',
title: 'Spin',
subtitle: '加载中',
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<br/>
<Size />
<br/>
<Inside />
<br/>
<Nested />
<br/>
<Tip />
<br/>
<DelayAndDebounce />
<br/>
<CustomIndicator />
<br/>
<api>
<template slot='cn'>
<CN/>

4
components/steps/demo/index.vue
View File

@ -26,7 +26,9 @@ const md = {
# When To Use
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.`,
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
## Examples
`,
}
export default {
category: 'Components',

7
components/switch/demo/index.vue
View File

@ -25,9 +25,14 @@ const md = {
## When To Use
- If you need to represent the switching between two states or on-off state.
- The difference between 'Switch' and 'Checkbox' is that 'Switch' will trigger a state change directly when you toggle it, while 'Checkbox' is generally used for state marking, which should work in conjunction with submit operation.`,
- The difference between 'Switch' and 'Checkbox' is that 'Switch' will trigger a state change directly when you toggle it, while 'Checkbox' is generally used for state marking, which should work in conjunction with submit operation.
## Examples `,
}
export default {
category: 'Components',
subtitle: '开关',
type: 'Data Entry',
title: 'Switch',
render () {
return (
<div>

5
components/tabs/demo/index.vue
View File

@ -37,6 +37,11 @@ import Position from './position'
import Size from './size'
import Slide from './slide'
export default {
category: 'Components',
subtitle: '标签页',
type: 'Data Display',
title: 'Tabs',
cols: 1,
components: {
Basic,
CardTop,

4
components/tag/demo/index.vue
View File

@ -19,6 +19,10 @@ import Colorful from './colorful'
import Control from './control'
import HotTags from './hot-tags'
export default {
category: 'Components',
subtitle: '标签',
type: 'Data Display',
title: 'Tag',
components: {
Basic,
Checkable,

3
components/time-picker/demo/index.vue
View File

@ -19,7 +19,8 @@ const md = {
us: `# TimePicker
To select/input a time.
## When To Use
By clicking the input box, you can select a time from a popup panel.`,
By clicking the input box, you can select a time from a popup panel.
## Examples `,
}
export default {
category: 'Components',

4
components/tooltip/demo/index.vue
View File

@ -16,6 +16,10 @@ import ArrowCenter from './arrow-point-at-center'
import AutoAdjust from './auto-adjust-overflow'
import Placement from './placement'
export default {
category: 'Components',
subtitle: '文字提示',
type: 'Data Display',
title: 'Tooltip',
components: {
Basic,
ArrowCenter,