mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
docs: add alert design page (#47037)
* docs: add alert design page * chore: code clean * fix: fallback style
This commit is contained in:
MadCcc
GitHub
parent
dfbcf0fb5b
commit
5068137a1b
@ -10,7 +10,7 @@ const useStyle = createStyles(({ token, css }) => ({
|
||||
fallback: css`
|
||||
width: 100%;
|
||||
> * {
|
||||
width: 100%;
|
||||
width: 100% !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
`,
|
||||
|
||||
39
components/alert/design/behavior-pattern.tsx
Normal file
39
components/alert/design/behavior-pattern.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
|
||||
|
||||
const BehaviorPattern: React.FC = () => (
|
||||
<BehaviorMap
|
||||
data={{
|
||||
id: '200000004',
|
||||
label: '了解页面/模块内需要关注的提示',
|
||||
children: [
|
||||
{
|
||||
id: '500000061',
|
||||
label: '了解提示信息',
|
||||
targetType: 'mvp',
|
||||
children: [
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解提示内容',
|
||||
link: 'components-alert-index-tab-design-demo-content',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
label: '了解提示类型',
|
||||
link: 'components-alert-index-tab-design-demo-type',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '200000005',
|
||||
label: '针对提示进行操作',
|
||||
targetType: 'extension',
|
||||
link: 'components-alert-index-tab-design-demo-action',
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default BehaviorPattern;
|
||||
102
components/alert/design/demo/action.tsx
Normal file
102
components/alert/design/demo/action.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
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;
|
||||
14
components/alert/design/demo/content.tsx
Normal file
14
components/alert/design/demo/content.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Alert, Flex } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex gap="middle" vertical style={{ maxWidth: 600 }}>
|
||||
<Alert message="你好！欢迎使用专业版，你可以根据自身需求添加业务模块。" />
|
||||
<Alert
|
||||
message="帮助信息"
|
||||
description="你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。"
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
61
components/alert/design/demo/type.tsx
Normal file
61
components/alert/design/demo/type.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import { Alert, Flex } from 'antd';
|
||||
|
||||
const Demo = () => (
|
||||
<Flex gap="large" vertical style={{ maxWidth: 600 }}>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>成功提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="success"
|
||||
message="恭喜！你所提交的信息已经审核通过，如有问题请联系客服。"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="success"
|
||||
message="已成功！"
|
||||
description="你所提交的信息已经审核通过，请及时跟进申请状况。如有问题，请联系审核人员或在线客服。"
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>信息提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="info"
|
||||
message="你好！欢迎使用专业版，你可以根据自身需求添加业务模块。"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="info"
|
||||
message="帮助信息"
|
||||
description="你好，由于你的良好信用，我们决定赠送你三个月产品会员，欲了解会员特权与活动请进首页会员专区查看。"
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>警告提示</div>
|
||||
<Alert
|
||||
showIcon
|
||||
type="warning"
|
||||
message="系统将于 15 : 00 - 17 : 00 进行升级，请及时保存你的资料！"
|
||||
/>
|
||||
<Alert
|
||||
showIcon
|
||||
type="warning"
|
||||
message="请注意"
|
||||
description="你所提交的信息已经审核失败，可以进入个人信箱查看原因，如有疑问，请联系客服人员。"
|
||||
/>
|
||||
</Flex>
|
||||
<Flex gap="middle" vertical>
|
||||
<div>错误提示</div>
|
||||
<Alert showIcon type="error" message="系统错误，请稍后重试。" />
|
||||
<Alert
|
||||
showIcon
|
||||
type="error"
|
||||
message="出错了！"
|
||||
description="你的账户会员使用权限将在3天后到期，请及时跟进申请状况。如有问题，请联系审核人员。"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
export default Demo;
|
||||
15
components/alert/index.$tab-design.zh-CN.md
Normal file
15
components/alert/index.$tab-design.zh-CN.md
Normal file
@ -0,0 +1,15 @@
|
||||
## 组件定义
|
||||
|
||||
Alert的本质是了解页面/模块内需要关注的提示
|
||||
|
||||
<code src="./design/behavior-pattern.tsx" inline></code>
|
||||
|
||||
## 基础使用
|
||||
|
||||
<code src="./design/demo/content" description="展示提示内容，也可以配合标题一起使用">了解提示内容</code>
|
||||
|
||||
<code src="./design/demo/type" description="配合底色和图标，了解提示类型（成功、信息、警告、错误）">了解提示类型</code>
|
||||
|
||||
## 交互变体
|
||||
|
||||
<code src="./design/demo/action" description="可对提示进行关闭、展开/收起，或执行其他操作">针对提示进行操作</code>
|
||||
Loading…
Reference in New Issue
Block a user