ant-design/components/queue-anim/demo/page.md

77 lines
2.0 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 6
title: 一个复杂些的例子
---
2015-10-21 17:53:38 +08:00
2015-10-23 22:37:42 +08:00
模拟一个完整的页面。
2015-10-21 17:53:38 +08:00
````jsx
import { QueueAnim, Button } from 'antd';
2015-10-21 17:53:38 +08:00
const Test = React.createClass({
2015-10-21 17:53:38 +08:00
getInitialState() {
return {
2015-10-23 22:37:42 +08:00
show: true
};
2015-10-21 17:53:38 +08:00
},
onClick() {
this.setState({
2015-10-23 22:37:42 +08:00
show: !this.state.show
});
2015-10-21 17:53:38 +08:00
},
render() {
2016-04-13 15:00:47 +08:00
const page = this.state.show ? [
<div className="demo-header" key="header">
<div className="logo">
<img alt="logo" width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
2016-04-13 15:00:47 +08:00
<span>logo</span>
</div>
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
</QueueAnim>
</div>,
<QueueAnim className="demo-content" key="content" delay={300}>
<div className="demo-title" key="title">我是标题</div>
<div className="demo-kp" key="b">
<QueueAnim component="ul">
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
</QueueAnim>
</div>
<div className="demo-title" key="title2">我是标题</div>
<div className="demo-listBox">
<QueueAnim className="demo-list" delay={500}>
<div className="title" key="title3"></div>
<QueueAnim component="ul" type="bottom" key="li">
2015-10-23 22:37:42 +08:00
<li key="0"></li>
<li key="1"></li>
<li key="2"></li>
<li key="3"></li>
<li key="4"></li>
2015-10-23 22:37:42 +08:00
</QueueAnim>
</QueueAnim>
2016-04-13 15:00:47 +08:00
</div>
</QueueAnim>,
<QueueAnim delay={1000} type="bottom" key="footerBox">
<div className="demo-footer" key="footer"></div>
</QueueAnim>
] : null;
return (
<div>
<p className="buttons">
<Button type="primary" onClick={this.onClick}>切换</Button>
</p>
<QueueAnim type={['right', 'left']}>{page}</QueueAnim>
2015-10-21 17:53:38 +08:00
</div>
);
}
});
ReactDOM.render(<Test />, mountNode);
2015-10-21 17:53:38 +08:00
````