mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 14:53:16 +08:00
Merge branch 'ddcat1115-1643fix'
This commit is contained in:
commit
137f9071ac
28
AUTHORS.txt
28
AUTHORS.txt
@ -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>
|
||||||
|
@ -147,7 +147,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.anticon {
|
.anticon {
|
||||||
width: 14px;
|
min-width: 14px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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) 的写法来提升编码的愉悦感。
|
||||||
|
214
docs/spec/layout/demo/aside-collapse.md
Normal file
214
docs/spec/layout/demo/aside-collapse.md
Normal 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%;
|
||||||
|
}
|
||||||
|
````
|
@ -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": [
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user