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:
afc163
commit
137f9071ac
28
AUTHORS.txt
28
AUTHORS.txt
@ -1,5 +1,8 @@
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bernie <bernie.wangbj@gmail.com>
|
||||
Bozhao <yubz86@gmail.com>
|
||||
Bruce Mitchener <bruce.mitchener@gmail.com>
|
||||
Bruno Maia <bruno.mm.maia@gmail.com>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Cee Cirno <i@cee.moe>
|
||||
Daqi Song <dqaria@gmail.com>
|
||||
@ -12,18 +15,31 @@ James <james@schoolshape.com>
|
||||
KgTong <kgtong1992@gmail.com>
|
||||
Leon Shi <superRaytin@163.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>
|
||||
Pyiner <lijiuyang1992@gmail.com>
|
||||
Qiaosen Huang <joesonw@gmail.com>
|
||||
RaoHai <surgesoft@gmail.com>
|
||||
Sebastian Blade <blade254353074@hotmail.com>
|
||||
ShiTengFei <shitengfei@goyoo.com>
|
||||
SimaQ <sima.zhang1990@gmail.com>
|
||||
The Gitter Badger <badger@gitter.im>
|
||||
Wei Zhu <yesmeck@gmail.com>
|
||||
Yuwei Ba <i@xiaoba.me>
|
||||
Zap <a124116186@qq.com>
|
||||
afc163 <afc163@gmail.com>
|
||||
bang <sqibang@gmail.com>
|
||||
bang88 <sqibang@gmail.com>
|
||||
chencheng (云谦) <sorrycc@gmail.com>
|
||||
ddcat1115 <ddcat1115@gmail.com>
|
||||
devqin <devqin@gmail.com>
|
||||
ecofe <150641329@qq.com>
|
||||
elrrrrrrr <elrrrrrrr@gmail.com>
|
||||
fengmk2 <m@fengmk2.com>
|
||||
genie <genie88@163.com>
|
||||
haoxin <coderhaoxin@outlook.com>
|
||||
hi-caicai <hi@cai-cai.me>
|
||||
ioldfish <fish.wangl@gmail.com>
|
||||
jiang <155259966@qq.com>
|
||||
kasinooya <kasinooya@gmail.com>
|
||||
@ -31,24 +47,30 @@ leon.shi <superRaytin@163.com>
|
||||
lgmcolin <gengmin.lgm@gmail.com>
|
||||
lgmcolin <lgmcolin@gmail.com>
|
||||
pizn <pizner@gmail.com>
|
||||
plandem <plandem@gmail.com>
|
||||
popomore <sakura9515@gmail.com>
|
||||
qubaoming <qubaoming@didichuxing.com>
|
||||
shelwin <wxfans@gmail.com>
|
||||
shouyong <enlangs@163.com>
|
||||
simaQ <sima.zhang1990@gmail.com>
|
||||
snadn <snadn@snadn.cn>
|
||||
sorrycc <sorrycc@gmail.com>
|
||||
swindme <swindme@163.com>
|
||||
tom <caolvchong@gmail.com>
|
||||
ustccjw <317713370@qq.com>
|
||||
warmhug <hualei5280@gmail.com>
|
||||
xiaoshuai <tangshuaiji@tangshuaijideMacBook-Pro.local>
|
||||
wizawu <wizawu@gmail.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
yubozhao <yubz86@gmail.com>
|
||||
yuche <i@yuche.me>
|
||||
z <haig8@msn.com>
|
||||
zack <zxyah@126.com>
|
||||
zhangpc <zhangpc@tenxcloud.com>
|
||||
zhujun24 <zhujun87654321@gmail.com>
|
||||
zilong <jzlxiaohei@163.com>
|
||||
zinkey <yaya@uloveit.com.cn>
|
||||
低位 <zhujun87654321@gmail.com>
|
||||
偏右 <afc163@gmail.com>
|
||||
唐帅佶 <tangshuaiji@tangshuaijideMacBook-Pro.local>
|
||||
白羊座小葛 <abeyuhang@gmail.com>
|
||||
逸达 <dqaria@gmail.com>
|
||||
闲耘™ <hotoo.cn@gmail.com>
|
||||
|
||||
@ -147,7 +147,7 @@
|
||||
}
|
||||
|
||||
.anticon {
|
||||
width: 14px;
|
||||
min-width: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -148,13 +148,13 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
|
||||
通过 `import { Button } from 'antd';` 引入会加载 antd 下所有的模块，如果要按需加载可以通过以下的写法来引用。
|
||||
|
||||
```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) 来进行按需加载，加入这个插件后。你可以仍然这么写：
|
||||
|
||||
```jsx
|
||||
import { Button } form 'antd';
|
||||
import { Button } from 'antd';
|
||||
```
|
||||
|
||||
插件会帮你转换成上面的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-antd#usage) 属性可以做到模块样式的按需自动加载。
|
||||
@ -167,4 +167,4 @@ import { Button } form 'antd';
|
||||
## 小甜点
|
||||
|
||||
- 你可以享用 `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",
|
||||
"pub": "antd-tools run update-self && antd-tools run pub",
|
||||
"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": {
|
||||
"moduleFileExtensions": [
|
||||
|
||||
@ -22,7 +22,7 @@ export default class Footer extends React.Component {
|
||||
title: 'antd 新版发布！',
|
||||
content: (
|
||||
<div>
|
||||
<img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" />
|
||||
<img src="https://os.alipayobjects.com/rmsportal/nyqBompsynAQCpJ.svg" alt="Ant Design" />
|
||||
<p>
|
||||
您好，<a target="_blank" href="/#/changelog">antd@1.0</a> 已正式发布，欢迎升级。
|
||||
如果您还需要使用旧版，请查阅 <a target="_blank" href="http://012x.ant.design">012x.ant.design</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user