2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 2
|
2016-07-29 10:13:59 +08:00
|
|
|
title:
|
|
|
|
zh-CN: 所有组件
|
|
|
|
en-US: All components
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2016-07-29 10:13:59 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2018-01-13 14:00:51 +08:00
|
|
|
此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2016-07-29 10:13:59 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
Components which need localization support are listed here, you can toggle the language in the demo.
|
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2016-03-31 17:37:24 +08:00
|
|
|
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
|
2018-06-27 15:55:04 +08:00
|
|
|
Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
|
2017-09-26 23:12:47 +08:00
|
|
|
import zhCN from 'antd/lib/locale-provider/zh_CN';
|
2016-09-09 13:55:21 +08:00
|
|
|
import moment from 'moment';
|
|
|
|
import 'moment/locale/zh-cn';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2018-01-15 14:39:25 +08:00
|
|
|
moment.locale('en');
|
2016-09-09 13:55:21 +08:00
|
|
|
|
2016-03-03 21:00:38 +08:00
|
|
|
const Option = Select.Option;
|
2016-04-01 13:53:37 +08:00
|
|
|
const RangePicker = DatePicker.RangePicker;
|
2016-03-03 17:43:38 +08:00
|
|
|
|
|
|
|
const columns = [{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
filters: [{
|
|
|
|
text: 'filter1',
|
|
|
|
value: 'filter1',
|
|
|
|
}],
|
|
|
|
}, {
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
}];
|
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
class Page extends React.Component {
|
2017-02-20 21:47:57 +08:00
|
|
|
state = {
|
|
|
|
visible: false,
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
showModal = () => {
|
2016-03-03 17:43:38 +08:00
|
|
|
this.setState({ visible: true });
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
hideModal = () => {
|
2016-03-03 17:43:38 +08:00
|
|
|
this.setState({ visible: false });
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2016-03-03 17:43:38 +08:00
|
|
|
render() {
|
2016-03-05 17:14:45 +08:00
|
|
|
const info = () => {
|
|
|
|
Modal.info({
|
|
|
|
title: 'some info',
|
|
|
|
content: 'some info',
|
|
|
|
});
|
|
|
|
};
|
|
|
|
const confirm = () => {
|
|
|
|
Modal.confirm({
|
|
|
|
title: 'some info',
|
|
|
|
content: 'some info',
|
|
|
|
});
|
|
|
|
};
|
2016-03-03 17:43:38 +08:00
|
|
|
return (
|
2016-03-07 14:52:14 +08:00
|
|
|
<div className="locale-components">
|
|
|
|
<div className="example">
|
|
|
|
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
2016-05-08 16:05:36 +08:00
|
|
|
<Select showSearch style={{ width: 200 }}>
|
|
|
|
<Option value="jack">jack</Option>
|
|
|
|
<Option value="lucy">lucy</Option>
|
|
|
|
</Select>
|
2016-03-07 14:52:14 +08:00
|
|
|
<DatePicker />
|
|
|
|
<TimePicker />
|
2016-04-01 13:53:37 +08:00
|
|
|
<RangePicker style={{ width: 200 }} />
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
2016-03-07 14:52:14 +08:00
|
|
|
<Button type="primary" onClick={this.showModal}>Show Modal</Button>
|
|
|
|
<Button onClick={info}>Show info</Button>
|
|
|
|
<Button onClick={confirm}>Show confirm</Button>
|
|
|
|
<Popconfirm title="Question?">
|
|
|
|
<a href="#">Click to confirm</a>
|
|
|
|
</Popconfirm>
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
2016-04-29 12:13:27 +08:00
|
|
|
<Transfer
|
|
|
|
dataSource={[]}
|
|
|
|
showSearch
|
|
|
|
targetKeys={[]}
|
2016-06-06 13:54:10 +08:00
|
|
|
render={item => item.title}
|
|
|
|
/>
|
2016-03-07 14:52:14 +08:00
|
|
|
</div>
|
2016-09-09 13:55:21 +08:00
|
|
|
<div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
|
|
|
|
<Calendar fullscreen={false} value={moment()} />
|
2016-03-31 17:37:24 +08:00
|
|
|
</div>
|
2016-03-07 14:52:14 +08:00
|
|
|
<div className="example">
|
|
|
|
<Table dataSource={[]} columns={columns} />
|
|
|
|
</div>
|
2016-03-03 17:43:38 +08:00
|
|
|
<Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
|
|
|
|
<p>Locale Modal</p>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
);
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
}
|
2016-03-03 17:43:38 +08:00
|
|
|
|
2017-11-20 15:19:43 +08:00
|
|
|
let forceRerender = 0;
|
2017-02-20 21:39:07 +08:00
|
|
|
class App extends React.Component {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
2018-01-15 14:39:25 +08:00
|
|
|
locale: null,
|
2016-03-03 21:00:38 +08:00
|
|
|
};
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-20 21:39:07 +08:00
|
|
|
changeLocale = (e) => {
|
2016-09-09 13:55:21 +08:00
|
|
|
const localeValue = e.target.value;
|
|
|
|
this.setState({ locale: localeValue });
|
2018-01-15 14:39:25 +08:00
|
|
|
if (!localeValue) {
|
|
|
|
moment.locale('en');
|
|
|
|
} else {
|
|
|
|
moment.locale('zh-cn');
|
|
|
|
}
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2016-03-03 21:00:38 +08:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div>
|
2016-03-07 14:52:14 +08:00
|
|
|
<div className="change-locale">
|
2016-05-08 16:05:36 +08:00
|
|
|
<span style={{ marginRight: 16 }}>Change locale of components: </span>
|
2018-04-15 15:13:59 +08:00
|
|
|
<Radio.Group defaultValue={undefined} onChange={this.changeLocale}>
|
|
|
|
<Radio.Button key="en" value={undefined}>English</Radio.Button>
|
2017-09-26 23:12:47 +08:00
|
|
|
<Radio.Button key="cn" value={zhCN}>中文</Radio.Button>
|
2016-05-08 16:05:36 +08:00
|
|
|
</Radio.Group>
|
2016-03-03 21:00:38 +08:00
|
|
|
</div>
|
2017-11-20 15:19:43 +08:00
|
|
|
<LocaleProvider locale={this.state.locale}>
|
|
|
|
<Page key={forceRerender++ /* HACK: just refresh in production environment */} />
|
|
|
|
</LocaleProvider>
|
2016-03-03 21:00:38 +08:00
|
|
|
</div>
|
|
|
|
);
|
2017-02-20 21:39:07 +08:00
|
|
|
}
|
|
|
|
}
|
2016-03-03 21:00:38 +08:00
|
|
|
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
2016-03-03 17:43:38 +08:00
|
|
|
````
|
2016-03-07 14:52:14 +08:00
|
|
|
|
|
|
|
````css
|
|
|
|
.locale-components {
|
|
|
|
border-top: 1px solid #d9d9d9;
|
|
|
|
padding-top: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.example {
|
|
|
|
margin: 16px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.example > * {
|
|
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.change-locale {
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
````
|