2019-07-24 10:34:55 +08:00
|
|
|
---
|
|
|
|
order: 1
|
|
|
|
title:
|
|
|
|
zh-CN: 国际化
|
|
|
|
en-US: Locale
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
此处列出 Ant Design 中需要国际化支持的组件,你可以在演示里切换语言。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Components which need localization support are listed here, you can toggle the language in the demo.
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
import {
|
|
|
|
ConfigProvider,
|
|
|
|
Pagination,
|
|
|
|
DatePicker,
|
|
|
|
TimePicker,
|
|
|
|
Calendar,
|
|
|
|
Popconfirm,
|
|
|
|
Table,
|
|
|
|
Modal,
|
|
|
|
Button,
|
|
|
|
Select,
|
|
|
|
Transfer,
|
|
|
|
Radio,
|
|
|
|
} from 'antd';
|
2020-10-26 11:57:37 +08:00
|
|
|
import enUS from 'antd/lib/locale/en_US';
|
|
|
|
import zhCN from 'antd/lib/locale/zh_CN';
|
2022-02-14 14:40:40 +08:00
|
|
|
import dayjs from 'dayjs';
|
|
|
|
import 'dayjs/locale/zh-cn';
|
2019-07-24 10:34:55 +08:00
|
|
|
|
2022-02-14 14:40:40 +08:00
|
|
|
dayjs.locale('en');
|
2019-07-24 10:34:55 +08:00
|
|
|
|
|
|
|
const { Option } = Select;
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
|
|
|
|
const columns = [
|
|
|
|
{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
filters: [
|
|
|
|
{
|
|
|
|
text: 'filter1',
|
|
|
|
value: 'filter1',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
function Page() {
|
|
|
|
const [visible, setVisible] = React.useState(false);
|
|
|
|
|
|
|
|
const showModal = () => {
|
|
|
|
setVisible(true);
|
|
|
|
};
|
|
|
|
|
|
|
|
const hideModal = () => {
|
|
|
|
setVisible(false);
|
2019-07-24 10:34:55 +08:00
|
|
|
};
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
const info = () => {
|
|
|
|
Modal.info({
|
|
|
|
title: 'some info',
|
|
|
|
content: 'some info',
|
|
|
|
});
|
2019-07-24 10:34:55 +08:00
|
|
|
};
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
const confirm = () => {
|
|
|
|
Modal.confirm({
|
|
|
|
title: 'some info',
|
|
|
|
content: 'some info',
|
|
|
|
});
|
2019-07-24 10:34:55 +08:00
|
|
|
};
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
return (
|
|
|
|
<div className="locale-components">
|
|
|
|
<div className="example">
|
|
|
|
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
|
|
|
<Select showSearch style={{ width: 200 }}>
|
|
|
|
<Option value="jack">jack</Option>
|
|
|
|
<Option value="lucy">lucy</Option>
|
|
|
|
</Select>
|
|
|
|
<DatePicker />
|
|
|
|
<TimePicker />
|
|
|
|
<RangePicker style={{ width: 200 }} />
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
|
|
|
<Button type="primary" onClick={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>
|
2019-07-24 10:34:55 +08:00
|
|
|
</div>
|
2022-05-11 19:43:54 +08:00
|
|
|
<div className="example">
|
|
|
|
<Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
|
|
|
|
</div>
|
|
|
|
<div className="site-config-provider-calendar-wrapper">
|
|
|
|
<Calendar fullscreen={false} value={moment()} />
|
|
|
|
</div>
|
|
|
|
<div className="example">
|
|
|
|
<Table dataSource={[]} columns={columns} />
|
|
|
|
</div>
|
|
|
|
<Modal title="Locale Modal" visible={visible} onCancel={hideModal}>
|
|
|
|
<p>Locale Modal</p>
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
);
|
2019-07-24 10:34:55 +08:00
|
|
|
}
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
export default () => {
|
|
|
|
const [locale, setLocale] = React.useState(enUS);
|
2019-07-24 10:34:55 +08:00
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
const changeLocale = e => {
|
2019-07-24 10:34:55 +08:00
|
|
|
const localeValue = e.target.value;
|
2022-05-11 19:43:54 +08:00
|
|
|
setLocale(localeValue);
|
2019-07-24 10:34:55 +08:00
|
|
|
if (!localeValue) {
|
2022-02-14 14:40:40 +08:00
|
|
|
dayjs.locale('en');
|
2019-07-24 10:34:55 +08:00
|
|
|
} else {
|
2022-02-14 14:40:40 +08:00
|
|
|
dayjs.locale('zh-cn');
|
2019-07-24 10:34:55 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-05-11 19:43:54 +08:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className="change-locale">
|
|
|
|
<span style={{ marginRight: 16 }}>Change locale of components: </span>
|
|
|
|
<Radio.Group value={locale} onChange={changeLocale}>
|
|
|
|
<Radio.Button key="en" value={enUS}>
|
|
|
|
English
|
|
|
|
</Radio.Button>
|
|
|
|
<Radio.Button key="cn" value={zhCN}>
|
|
|
|
中文
|
|
|
|
</Radio.Button>
|
|
|
|
</Radio.Group>
|
2019-07-24 10:34:55 +08:00
|
|
|
</div>
|
2022-05-11 19:43:54 +08:00
|
|
|
<ConfigProvider locale={locale}>
|
|
|
|
<Page
|
|
|
|
key={locale ? locale.locale : 'en' /* Have to refresh for production environment */}
|
|
|
|
/>
|
|
|
|
</ConfigProvider>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2019-07-24 10:34:55 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
```css
|
2019-12-25 19:30:58 +08:00
|
|
|
.site-config-provider-calendar-wrapper {
|
|
|
|
width: 319px;
|
|
|
|
border: 1px solid #d9d9d9;
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
|
2019-07-24 10:34:55 +08:00
|
|
|
.locale-components {
|
|
|
|
padding-top: 16px;
|
2021-01-30 19:39:02 +08:00
|
|
|
border-top: 1px solid #d9d9d9;
|
2019-07-24 10:34:55 +08:00
|
|
|
}
|
|
|
|
|
2019-12-25 22:13:04 +08:00
|
|
|
.code-box-demo .example {
|
2019-07-24 10:34:55 +08:00
|
|
|
margin: 16px 0;
|
|
|
|
}
|
|
|
|
|
2019-12-25 22:13:04 +08:00
|
|
|
.code-box-demo .example > * {
|
2019-07-24 10:34:55 +08:00
|
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.change-locale {
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
```
|
2019-12-25 19:30:58 +08:00
|
|
|
|
|
|
|
<style>
|
|
|
|
[data-theme="dark"] .locale-components {
|
|
|
|
border-top: 1px solid #303030;
|
|
|
|
}
|
|
|
|
[data-theme="dark"] .site-config-provider-calendar-wrapper {
|
|
|
|
border: 1px solid #303030;
|
|
|
|
}
|
|
|
|
</style>
|