mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-22 17:13:27 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
b79fd5a540
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 4
|
||||
title: 进度圈动态展示
|
||||
title:
|
||||
zh-CN: 进度圈动态展示
|
||||
en-US: Dynamic circular progress bar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
会动的进度条才是好进度条。
|
||||
|
||||
## en-US
|
||||
|
||||
A dynamic progress bar is better.
|
||||
|
||||
````jsx
|
||||
import { Progress, Button } from 'antd';
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 3
|
||||
title: 小型进度圈
|
||||
title:
|
||||
zh-CN: 小型进度圈
|
||||
en-US: Mini size circular progress bar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
小一号的圈形进度。
|
||||
|
||||
## en-US
|
||||
|
||||
A smaller circular progress bar.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 1
|
||||
title: 进度圈
|
||||
title:
|
||||
zh-CN: 进度圈
|
||||
en-US: Circular progress bar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
圈形的进度。
|
||||
|
||||
## en-US
|
||||
|
||||
A circular progress bar.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 4
|
||||
title: 动态展示
|
||||
title:
|
||||
zh-CN: 动态展示
|
||||
en-US: Dynamic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
会动的进度条才是好进度条。
|
||||
|
||||
## en-US
|
||||
|
||||
A dynamic progress bar is better.
|
||||
|
||||
````jsx
|
||||
import { Progress, Button } from 'antd';
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 6
|
||||
title: 自定义文字格式
|
||||
title:
|
||||
zh-CN: 自定义文字格式
|
||||
en-US: Custom text format
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
`format` 属性指定格式。
|
||||
|
||||
## en-US
|
||||
|
||||
You can custom text format by setting `format`.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 2
|
||||
title: 小型进度条
|
||||
title:
|
||||
zh-CN: 小型进度条
|
||||
en-US: Mini size progress bar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
适合放在较狭窄的区域内。
|
||||
|
||||
## en-US
|
||||
|
||||
Appropriate for a narrow area.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
|
||||
@ -1,10 +1,18 @@
|
||||
---
|
||||
order: 0
|
||||
title: 进度条
|
||||
title:
|
||||
zh-CN: 进度条
|
||||
en-US: Progress bar
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
标准的进度条。
|
||||
|
||||
## en-US
|
||||
|
||||
A standard progress bar.
|
||||
|
||||
````jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
|
||||
28
components/progress/index.en-US.md
Normal file
28
components/progress/index.en-US.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
category: Components
|
||||
type: Views
|
||||
title: Progress
|
||||
---
|
||||
|
||||
To display the current progress of an operation flow.
|
||||
|
||||
## When to use
|
||||
|
||||
If it will take a long time to complete the operation, you can use `Progress` to show the current progress and status.
|
||||
|
||||
- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
|
||||
- When you need to display the completion percentage of an operation.
|
||||
|
||||
## API
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
type | to set the type, options: `line` `circle` | String | line
|
||||
percent | to set the completion percentage | Number | 0
|
||||
format | template function of the content | function(percent) | `percent => percent + '%'`
|
||||
status | to set the status of the progress, options: `success` `exception` `active` | String | -
|
||||
showInfo | determine whether to display the progress value and the status icon | Boolean | true
|
||||
strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | Number | 10
|
||||
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | Number | 6
|
||||
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | Number | 132
|
||||
|
||||
@ -11,19 +11,19 @@ english: Progress
|
||||
|
||||
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
|
||||
|
||||
* 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
|
||||
* 当需要显示一个操作完成的百分比时。
|
||||
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
|
||||
- 当需要显示一个操作完成的百分比时。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
|----------|---------------|----------|---------------|
|
||||
| type | 类型，可选 `line` `circle` | string | `line` |
|
||||
| percent | 百分比 | number | 0 |
|
||||
| type | 类型，可选 `line` `circle` | String | line |
|
||||
| percent | 百分比 | Number | 0 |
|
||||
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
|
||||
| status | 状态，可选：`success` `exception` `active` | string | - |
|
||||
| showInfo | 是否显示进度数值或状态图标 | bool | true |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
|
||||
| status | 状态，可选：`success` `exception` `active` | String | - |
|
||||
| showInfo | 是否显示进度数值或状态图标 | Boolean | true |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | Number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | Number | 6 |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | Number | 132 |
|
||||
@ -79,7 +79,7 @@
|
||||
"babel-eslint": "^6.0.2",
|
||||
"babel-jest": "^13.2.2",
|
||||
"babel-plugin-antd": "^0.4.0",
|
||||
"bisheng": "^0.7.1",
|
||||
"bisheng": "^0.9.0",
|
||||
"bisheng-plugin-antd": "~0.2.0",
|
||||
"bisheng-plugin-description": "^0.1.1",
|
||||
"bisheng-plugin-react": "^0.2.0",
|
||||
|
||||
@ -21,13 +21,30 @@ module.exports = {
|
||||
'0.12.x': 'http://012x.ant.design/',
|
||||
},
|
||||
routes: {
|
||||
'/': './template/Home/index',
|
||||
'/docs/practice/:children': contentTmpl,
|
||||
'/docs/pattern/:children': contentTmpl,
|
||||
'/docs/react/:children': contentTmpl,
|
||||
'/changelog': contentTmpl,
|
||||
'/components/:children': contentTmpl,
|
||||
'/docs/spec/:children': contentTmpl,
|
||||
'/docs/resource/:children': contentTmpl,
|
||||
path: '/',
|
||||
component: './template/Layout/index',
|
||||
indexRoute: { component: './template/Home/index' },
|
||||
childRoutes: [{
|
||||
path: '/docs/practice/:children',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/docs/pattern/:children',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/docs/react/:children',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/changelog',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/components/:children',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/docs/spec/:children',
|
||||
component: contentTmpl,
|
||||
}, {
|
||||
path: '/docs/resource/:children',
|
||||
component: contentTmpl,
|
||||
}],
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from 'react';
|
||||
import Layout from '../Layout';
|
||||
import MainContent from './MainContent';
|
||||
import Promise from 'bluebird';
|
||||
import * as utils from '../utils';
|
||||
@ -41,9 +40,5 @@ export function collect(nextProps, callback) {
|
||||
}
|
||||
|
||||
export default (props) => {
|
||||
return (
|
||||
<Layout {...props}>
|
||||
<MainContent {...props} />
|
||||
</Layout>
|
||||
);
|
||||
return <MainContent {...props} />;
|
||||
};
|
||||
|
||||
@ -1,20 +1,11 @@
|
||||
import React from 'react';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import Layout from '../Layout';
|
||||
import Link from './Link';
|
||||
import Banner from './Banner';
|
||||
import Page1 from './Page1';
|
||||
import Page2 from './Page2';
|
||||
import Page3 from './Page3';
|
||||
import Page4 from './Page4';
|
||||
import Promise from 'bluebird';
|
||||
import * as utils from '../utils';
|
||||
|
||||
export function collect(nextProps, callback) {
|
||||
const componentsList = utils.collectDocs(nextProps.data.components);
|
||||
Promise.all(componentsList)
|
||||
.then((list) => callback(null, { ...nextProps, components: list }));
|
||||
}
|
||||
|
||||
export default class Home extends React.Component {
|
||||
// To store style which is only for Home and has conflicts with others.
|
||||
@ -96,17 +87,15 @@ export default class Home extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<DocumentTitle title="Ant Design - 一个 UI 设计语言">
|
||||
<Layout {...this.props}>
|
||||
<div className="main-wrapper">
|
||||
<Link />
|
||||
<Banner />
|
||||
<Page1 />
|
||||
<Page2 />
|
||||
<Page3 />
|
||||
<Page4 />
|
||||
<style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
|
||||
</div>
|
||||
</Layout>
|
||||
<div className="main-wrapper">
|
||||
<Link />
|
||||
<Banner />
|
||||
<Page1 />
|
||||
<Page2 />
|
||||
<Page3 />
|
||||
<Page4 />
|
||||
<style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
);
|
||||
}
|
||||
|
||||
@ -89,10 +89,10 @@ export default class Header extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { routes, components } = this.props;
|
||||
const route = routes[0].path.replace(/^\//, '');
|
||||
let activeMenuItem = route.slice(0, route.indexOf(':') - 1) || 'home';
|
||||
if (activeMenuItem === 'components' || route === 'changelog') {
|
||||
const { location, components } = this.props;
|
||||
const module = location.pathname.split('/').slice(0, -1).join('/');
|
||||
let activeMenuItem = module || 'home';
|
||||
if (activeMenuItem === 'components' || location.pathname === 'changelog') {
|
||||
activeMenuItem = 'docs/react';
|
||||
}
|
||||
|
||||
@ -144,7 +144,7 @@ export default class Header extends React.Component {
|
||||
</Select>
|
||||
</div>
|
||||
{
|
||||
location.port ? (
|
||||
window.location.port ? (
|
||||
<Button id="lang" type="ghost" size="small" onClick={this.handleLangChange}>
|
||||
<FormattedMessage id="app.header.lang" />
|
||||
</Button>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import * as antd from '../../../../index';
|
||||
import { addLocaleData, IntlProvider } from 'react-intl';
|
||||
import Promise from 'bluebird';
|
||||
import Header from './Header';
|
||||
import Footer from './Footer';
|
||||
import * as utils from '../utils';
|
||||
import enLocale from '../../en-US.js';
|
||||
import cnLocale from '../../zh-CN.js';
|
||||
import '../../static/style';
|
||||
@ -11,7 +12,7 @@ import '../../static/style';
|
||||
// Expose to iframe
|
||||
window.react = React;
|
||||
window['react-dom'] = ReactDOM;
|
||||
window.antd = antd;
|
||||
window.antd = require('antd');
|
||||
|
||||
// Polyfill
|
||||
const areIntlLocalesSupported = require('intl-locales-supported');
|
||||
@ -42,6 +43,12 @@ const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('loc
|
||||
const appLocale = isZhCN ? cnLocale : enLocale;
|
||||
addLocaleData(appLocale.data);
|
||||
|
||||
export function collect(nextProps, callback) {
|
||||
const componentsList = utils.collectDocs(nextProps.data.components);
|
||||
Promise.all(componentsList)
|
||||
.then((list) => callback(null, { ...nextProps, components: list }));
|
||||
}
|
||||
|
||||
let gaListenerSetted = false;
|
||||
export default class Layout extends React.Component {
|
||||
static contextTypes = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user