update docs
tangjinzhou
parent
c82dab3a47
commit
fbb21653a8
|
|
@ -41,7 +41,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
### Common Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| openChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) |
|
||||
| openChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) |
|
||||
|
||||
### Common Methods
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
| disabledTime | to specify the time that cannot be selected | function(date) | - |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
|
||||
| showTime.defaultValue | to set default time of selected date | [moment](http://momentjs.com/) | moment() |
|
||||
| showToday | whether to show "Today" button | boolean | true |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - |
|
||||
|
|
@ -66,9 +66,9 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
### DatePicker Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| calendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) |
|
||||
| ok | callback when click ok button | function() |
|
||||
| calendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) |
|
||||
| ok | callback when click ok button | function() |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
|
|
@ -83,7 +83,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
### MonthPicker Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) |
|
||||
|
||||
### WeekPicker
|
||||
|
||||
|
|
@ -107,13 +107,13 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
|||
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| ranges | preseted ranges for quick selection | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | - |
|
||||
| renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](#/us/components/time-picker/API) |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
|
||||
|
||||
### RangePicker Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
|
||||
| change | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
|
||||
| ok | callback when click ok button | function() |
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| openChange | 弹出日历和关闭日历的回调 | function(status) |
|
||||
| openChange | 弹出日历和关闭日历的回调 | function(status) |
|
||||
|
||||
### 共同的方法
|
||||
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
| disabledTime | 不可选择的时间 | function(date) | 无 |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 |
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| change | 时间发生变化的回调 | function(date: moment, dateString: string) |
|
||||
| ok | 点击确定按钮的回调 | function() |
|
||||
| change | 时间发生变化的回调 | function(date: moment, dateString: string) |
|
||||
| ok | 点击确定按钮的回调 | function() |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string\]: [moment](http://momentjs.com/)\[] } \| () => { \[range: string\]: [moment](http://momentjs.com/)\[] } | 无 |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](#/cn/components/time-picker/API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
|
||||
|
||||
### RangePicker事件
|
||||
|
|
|
|||
|
|
@ -40,6 +40,10 @@ const md = {
|
|||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
type: 'General',
|
||||
title: 'Icon',
|
||||
subtitle: '图标',
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import './style.js'
|
||||
import Button from './button'
|
||||
const ButtonGroup = Button.Group
|
||||
export { Button, ButtonGroup }
|
||||
|
|
|
|||
|
|
@ -3,6 +3,20 @@ import Basic from './basic'
|
|||
import All from './all'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
const md = {
|
||||
cn: `## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| locale | 语言包配置，语言包可到 \`antd/lib/locale-provider/\` 目录下寻找 | object | - |
|
||||
`,
|
||||
us: `## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| locale | language package setting, you can find the packages in this path: \`antd/lib/locale-provider/\` | object | - |
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
subtitle: '国际化',
|
||||
|
|
@ -18,6 +32,7 @@ export default {
|
|||
</api>
|
||||
<Basic />
|
||||
<All />
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -49,10 +49,4 @@ If you can't find your language, you are welcome to create a locale package base
|
|||
|
||||
This component aims for localization of the built-in text, if you want to support other documents, we recommend using [vue-i18n](https://github.com/kazupon/vue-i18n).
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - |
|
||||
|
||||
## Examples
|
||||
|
|
|
|||
|
|
@ -48,10 +48,4 @@ const { LocaleProvider, locales } = window.antd;
|
|||
|
||||
本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 [vue-i18n](https://github.com/kazupon/vue-i18n)
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |
|
||||
|
||||
## 代码演示
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
| --- | --- | --- |
|
||||
| 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\[]) |
|
||||
| openChange | called when open/close sub menu | function(openKeys: string\[]) |
|
||||
| select | callback executed when a menu item is selected | function({ item, key, selectedKeys }) |
|
||||
|
||||
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
| children | sub menus or sub menu items | Array<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 | |
|
||||
| title | title of the sub menu | string\|slot | |
|
||||
|
||||
### Menu.SubMenu Events
|
||||
| Events Name | Description | Arguments |
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
| Param | Description | Type | Default value |
|
||||
| ----- | ----------- | ---- | ------------- |
|
||||
| children | sub menu items | MenuItem\[] | |
|
||||
| title | title of the group | string\|ReactNode | |
|
||||
| title | title of the group | string\|slot | |
|
||||
|
||||
### Menu.Divider
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| title | 分组标题 | string\|\|function|\slot | |
|
||||
| title | 分组标题 | string\|\|function\|slot | |
|
||||
|
||||
### Menu.Divider
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ title: Popconfirm
|
|||
| cancel | 点击取消时触发 | (e) |
|
||||
| confirm | 点击确认时触发 | (e) |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
|
||||
|
||||
## 注意
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ title: Popover
|
|||
| content | 卡片内容 | string\|function\|slot | 无 |
|
||||
| title | 卡片标题 | string\|function\|slot | 无 |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
|
||||
|
||||
## 注意
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@
|
|||
<cn>
|
||||
#### 联动
|
||||
省市联动是典型的例子。
|
||||
推荐使用 [Cascader](/components/cascader/) 组件。
|
||||
推荐使用 [Cascader](#/cn/components/cascader/) 组件。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### coordinate
|
||||
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
|
||||
Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable.
|
||||
Using the [Cascader](#/us/components/cascader) component is strongly recommended instead as it is more flexible and capable.
|
||||
</us>
|
||||
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
|||
|
||||
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
|
||||
- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
|
||||
- [RadioButton](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
||||
- [RadioButton](#/cn/components/radio/components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
||||
|
||||
## API
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const MenuItemGroup = {
|
|||
{getComponentFromProp(this, 'title')}
|
||||
</div>
|
||||
<ul class={listClassName}>
|
||||
{this.$slots.default.map(this.renderInnerMenuItem)}
|
||||
{this.$slots.default && this.$slots.default.map(this.renderInnerMenuItem)}
|
||||
</ul>
|
||||
</li>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,9 +5,40 @@ import zhCN from 'antd/locale-provider/zh_CN'
|
|||
import enUS from 'antd/locale-provider/default'
|
||||
export default {
|
||||
render () {
|
||||
const { name, demo } = this.$route.params // eslint-disable-line
|
||||
const { name } = this.$route.params
|
||||
let { lang } = this.$route.params
|
||||
const Demo = AllDemo[name]
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
General: [],
|
||||
Layout: [],
|
||||
Navigation: [],
|
||||
'Data Entry': [],
|
||||
'Data Display': [],
|
||||
Feedback: [],
|
||||
Other: [],
|
||||
}
|
||||
for (const [title, d] of Object.entries(AllDemo)) {
|
||||
const type = d.type || 'Other'
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
titleMap[key] = title
|
||||
menuConfig[type] = menuConfig[type] || []
|
||||
menuConfig[type].push(d)
|
||||
}
|
||||
const Demo = AllDemo[titleMap[name]]
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
menus.forEach(({ title, subtitle }) => {
|
||||
const linkValue = lang === 'cn'
|
||||
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||
: [<span>{title}</span>]
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
MenuItems.push(<a-menu-item key={key} style='padding-left: 80px'>
|
||||
<router-link to={{ path: `/${lang}/components/${key}` }}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
}
|
||||
let locale = zhCN
|
||||
if (lang !== 'cn') {
|
||||
lang = 'us'
|
||||
|
|
@ -17,16 +48,24 @@ export default {
|
|||
<a-locale-provider locale={locale}>
|
||||
<div class='site'>
|
||||
<Header />
|
||||
<div class='main-wrapper'>
|
||||
<a-menu class='nav' selectedKeys={[name]}>
|
||||
{Object.keys(AllDemo).map(d => <a-menu-item key={d}>
|
||||
<router-link to={{ path: `/${lang}/components/${d}` }}>{d}</router-link>
|
||||
</a-menu-item>)}
|
||||
</a-menu>
|
||||
<div class='content main-container'>
|
||||
{Demo ? <Demo /> : '正在紧急开发中...'}
|
||||
</div>
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
selectedKeys={[name]}
|
||||
defaultOpenKeys={['Components']}
|
||||
mode='inline'>
|
||||
<a-sub-menu title='Components' key='Components'>
|
||||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
{Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,27 +1,43 @@
|
|||
<template>
|
||||
<header id='header'>
|
||||
<a-menu v-model="current" mode="horizontal" id="nav">
|
||||
<a-menu-item key='home'>
|
||||
首页
|
||||
</a-menu-item>
|
||||
<a-menu-item key='design'>
|
||||
设计语言
|
||||
</a-menu-item>
|
||||
<a-menu-item key='components'>
|
||||
组件
|
||||
</a-menu-item>
|
||||
<a-menu-item key='github'>
|
||||
<a href="https://github.com/vueComponent/ant-design">GitHub</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</header>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
current: ['components'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const { lang, name } = this.$route.params
|
||||
this.$router.push({
|
||||
path: `/${lang === 'cn' ? 'us' : 'cn'}/components/${name}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { lang } = this.$route.params
|
||||
return (
|
||||
<header id='header'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
Logo
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div id='search-box'>
|
||||
</div>
|
||||
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
|
||||
{lang === 'cn' ? 'English' : '中文'}
|
||||
</a-button>
|
||||
<a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
|
||||
<a-menu-item key='components'>
|
||||
{lang === 'cn' ? '组件' : 'Components'}
|
||||
</a-menu-item>
|
||||
<a-menu-item key='github'>
|
||||
<a href='https://github.com/vueComponent/ant-design'>GitHub</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</header>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import '../components/style.js'
|
||||
import './index.less'
|
||||
import 'highlight.js/styles/solarized-light.css'
|
||||
import Vue from 'vue'
|
||||
|
|
|
|||
|
|
@ -8,9 +8,6 @@
|
|||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
#header {
|
||||
padding: 0 50px;
|
||||
}
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue