mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
766748a501
* feat: change visible to open for Drawer * refactor: use open internal either * feat: add warning when use visible * test: Fix test Co-authored-by: 二货机器人 <smith3816@gmail.com>
210 lines
5.4 KiB
Markdown
210 lines
5.4 KiB
Markdown
---
|
|
order: 4
|
|
title:
|
|
zh-CN: 信息预览抽屉
|
|
en-US: Preview drawer
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
需要快速预览对象概要时使用,点击遮罩区关闭。
|
|
|
|
## en-US
|
|
|
|
Use Drawer to quickly preview details of an object, such as those in a list.
|
|
|
|
```tsx
|
|
import { Avatar, Col, Divider, Drawer, List, Row } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
interface DescriptionItemProps {
|
|
title: string;
|
|
content: React.ReactNode;
|
|
}
|
|
|
|
const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
|
|
<div className="site-description-item-profile-wrapper">
|
|
<p className="site-description-item-profile-p-label">{title}:</p>
|
|
{content}
|
|
</div>
|
|
);
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const showDrawer = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const onClose = () => {
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<List
|
|
dataSource={[
|
|
{
|
|
id: 1,
|
|
name: 'Lily',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Lily',
|
|
},
|
|
]}
|
|
bordered
|
|
renderItem={item => (
|
|
<List.Item
|
|
key={item.id}
|
|
actions={[
|
|
<a onClick={showDrawer} key={`a-${item.id}`}>
|
|
View Profile
|
|
</a>,
|
|
]}
|
|
>
|
|
<List.Item.Meta
|
|
avatar={
|
|
<Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
|
|
}
|
|
title={<a href="https://ant.design/index-cn">{item.name}</a>}
|
|
description="Progresser XTech"
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
<Drawer width={640} placement="right" closable={false} onClose={onClose} open={open}>
|
|
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
|
|
User Profile
|
|
</p>
|
|
<p className="site-description-item-profile-p">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 className="site-description-item-profile-p">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="XTech" />
|
|
</Col>
|
|
<Col span={12}>
|
|
<DescriptionItem title="Supervisor" content={<a>Lin</a>} />
|
|
</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 className="site-description-item-profile-p">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>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
```css
|
|
.site-description-item-profile-wrapper {
|
|
margin-bottom: 7px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
font-size: 14px;
|
|
line-height: 1.5715;
|
|
}
|
|
|
|
[data-theme='compact'] .site-description-item-profile-wrapper {
|
|
font-size: 12px;
|
|
line-height: 1.66667;
|
|
}
|
|
|
|
.ant-drawer-body p.site-description-item-profile-p {
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
font-size: 16px;
|
|
line-height: 1.5715;
|
|
}
|
|
|
|
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
|
|
font-size: 14px;
|
|
line-height: 1.66667;
|
|
}
|
|
|
|
.site-description-item-profile-p-label {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
```
|
|
|
|
<style>
|
|
[data-theme="dark"] .site-description-item-profile-p {
|
|
color: rgba(255,255,255,0.85);
|
|
}
|
|
[data-theme="dark"] .site-description-item-profile-wrapper {
|
|
color: rgba(255,255,255,0.65);
|
|
}
|
|
</style>
|