ant-design/components/drawer/demo/user-profile.md

190 lines
4.9 KiB
Markdown
Raw Normal View History

2018-06-03 22:00:27 +08:00
---
2018-06-28 16:17:22 +08:00
order: 4
2018-06-03 22:00:27 +08:00
title:
2018-06-22 15:46:21 +08:00
zh-CN: 信息预览抽屉
en-US: Preview drawer
2018-06-03 22:00:27 +08:00
---
## zh-CN
2018-06-26 16:51:51 +08:00
需要快速预览对象概要时使用,点击遮罩区关闭。
2018-06-22 15:46:21 +08:00
2018-06-03 22:00:27 +08:00
## en-US
2018-06-26 16:51:51 +08:00
Use when you need to quickly preview the outline of the object. Such as list item preview.
2018-06-03 22:00:27 +08:00
```jsx
2018-06-22 15:46:21 +08:00
import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
2018-06-03 22:00:27 +08:00
const pStyle = {
fontSize: 16,
color: 'rgba(0,0,0,0.85)',
lineHeight: '24px',
display: 'block',
marginBottom: 16,
};
const DescriptionItem = ({ title, content }) => {
return (
<div
style={{
fontSize: 14,
lineHeight: '22px',
marginBottom: 7,
color: 'rgba(0,0,0,0.65)',
}}
>
<p
style={{
marginRight: 8,
display: 'inline-block',
color: 'rgba(0,0,0,0.85)',
}}
>
{title}:
</p>
{content}
</div>
);
};
2018-06-28 16:17:22 +08:00
class App extends React.Component {
state = { visible: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
2018-06-29 11:57:33 +08:00
this.setState({
visible: false,
});
2018-06-28 16:17:22 +08:00
};
2018-06-03 22:00:27 +08:00
render() {
return (
<div>
2018-06-22 15:46:21 +08:00
<List
dataSource={[
{
name: 'Lily',
},
{
name: 'Lily',
},
]}
bordered
renderItem={item => (
<List.Item key={item.id} actions={[<a onClick={this.showDrawer}>View Profile</a>]}>
<List.Item.Meta
avatar={
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
}
2018-06-26 17:17:06 +08:00
title={<a href="https://ant.design/index-cn">{item.name}</a>}
2018-06-22 15:46:21 +08:00
description="Progresser AFX"
/>
</List.Item>
)}
/>
2018-06-03 22:00:27 +08:00
<Drawer
width={640}
placement="right"
closable={false}
onClose={this.onClose}
visible={this.state.visible}
>
<p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
<p style={pStyle}>Personal</p>
<Row>
<Col span={12}>
<DescriptionItem title="Full Name" content="Lily" />{' '}
</Col>
<Col span={12}>
<DescriptionItem title="Account" content="AntDesign@example.com" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="City" content="HangZhou" />
</Col>
<Col span={12}>
<DescriptionItem title="Country" content="China🇨🇳" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Birthday" content="February 2,1900" />
</Col>
<Col span={12}>
<DescriptionItem title="Website" content="-" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Message"
content="Make things as simple as possible but no simpler."
/>
</Col>
</Row>
<Divider />
<p style={pStyle}>Company</p>
<Row>
<Col span={12}>
<DescriptionItem title="Position" content="Programmer" />
</Col>
<Col span={12}>
<DescriptionItem title="Responsibilities" content="Coding" />
</Col>
</Row>
<Row>
<Col span={12}>
<DescriptionItem title="Department" content="AFX" />
</Col>
<Col span={12}>
2018-06-22 15:46:21 +08:00
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
2018-06-03 22:00:27 +08:00
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Skills"
content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
/>
</Col>
</Row>
<Divider />
<p style={pStyle}>Contacts</p>
<Row>
<Col span={12}>
<DescriptionItem title="Email" content="AntDesign@example.com" />
</Col>
<Col span={12}>
<DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
</Col>
</Row>
<Row>
<Col span={24}>
<DescriptionItem
title="Github"
content={
<a href="http://github.com/ant-design/ant-design/">
github.com/ant-design/ant-design/
</a>
}
/>
</Col>
</Row>
</Drawer>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
```
2018-06-29 11:57:33 +08:00
<style>
#_hj_feedback_container{
display:none
}
</style>