Merge branch 'ddcat1115-1643fix'

This commit is contained in:
afc163 2016-05-16 14:35:50 +08:00
commit 137f9071ac
6 changed files with 245 additions and 9 deletions

View File

@ -1,5 +1,8 @@
Benjy Cui <benjytrys@gmail.com> Benjy Cui <benjytrys@gmail.com>
Bernie <bernie.wangbj@gmail.com>
Bozhao <yubz86@gmail.com> Bozhao <yubz86@gmail.com>
Bruce Mitchener <bruce.mitchener@gmail.com>
Bruno Maia <bruno.mm.maia@gmail.com>
Cam Song <neosoyn@gmail.com> Cam Song <neosoyn@gmail.com>
Cee Cirno <i@cee.moe> Cee Cirno <i@cee.moe>
Daqi Song <dqaria@gmail.com> Daqi Song <dqaria@gmail.com>
@ -12,18 +15,31 @@ James <james@schoolshape.com>
KgTong <kgtong1992@gmail.com> KgTong <kgtong1992@gmail.com>
Leon Shi <superRaytin@163.com> Leon Shi <superRaytin@163.com>
MG12 <wuzhao.mail@gmail.com> MG12 <wuzhao.mail@gmail.com>
Ma Tianxiao <matx2215@outlook.com>
Marshall Chen <Juniors.fei@gmail.com>
Mr.Tone <vector@malubei.com>
Neverland <chenjiahan@buaa.edu.cn> Neverland <chenjiahan@buaa.edu.cn>
Pyiner <lijiuyang1992@gmail.com> Pyiner <lijiuyang1992@gmail.com>
Qiaosen Huang <joesonw@gmail.com>
RaoHai <surgesoft@gmail.com> RaoHai <surgesoft@gmail.com>
Sebastian Blade <blade254353074@hotmail.com>
ShiTengFei <shitengfei@goyoo.com>
SimaQ <sima.zhang1990@gmail.com> SimaQ <sima.zhang1990@gmail.com>
The Gitter Badger <badger@gitter.im> Wei Zhu <yesmeck@gmail.com>
Yuwei Ba <i@xiaoba.me> Yuwei Ba <i@xiaoba.me>
Zap <a124116186@qq.com> Zap <a124116186@qq.com>
afc163 <afc163@gmail.com> afc163 <afc163@gmail.com>
bang <sqibang@gmail.com>
bang88 <sqibang@gmail.com>
chencheng (云谦) <sorrycc@gmail.com> chencheng (云谦) <sorrycc@gmail.com>
ddcat1115 <ddcat1115@gmail.com>
devqin <devqin@gmail.com>
ecofe <150641329@qq.com>
elrrrrrrr <elrrrrrrr@gmail.com> elrrrrrrr <elrrrrrrr@gmail.com>
fengmk2 <m@fengmk2.com>
genie <genie88@163.com> genie <genie88@163.com>
haoxin <coderhaoxin@outlook.com> haoxin <coderhaoxin@outlook.com>
hi-caicai <hi@cai-cai.me>
ioldfish <fish.wangl@gmail.com> ioldfish <fish.wangl@gmail.com>
jiang <155259966@qq.com> jiang <155259966@qq.com>
kasinooya <kasinooya@gmail.com> kasinooya <kasinooya@gmail.com>
@ -31,24 +47,30 @@ leon.shi <superRaytin@163.com>
lgmcolin <gengmin.lgm@gmail.com> lgmcolin <gengmin.lgm@gmail.com>
lgmcolin <lgmcolin@gmail.com> lgmcolin <lgmcolin@gmail.com>
pizn <pizner@gmail.com> pizn <pizner@gmail.com>
plandem <plandem@gmail.com>
popomore <sakura9515@gmail.com> popomore <sakura9515@gmail.com>
qubaoming <qubaoming@didichuxing.com>
shelwin <wxfans@gmail.com> shelwin <wxfans@gmail.com>
shouyong <enlangs@163.com> shouyong <enlangs@163.com>
simaQ <sima.zhang1990@gmail.com> simaQ <sima.zhang1990@gmail.com>
snadn <snadn@snadn.cn>
sorrycc <sorrycc@gmail.com> sorrycc <sorrycc@gmail.com>
swindme <swindme@163.com>
tom <caolvchong@gmail.com> tom <caolvchong@gmail.com>
ustccjw <317713370@qq.com> ustccjw <317713370@qq.com>
warmhug <hualei5280@gmail.com> warmhug <hualei5280@gmail.com>
xiaoshuai <tangshuaiji@tangshuaijideMacBook-Pro.local> wizawu <wizawu@gmail.com>
yiminghe <yiminghe@gmail.com> yiminghe <yiminghe@gmail.com>
yubozhao <yubz86@gmail.com> yubozhao <yubz86@gmail.com>
yuche <i@yuche.me> yuche <i@yuche.me>
z <haig8@msn.com>
zack <zxyah@126.com>
zhangpc <zhangpc@tenxcloud.com> zhangpc <zhangpc@tenxcloud.com>
zhujun24 <zhujun87654321@gmail.com> zhujun24 <zhujun87654321@gmail.com>
zilong <jzlxiaohei@163.com> zilong <jzlxiaohei@163.com>
zinkey <yaya@uloveit.com.cn> zinkey <yaya@uloveit.com.cn>
低位 <zhujun87654321@gmail.com> 低位 <zhujun87654321@gmail.com>
偏右 <afc163@gmail.com> 偏右 <afc163@gmail.com>
唐帅佶 <tangshuaiji@tangshuaijideMacBook-Pro.local>
白羊座小葛 <abeyuhang@gmail.com> 白羊座小葛 <abeyuhang@gmail.com>
逸达 <dqaria@gmail.com> 逸达 <dqaria@gmail.com>
闲耘™ <hotoo.cn@gmail.com>

