mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

site: add button to change language

Browse Source
This commit is contained in:
Benjy Cui 2016-04-25 12:07:15 +08:00
parent 5909438ed3
commit f884a6d260
7 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index-en.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ant Design - 一个 UI 设计语言</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="./index.css"/>
<!--[if lt IE 10]>
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
</head>
<body>
<div id="react-content"></div>
<script src="./en-US.js"></script>
<script src="./index.js"></script>
</body>
</html>

13
site/component/Header/index.jsx
View File

@ -4,7 +4,7 @@ import { Link } from 'react-router';
import enquire from 'enquire.js'; import enquire from 'enquire.js';
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
import classNames from 'classnames'; import classNames from 'classnames';
import { Select, Menu, Row, Col, Icon } from 'antd'; import { Select, Menu, Row, Col, Icon, Button } from 'antd';
const Option = Select.Option; const Option = Select.Option;
import './index.less'; import './index.less';
@ -78,6 +78,14 @@ export default class Header extends React.Component {
return option.props['data-label'].indexOf(value.toLowerCase()) > -1; return option.props['data-label'].indexOf(value.toLowerCase()) > -1;
} }
handleLangChange = () => {
if (typeof localStorage !== 'undefined') {
const locale = this.context.intl.locale === 'zh-CN' ? 'en-US' : 'zh-CN';
localStorage.setItem('locale', locale);
location.reload();
}
}
render() { render() {
const routes = this.props.routes; const routes = this.props.routes;
let activeMenuItem = routes[1].path || 'home'; let activeMenuItem = routes[1].path || 'home';
@ -135,6 +143,9 @@ export default class Header extends React.Component {
{options} {options}
</Select> </Select>
</div> </div>
<Button id="lang" type="ghost" size="small" onClick={this.handleLangChange}>
<FormattedMessage id="app.header.lang" />
</Button>
<Menu mode={this.state.menuMode} selectedKeys={[activeMenuItem]} id="nav"> <Menu mode={this.state.menuMode} selectedKeys={[activeMenuItem]} id="nav">
<Menu.Item key="home"> <Menu.Item key="home">
<Link to="/"> <Link to="/">

5
site/component/Header/index.less
View File

@ -63,6 +63,11 @@
box-shadow: none; box-shadow: none;
} }
#lang {
float: right;
margin-top: 29px;
}
#nav { #nav {
border: 0; border: 0;
float: right; float: right;

1
site/component/Home/index.jsx
View File

@ -62,6 +62,7 @@ export default class Home extends React.Component {
background: #777; background: #777;
box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777; box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
} }
#lang,
#nav a { #nav a {
color: #eee; color: #eee;
transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);

3
site/entry/en-US.js
View File

@ -1,6 +1,6 @@
import appLocaleData from 'react-intl/locale-data/en'; import appLocaleData from 'react-intl/locale-data/en';
window.appLocale = { module.exports = {
locale: 'en-US', locale: 'en-US',
data: appLocaleData, data: appLocaleData,
messages: { messages: {
@ -10,5 +10,6 @@ window.appLocale = {
'app.header.menu.react': 'React', 'app.header.menu.react': 'React',
'app.header.menu.spec': 'Specification', 'app.header.menu.spec': 'Specification',
'app.header.menu.resource': 'Resource', 'app.header.menu.resource': 'Resource',
'app.header.lang': '中文',
}, },
}; };

8
site/entry/index.jsx
View File

@ -14,6 +14,8 @@ import reactComponents from '../../_data/react-components';
import spec from '../../_data/spec'; import spec from '../../_data/spec';
import resource from '../../_data/resource'; import resource from '../../_data/resource';
import config from '../website.config'; import config from '../website.config';
import enLocale from './en-US.js';
import cnLocale from './zh-CN.js';
import { createHashHistory } from 'history'; import { createHashHistory } from 'history';
// useRouterHistory creates a composable higher-order function // useRouterHistory creates a composable higher-order function
@ -50,8 +52,12 @@ if (!location.port) {
/* eslint-enable */ /* eslint-enable */
} }
const appLocale = window.appLocale; const isZhCN =
(typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') ||
(navigator.language === 'zh-CN');
const appLocale = isZhCN ? cnLocale : enLocale;
addLocaleData(appLocale.data); addLocaleData(appLocale.data);
console.log(appLocale);
ReactDOM.render( ReactDOM.render(
<IntlProvider locale={appLocale.locale} messages={appLocale.messages}> <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>

3
site/entry/zh-CN.js
View File

@ -1,6 +1,6 @@
import appLocaleData from 'react-intl/locale-data/zh'; import appLocaleData from 'react-intl/locale-data/zh';
window.appLocale = { module.exports = {
locale: 'zh-CN', locale: 'zh-CN',
data: appLocaleData, data: appLocaleData,
messages: { messages: {
@ -10,5 +10,6 @@ window.appLocale = {
'app.header.menu.react': '组件', 'app.header.menu.react': '组件',
'app.header.menu.spec': '语言', 'app.header.menu.spec': '语言',
'app.header.menu.resource': '资源', 'app.header.menu.resource': '资源',
'app.header.lang': 'EN',
}, },
}; };