diff --git a/.dumi/theme/common/BehaviorMap/index.tsx b/.dumi/theme/common/BehaviorMap/index.tsx index 4868d8987a..722bed9278 100644 --- a/.dumi/theme/common/BehaviorMap/index.tsx +++ b/.dumi/theme/common/BehaviorMap/index.tsx @@ -10,7 +10,7 @@ const useStyle = createStyles(({ token, css }) => ({ fallback: css` width: 100%; > * { - width: 100%; + width: 100% !important; border-radius: 8px; } `, diff --git a/components/alert/design/behavior-pattern.tsx b/components/alert/design/behavior-pattern.tsx new file mode 100644 index 0000000000..631ea06304 --- /dev/null +++ b/components/alert/design/behavior-pattern.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap'; + +const BehaviorPattern: React.FC = () => ( + +); + +export default BehaviorPattern; diff --git a/components/alert/design/demo/action.tsx b/components/alert/design/demo/action.tsx new file mode 100644 index 0000000000..ddb849ab6c --- /dev/null +++ b/components/alert/design/demo/action.tsx @@ -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 ( + + +
关闭提示
+ + + + +
展开/收起提示
+ + + 提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。 + + setExpandA((prev) => !prev)}> + {expandA ? '收起' : '展开更多'} + + + } + style={{ alignItems: 'baseline' }} + /> + + + 提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。提示信息超过2行时，可以使用将部分信息折叠，以减少空间占用。 + + setExpandB((prev) => !prev)}> + {expandB ? '收起' : '展开更多'} + + + } + style={{ alignItems: 'baseline' }} + /> + + +
执行其他操作
+ 相关操作} + /> + + + 提示信息超过一行，此时按钮按照从上至下的视觉流，放置在信息区下方，这样浏览起来更流畅，即先阅读提示信息，再根据信息判断执行什么操作。 + + + 相关操作1 + 相关操作2 + + + } + style={{ alignItems: 'baseline' }} + /> + + + 提示信息超过一行，此时按钮按照从上至下的视觉流，放置在信息区下方，这样浏览起来更流畅，即先阅读提示信息，再根据信息判断执行什么操作。 + + + 相关操作1 + 相关操作2 + + + } + /> + + 建议统一使用Link + Button，明确可点击的同时，整体视觉也更和谐；当提示信息不超一行时，按钮放在信息右侧；当提示信息超过一行，按钮放置在信息区下方；这样能够确保用户的浏览动线一致，即先阅读提示信息，再根据信息判断执行什么操作。 + + + + ); +}; + +export default Demo; diff --git a/components/alert/design/demo/content.tsx b/components/alert/design/demo/content.tsx new file mode 100644 index 0000000000..1e2573666e --- /dev/null +++ b/components/alert/design/demo/content.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Alert, Flex } from 'antd'; + +const Demo = () => ( + + + + +); + +export default Demo; diff --git a/components/alert/design/demo/type.tsx b/components/alert/design/demo/type.tsx new file mode 100644 index 0000000000..8b19968771 --- /dev/null +++ b/components/alert/design/demo/type.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { Alert, Flex } from 'antd'; + +const Demo = () => ( + + +
成功提示
+ + + + +
信息提示
+ + + + +
警告提示
+ + + + +
错误提示
+ + + + +); + +export default Demo; diff --git a/components/alert/index.$tab-design.zh-CN.md b/components/alert/index.$tab-design.zh-CN.md new file mode 100644 index 0000000000..899408349a --- /dev/null +++ b/components/alert/index.$tab-design.zh-CN.md @@ -0,0 +1,15 @@ +## 组件定义 + +Alert的本质是了解页面/模块内需要关注的提示 + + + +## 基础使用 + +了解提示内容 + +了解提示类型 + +## 交互变体 + +针对提示进行操作