test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 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 debounce from 'lodash.debounce';
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;
import './index.less';
@ -78,6 +78,14 @@ export default class Header extends React.Component {
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() {
const routes = this.props.routes;
let activeMenuItem = routes[1].path || 'home';
@ -135,6 +143,9 @@ export default class Header extends React.Component {
{options}
</Select>
</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.Item key="home">
<Link to="/">

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

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

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

@ -62,6 +62,7 @@ export default class Home extends React.Component {
background: #777;
box-shadow: 0 7px 0 0 #777, 0 14px 0 0 #777;
}
#lang,
#nav a {
color: #eee;
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';
window.appLocale = {
module.exports = {
locale: 'en-US',
data: appLocaleData,
messages: {
@ -10,5 +10,6 @@ window.appLocale = {
'app.header.menu.react': 'React',
'app.header.menu.spec': 'Specification',
'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 resource from '../../_data/resource';
import config from '../website.config';
import enLocale from './en-US.js';
import cnLocale from './zh-CN.js';
import { createHashHistory } from 'history';
// useRouterHistory creates a composable higher-order function
@ -50,8 +52,12 @@ if (!location.port) {
/* 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);
console.log(appLocale);
ReactDOM.render(
<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';
window.appLocale = {
module.exports = {
locale: 'zh-CN',
data: appLocaleData,
messages: {
@ -10,5 +10,6 @@ window.appLocale = {
'app.header.menu.react': '组件',
'app.header.menu.spec': '语言',
'app.header.menu.resource': '资源',
'app.header.lang': 'EN',
},
};