View File

@ -147,7 +147,7 @@
} }
.anticon { .anticon {
width: 14px; min-width: 14px;
margin-right: 8px; margin-right: 8px;
} }
} }

View File

@ -148,13 +148,13 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
通过 `import { Button } from 'antd';` 引入会加载 antd 下所有的模块,如果要按需加载可以通过以下的写法来引用。 通过 `import { Button } from 'antd';` 引入会加载 antd 下所有的模块,如果要按需加载可以通过以下的写法来引用。
```jsx ```jsx
import Button form 'antd/lib/button'; import Button from 'antd/lib/button';
``` ```
如果你使用 babel我们推荐使用 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) 来进行按需加载,加入这个插件后。你可以仍然这么写: 如果你使用 babel我们推荐使用 [babel-plugin-antd](https://github.com/ant-design/babel-plugin-antd) 来进行按需加载,加入这个插件后。你可以仍然这么写:
```jsx ```jsx
import { Button } form 'antd'; import { Button } from 'antd';
``` ```
插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-antd#usage) 属性可以做到模块样式的按需自动加载。 插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-antd#usage) 属性可以做到模块样式的按需自动加载。
@ -167,4 +167,4 @@ import { Button } form 'antd';
## 小甜点 ## 小甜点
- 你可以享用 `npm` 生态圈里的所有模块。 - 你可以享用 `npm` 生态圈里的所有模块。
- 我们使用了 `babel`,试试用 [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/) 的写法来提升编码的愉悦感。 - 我们使用了 `babel`,试试用 [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。

View File

@ -0,0 +1,214 @@
---
order: 4
title: 可收起展开的侧边导航
---
页面横向空间有限时使用。侧边导航默认收起,点击底部按钮时展开。
````jsx
import { Menu, Breadcrumb, Icon } from 'antd';
import BrowserDemo from 'site/component/BrowserDemo';
const SubMenu = Menu.SubMenu;
const AsideCollapse = React.createClass({
getInitialState() {
return {
collapse: true,
};
},
onCollapseChange() {
this.setState({
collapse: !this.state.collapse,
})
},
render() {
const collapse = this.state.collapse;
return (
<div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}>
<aside className="ant-layout-sider">
<div className="ant-layout-logo"></div>
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
<Menu.Item key="user">
<Icon type="user" /><span className="nav-text">导航一</span>
</Menu.Item>
<Menu.Item key="setting">
<Icon type="setting" /><span className="nav-text">导航二</span>
</Menu.Item>
<Menu.Item key="laptop">
<Icon type="laptop" /><span className="nav-text">导航三</span>
</Menu.Item>
<Menu.Item key="notification">
<Icon type="notification" /><span className="nav-text">导航四</span>
</Menu.Item>
<Menu.Item key="folder">
<Icon type="folder" /><span className="nav-text">导航五</span>
</Menu.Item>
</Menu>
<div className="ant-aside-action" onClick={this.onCollapseChange}>
{collapse ? <Icon type="right" /> : <Icon type="left" />}
</div>
</aside>
<div className="ant-layout-main">
<div className="ant-layout-header"></div>
<div className="ant-layout-breadcrumb">
<Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb>
</div>
<div className="ant-layout-container">
<div className="ant-layout-content">
<div style={{ height: 220 }}>
内容区域
</div>
</div>
</div>
<div className="ant-layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div>
</div>
</div>
);
},
});
ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
````
````css
.ant-layout-aside {
position: relative;
min-height: 100%;
}
.ant-layout-aside .ant-layout-logo {
width: 150px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 24px 16px 28px;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-logo {
width: 32px;
margin: 16px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: visible;
padding-bottom: 24px;
height: 100%;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-sider {
width: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-sider > .ant-menu {
margin-bottom: 20px;
}
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
margin: 16px 0;
}
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
transition: font-size .2s;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
transition: all 0s ease;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
display: none;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
background: #2db7f5;
color: #fff;
transition: all 0s ease;
}
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
display: inline-block;
vertical-align: top;
background: #2db7f5;
color: #fff;
padding-right: 16px;
border-radius: 0 5px 5px 0;
}
/* 实际使用中需要改成 position: fixed */
.ant-layout-aside .ant-aside-action {
height: 42px;
width: 224px;
position: absolute;
bottom: 0;
background: #656565;
color: #fff;
text-align: center;
line-height: 42px;
cursor: pointer;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-aside-action {
width: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.ant-layout-aside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px;
transition: all 0.3s ease;
}
.ant-layout-aside-collapse .ant-layout-main {
margin-left: 64px;
transition: all 0.3s ease;
}
.ant-layout-aside .ant-layout-container {
margin: 24px 16px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
padding: 24px;
}
.ant-layout-aside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}
````

View File

@ -129,7 +129,7 @@
"pre-publish": "node ./scripts/prepub", "pre-publish": "node ./scripts/prepub",
"pub": "antd-tools run update-self && antd-tools run pub", "pub": "antd-tools run update-self && antd-tools run pub",
"beta": "antd-tools run beta", "beta": "antd-tools run beta",
"authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt" "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt"
}, },
"jest": { "jest": {
"moduleFileExtensions": [ "moduleFileExtensions": [

View File

@ -22,7 +22,7 @@ export default class Footer extends React.Component {
title: 'antd 新版发布!', title: 'antd 新版发布!',
content: ( content: (
<div> <div>
<img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" /> <img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" alt="Ant Design" />
<p> <p>
您好<a target="_blank" href="/#/changelog">antd@1.0</a> 已正式发布欢迎升级 您好<a target="_blank" href="/#/changelog">antd@1.0</a> 已正式发布欢迎升级
如果您还需要使用旧版请查阅 <a target="_blank" href="http://012x.ant.design">012x.ant.design</a> 如果您还需要使用旧版请查阅 <a target="_blank" href="http://012x.ant.design">012x.ant.design</a>