mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 03:14:07 +08:00
103 lines
4.7 KiB
TypeScript
103 lines
4.7 KiB
TypeScript
|
import React from 'react';
|
|||
|
import { Alert, Flex, Typography } from 'antd';
|
|||
|
|
|||
|
const Demo = () => {
|
|||
|
const [expandA, setExpandA] = React.useState(false);
|
|||
|
const [expandB, setExpandB] = React.useState(true);
|
|||
|
|
|||
|
return (
|
|||
|
<Flex gap="large" vertical style={{ maxWidth: 600 }}>
|
|||
|
<Flex gap="middle" vertical>
|
|||
|
<div>关闭提示</div>
|
|||
|
<Alert showIcon closable message="你好!欢迎使用专业版,你可以根据自身需求添加业务模块。" />
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message="帮助信息"
|
|||
|
description="你好,由于你的良好信用,我们决定赠送你三个月产品会员,欲了解会员特权与活动请进首页会员专区查看。"
|
|||
|
/>
|
|||
|
</Flex>
|
|||
|
<Flex gap="middle" vertical>
|
|||
|
<div>展开/收起提示</div>
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message={
|
|||
|
<div>
|
|||
|
<Typography.Paragraph ellipsis={!expandA && { rows: 2 }} style={{ marginBottom: 8 }}>
|
|||
|
提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。
|
|||
|
</Typography.Paragraph>
|
|||
|
<Typography.Link onClick={() => setExpandA((prev) => !prev)}>
|
|||
|
{expandA ? '收起' : '展开更多'}
|
|||
|
</Typography.Link>
|
|||
|
</div>
|
|||
|
}
|
|||
|
style={{ alignItems: 'baseline' }}
|
|||
|
/>
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message={
|
|||
|
<div>
|
|||
|
<Typography.Paragraph ellipsis={!expandB && { rows: 2 }} style={{ marginBottom: 8 }}>
|
|||
|
提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。提示信息超过2行时,可以使用将部分信息折叠,以减少空间占用。
|
|||
|
</Typography.Paragraph>
|
|||
|
<Typography.Link onClick={() => setExpandB((prev) => !prev)}>
|
|||
|
{expandB ? '收起' : '展开更多'}
|
|||
|
</Typography.Link>
|
|||
|
</div>
|
|||
|
}
|
|||
|
style={{ alignItems: 'baseline' }}
|
|||
|
/>
|
|||
|
</Flex>
|
|||
|
<Flex gap="middle" vertical>
|
|||
|
<div>执行其他操作</div>
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message="提示信息不超过一行时,按钮放在信息右侧。"
|
|||
|
action={<Typography.Link>相关操作</Typography.Link>}
|
|||
|
/>
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message={
|
|||
|
<div>
|
|||
|
<Typography.Paragraph style={{ marginBottom: 8 }}>
|
|||
|
提示信息超过一行,此时按钮按照从上至下的视觉流,放置在信息区下方,这样浏览起来更流畅,即先阅读提示信息,再根据信息判断执行什么操作。
|
|||
|
</Typography.Paragraph>
|
|||
|
<Flex gap={8}>
|
|||
|
<Typography.Link>相关操作1</Typography.Link>
|
|||
|
<Typography.Link>相关操作2</Typography.Link>
|
|||
|
</Flex>
|
|||
|
</div>
|
|||
|
}
|
|||
|
style={{ alignItems: 'baseline' }}
|
|||
|
/>
|
|||
|
<Alert
|
|||
|
showIcon
|
|||
|
closable
|
|||
|
message="提示标题"
|
|||
|
description={
|
|||
|
<div>
|
|||
|
<Typography.Paragraph style={{ marginBottom: 8 }}>
|
|||
|
提示信息超过一行,此时按钮按照从上至下的视觉流,放置在信息区下方,这样浏览起来更流畅,即先阅读提示信息,再根据信息判断执行什么操作。
|
|||
|
</Typography.Paragraph>
|
|||
|
<Flex gap={8}>
|
|||
|
<Typography.Link>相关操作1</Typography.Link>
|
|||
|
<Typography.Link>相关操作2</Typography.Link>
|
|||
|
</Flex>
|
|||
|
</div>
|
|||
|
}
|
|||
|
/>
|
|||
|
<Typography.Paragraph type="secondary">
|
|||
|
建议统一使用Link
|
|||
|
Button,明确可点击的同时,整体视觉也更和谐;当提示信息不超一行时,按钮放在信息右侧;当提示信息超过一行,按钮放置在信息区下方;这样能够确保用户的浏览动线一致,即先阅读提示信息,再根据信息判断执行什么操作。
|
|||
|
</Typography.Paragraph>
|
|||
|
</Flex>
|
|||
|
</Flex>
|
|||
|
);
|
|||
|
};
|
|||
|
|
|||
|
export default Demo;
|