forked from ant-design/ant-design
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature
- Loading branch information
Showing
162 changed files
with
12,301 additions
and
6,018 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import ms_MY from '../../date-picker/locale/ms_MY'; | ||
| export default ms_MY; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| --- | ||
| 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'; | ||
| import zhCN from 'antd/lib/locale/zh_CN'; | ||
| import moment from 'moment'; | ||
| import 'moment/locale/zh-cn'; | ||
|
|
||
| moment.locale('en'); | ||
|
|
||
| const { Option } = Select; | ||
| const { RangePicker } = DatePicker; | ||
|
|
||
| const columns = [ | ||
| { | ||
| title: 'Name', | ||
| dataIndex: 'name', | ||
| filters: [ | ||
| { | ||
| text: 'filter1', | ||
| value: 'filter1', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'Age', | ||
| dataIndex: 'age', | ||
| }, | ||
| ]; | ||
|
|
||
| class Page extends React.Component { | ||
| state = { | ||
| visible: false, | ||
| }; | ||
|
|
||
| showModal = () => { | ||
| this.setState({ visible: true }); | ||
| }; | ||
|
|
||
| hideModal = () => { | ||
| this.setState({ visible: false }); | ||
| }; | ||
|
|
||
| render() { | ||
| const info = () => { | ||
| Modal.info({ | ||
| title: 'some info', | ||
| content: 'some info', | ||
| }); | ||
| }; | ||
| const confirm = () => { | ||
| Modal.confirm({ | ||
| title: 'some info', | ||
| content: 'some info', | ||
| }); | ||
| }; | ||
| 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={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"> | ||
| <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} /> | ||
| </div> | ||
| <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}> | ||
| <Calendar fullscreen={false} value={moment()} /> | ||
| </div> | ||
| <div className="example"> | ||
| <Table dataSource={[]} columns={columns} /> | ||
| </div> | ||
| <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}> | ||
| <p>Locale Modal</p> | ||
| </Modal> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| class App extends React.Component { | ||
| constructor() { | ||
| super(); | ||
| this.state = { | ||
| locale: null, | ||
| }; | ||
| } | ||
|
|
||
| changeLocale = e => { | ||
| const localeValue = e.target.value; | ||
| this.setState({ locale: localeValue }); | ||
| if (!localeValue) { | ||
| moment.locale('en'); | ||
| } else { | ||
| moment.locale('zh-cn'); | ||
| } | ||
| }; | ||
|
|
||
| render() { | ||
| const { locale } = this.state; | ||
| return ( | ||
| <div> | ||
| <div className="change-locale"> | ||
| <span style={{ marginRight: 16 }}>Change locale of components: </span> | ||
| <Radio.Group defaultValue={undefined} onChange={this.changeLocale}> | ||
| <Radio.Button key="en" value={undefined}> | ||
| English | ||
| </Radio.Button> | ||
| <Radio.Button key="cn" value={zhCN}> | ||
| 中文 | ||
| </Radio.Button> | ||
| </Radio.Group> | ||
| </div> | ||
| <ConfigProvider locale={locale}> | ||
| <Page | ||
| key={locale ? locale.locale : 'en' /* Have to refresh for production environment */} | ||
| /> | ||
| </ConfigProvider> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<App />, mountNode); | ||
| ``` | ||
|
|
||
| ```css | ||
| .locale-components { | ||
| border-top: 1px solid #d9d9d9; | ||
| padding-top: 16px; | ||
| } | ||
|
|
||
| .example { | ||
| margin: 16px 0; | ||
| } | ||
|
|
||
| .example > * { | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| .change-locale { | ||
| margin-bottom: 16px; | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import CalendarLocale from 'rc-calendar/lib/locale/ms_MY'; | ||
| import TimePickerLocale from '../../time-picker/locale/ms_MY'; | ||
|
|
||
| // Merge into a locale object | ||
| const locale = { | ||
| lang: { | ||
| placeholder: 'Pilih tarikh', | ||
| rangePlaceholder: ['Tarikh mula', 'Tarikh akhir'], | ||
| ...CalendarLocale, | ||
| }, | ||
| timePickerLocale: { | ||
| ...TimePickerLocale, | ||
| }, | ||
| }; | ||
|
|
||
| // All settings at: | ||
| // https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json | ||
|
|
||
| export default locale; |
Oops, something went wrong.