mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
site: fix site style issue (#54247)
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
lijianan
GitHub
parent
2c38b8430a
commit
13555bfa4f
9 changed files with 173 additions and 169 deletions
62
.dumi/theme/builtins/FlexWithImagePreview/index.tsx
Normal file
62
.dumi/theme/builtins/FlexWithImagePreview/index.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import React from 'react';
|
||||
import { Flex } from 'antd';
|
||||
import type { FlexProps } from 'antd';
|
||||
import { createStyles } from 'antd-style';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import ImagePreview from '../ImagePreview';
|
||||
import type { ImagePreviewProps } from '../ImagePreview';
|
||||
|
||||
const isNotEmpty = (val: any) => {
|
||||
return typeof val !== 'undefined' && val !== null && val !== '';
|
||||
};
|
||||
|
||||
const useStyle = createStyles(({ css, token }) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
color: ${token.colorText};
|
||||
font-size: ${token.fontSize}px;
|
||||
line-height: 2;
|
||||
`,
|
||||
title: css`
|
||||
margin: 1em 0;
|
||||
`,
|
||||
description: css`
|
||||
margin: 1em 0;
|
||||
padding-inline-start: 0.8em;
|
||||
color: ${token.colorTextSecondary};
|
||||
font-size: 90%;
|
||||
border-inline-start: 4px solid ${token.colorSplit};
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
||||
interface FlexWithImagePreviewProps {
|
||||
imagePreviewProps?: ImagePreviewProps;
|
||||
title?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const FlexWithImagePreview: React.FC<
|
||||
FlexWithImagePreviewProps & React.PropsWithChildren<FlexProps>
|
||||
> = (props) => {
|
||||
const { imagePreviewProps, title, description, className, style, children, ...rest } = props;
|
||||
const { styles } = useStyle();
|
||||
if (!title && !description) {
|
||||
return <ImagePreview {...imagePreviewProps}>{children}</ImagePreview>;
|
||||
}
|
||||
return (
|
||||
<Flex className={classNames(styles.wrapper, className)} style={style} {...rest}>
|
||||
<Flex align="flex-start" justify="flex-start" vertical>
|
||||
{isNotEmpty(title) && <div className={styles.title}>{title}</div>}
|
||||
{isNotEmpty(description) && <div className={styles.description}>{description}</div>}
|
||||
</Flex>
|
||||
<ImagePreview {...imagePreviewProps}>{children}</ImagePreview>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlexWithImagePreview;
|
||||
|
|
@ -3,7 +3,7 @@ import { Image } from 'antd';
|
|||
import classNames from 'classnames';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
|
||||
interface ImagePreviewProps {
|
||||
export interface ImagePreviewProps {
|
||||
className?: string;
|
||||
/** Do not show padding & background */
|
||||
pure?: boolean;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const GlobalStyle: React.FC = () => {
|
|||
font-size: ${token.fontSize}px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -208,13 +208,13 @@ const GlobalStyle: React.FC = () => {
|
|||
padding-inline-start: 0.8em;
|
||||
color: ${token.colorTextSecondary};
|
||||
font-size: 90%;
|
||||
border-left: 4px solid ${token.colorSplit};
|
||||
border-inline-start: 4px solid ${token.colorSplit};
|
||||
|
||||
.rtl & {
|
||||
padding-inline-end: 0.8em;
|
||||
padding-inline-start: 0;
|
||||
border-right: 4px solid ${token.colorSplit};
|
||||
border-left: none;
|
||||
border-inline-end: 4px solid ${token.colorSplit};
|
||||
border-inline-start: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -298,11 +298,11 @@ const GlobalStyle: React.FC = () => {
|
|||
border: 1px solid ${token.colorSplit};
|
||||
|
||||
&:first-child {
|
||||
border-left: 1px solid ${token.colorSplit};
|
||||
border-inline-start: 1px solid ${token.colorSplit};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid ${token.colorSplit};
|
||||
border-inline-end: 1px solid ${token.colorSplit};
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -381,23 +381,23 @@ const GlobalStyle: React.FC = () => {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Api 表中某些属性用 del 标记，表示已废弃（但仍期望给开发者一个过渡期)用 css 标记出来。仅此而已。
|
||||
有更多看法？移步讨论区: https://github.com/ant-design/ant-design/discussions/51298
|
||||
*/
|
||||
tr:has(td:first-child > del) {
|
||||
color: ${token.colorWarning} !important;
|
||||
background-color: ${token.colorWarningBg} !important;
|
||||
display: var(--antd-site-api-deprecated-display, none);
|
||||
tr:has(td:first-child > del) {
|
||||
color: ${token.colorWarning} !important;
|
||||
background-color: ${token.colorWarningBg} !important;
|
||||
display: var(--antd-site-api-deprecated-display, none);
|
||||
|
||||
del {
|
||||
color: ${token.colorWarning};
|
||||
}
|
||||
|
||||
&:hover del {
|
||||
text-decoration: none;
|
||||
}
|
||||
del {
|
||||
color: ${token.colorWarning};
|
||||
}
|
||||
|
||||
&:hover del {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-demo,
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ import { FormattedMessage, useRouteMeta } from 'dumi';
|
|||
import useLayoutState from '../../../hooks/useLayoutState';
|
||||
import useLocation from '../../../hooks/useLocation';
|
||||
import ComponentMeta from '../../builtins/ComponentMeta';
|
||||
import EditButton from '../../common/EditButton';
|
||||
import PrevAndNext from '../../common/PrevAndNext';
|
||||
import type { DemoContextProps } from '../DemoContext';
|
||||
import DemoContext from '../DemoContext';
|
||||
import SiteContext from '../SiteContext';
|
||||
import DocAnchor, { useStyle } from './DocAnchor';
|
||||
import Contributors from './Contributors';
|
||||
import ColumnCard from './ColumnCard';
|
||||
import DocMeta from './DocMeta';
|
||||
import Footer from '../Footer';
|
||||
import PrevAndNext from '../../common/PrevAndNext';
|
||||
import EditButton from '../../common/EditButton';
|
||||
import SiteContext from '../SiteContext';
|
||||
import ColumnCard from './ColumnCard';
|
||||
import Contributors from './Contributors';
|
||||
import DocAnchor, { useStyle } from './DocAnchor';
|
||||
import DocMeta from './DocMeta';
|
||||
|
||||
const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 6 }) =>
|
||||
Array.from({ length: num }).map<React.ReactNode>((_, i) => (
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
|
|||
|
||||
这个问题可以通过以下两步解决：
|
||||
|
||||
1. 使用 `@ant-design/icons@5.x` 配合 `antd@5.x`，而不是最新版本。
|
||||
1. 使用 `@ant-design/icons@5.x` 配合 `antd@5.x`，而不是最新版本。
|
||||
2. 停止使用 `message`, `Modal` 和 `notification` 的静态方法，改为使用 hooks 版本或 App 提供的实例。
|
||||
|
||||
如果无法避免使用静态方法，可以在 App 组件下立刻使用任一一个 icon 组件，以规避静态方法对样式的影响。
|
||||
|
|
|
|||
|
|
@ -7,17 +7,15 @@ title: Keep it Lightweight
|
|||
|
||||
Fitts's Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use. In other words, if a tool is close at hand and large enough to target, then we can improve the user's interaction. Putting tools in context makes for lightweight interaction.
|
||||
|
||||
> <img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />
|
||||
> **Fitts's Law**: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.
|
||||
> **Fitts's Law**:<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" alt="fitts" draggable="false" />The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.
|
||||
|
||||
---
|
||||
|
||||
## Always-Visible Tools
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
If an action is critical, expose it directly in the interface and keep it always visible.
|
||||
<FlexWithImagePreview justify='space-between' title='If an action is critical, expose it directly in the interface and keep it always visible.' description=''>
|
||||
<img class="preview-img" draggable="false" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -25,11 +23,9 @@ If an action is critical, expose it directly in the interface and keep it always
|
|||
|
||||
## Hover-Reveal Tools
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
|
||||
Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.
|
||||
<FlexWithImagePreview justify='space-between' title='Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.' description=''>
|
||||
<img class="preview-img" draggable="false" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -37,11 +33,9 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
|
|||
|
||||
## Toggle-Reveal Tools
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
|
||||
<FlexWithImagePreview justify='space-between' title='Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.' description=''>
|
||||
<img class="preview-img" draggable="false" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -49,18 +43,12 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T
|
|||
|
||||
## Visible Area ≠ Clickable Area
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
|
||||
<FlexWithImagePreview justify='space-between' title='The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.' description=''>
|
||||
<img class="preview-img" draggable="false" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
|
||||
|
||||
> Note that it is especially suited for Mobile.
|
||||
<FlexWithImagePreview justify='space-between' title='Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.' description='Note that it is especially suited for Mobile.'>
|
||||
<img class="preview-img" draggable="false" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</FlexWithImagePreview>
|
||||
|
|
|
|||
|
|
@ -7,16 +7,15 @@ title: 简化交互
|
|||
|
||||
根据费茨法则（Fitts's Law），用户鼠标移动距离越短、对象相对目标越大，用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
|
||||
|
||||
> **费茨法则** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />其中：1. D 为设备当前位置和目标位置的距离；2. W 为目标的大小。距离越长，所用时间越长；目标越大，所用时间越短。
|
||||
> **费茨法则** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" alt="fitts" draggable="false" /> 其中：1. D 为设备当前位置和目标位置的距离；2. W 为目标的大小。距离越长，所用时间越长；目标越大，所用时间越短。
|
||||
|
||||
---
|
||||
|
||||
## 实时可见工具
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
|
||||
<FlexWithImagePreview justify='space-between' title='如果某个操作非常重要，就应该把它放在界面中，并实时可见。' description=''>
|
||||
<img class="preview-img" draggable="false" alt="实时可见工具示例" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -24,10 +23,9 @@ title: 简化交互
|
|||
|
||||
## 悬停即现工具
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
|
||||
<FlexWithImagePreview justify='space-between' title='如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。' description=''>
|
||||
<img class="preview-img" draggable="false" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -35,11 +33,9 @@ title: 简化交互
|
|||
|
||||
## 开关显示工具
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
|
||||
<FlexWithImagePreview justify='space-between' title='如果某些操作只需要在特定模式时显示，可以通过开关来实现。' description=''>
|
||||
<img class="preview-img" draggable="false" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -47,18 +43,12 @@ title: 简化交互
|
|||
|
||||
## 可视区域 ≠ 可点击区域
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
|
||||
<FlexWithImagePreview justify='space-between' title='在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。' description=''>
|
||||
<img class="preview-img" draggable="false" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，来增强响应性，又不降低美感。
|
||||
|
||||
> 注：在移动端尤其适用。
|
||||
<FlexWithImagePreview justify='space-between' title='当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，来增强响应性，又不降低美感。' description='注：在移动端尤其适用。'>
|
||||
<img class="preview-img" draggable="false" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</FlexWithImagePreview>
|
||||
|
|
|
|||
|
|
@ -15,32 +15,24 @@ Solve most of problems on the same page and avoid a new one, because the page re
|
|||
|
||||
## Overlays
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img good" alt="good example" description="As the user clicks delete, a success message and an undo button are displayed. When the user does nothing within one minute or click the undo button, the message and the button disappear." src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
|
||||
<img class="preview-img good" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
|
||||
<img class="preview-img bad" alt="bad example" description="
|
||||
<FlexWithImagePreview justify='space-between' title='Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.'>
|
||||
<img class="preview-img good" alt="good example" description="As the user clicks delete, a success message and an undo button are displayed. When the user does nothing within one minute or click the undo button, the message and the button disappear." src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
|
||||
<img class="preview-img good" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
|
||||
<img class="preview-img bad" alt="bad example" description="
|
||||
Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user's flow, nor allow the user to undo the change." src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png">
|
||||
</ImagePreview>
|
||||
|
||||
Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Detail Overlay " description="Click the eye icon to see more information." src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
|
||||
</ImagePreview>
|
||||
|
||||
Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.
|
||||
|
||||
> Note that when a mouseover event occurs to trigger the Detail Overlay, 0.5-second delay needs to be added, and when the mouse is out, the overlay needs to be closed immediately.
|
||||
<FlexWithImagePreview justify='space-between' title='Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content.' description='Note that when a mouseover event occurs to trigger the Detail Overlay, 0.5-second delay needs to be added, and when the mouse is out, the overlay needs to be closed immediately.'>
|
||||
<img class="preview-img" alt="example of Detail Overlay " description="Click the eye icon to see more information." src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Input Overlay" description="Click the edit icon to trigger the Input Overlay. Click the outside of it to preserve the input and close it." src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
|
||||
</ImagePreview>
|
||||
|
||||
Input Overlay: Let the user enter small amounts of text on the overlay.
|
||||
<FlexWithImagePreview justify='space-between' title='Input Overlay: Let the user enter small amounts of text on the overlay.'>
|
||||
<img class="preview-img" alt="example of Input Overlay" description="Click the edit icon to trigger the Input Overlay. Click the outside of it to preserve the input and close it." src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -48,19 +40,15 @@ Input Overlay: Let the user enter small amounts of text on the overlay.
|
|||
|
||||
## Inlays
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of List Inlay" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
|
||||
</ImagePreview>
|
||||
|
||||
List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
|
||||
<FlexWithImagePreview justify='space-between' title='List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.'>
|
||||
<img class="preview-img" alt="example of List Inlay" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Tabs" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
|
||||
</ImagePreview>
|
||||
|
||||
Tabs: Provides additional panels of information accessible by tab controls.
|
||||
<FlexWithImagePreview justify='space-between' title='Tabs: Provides additional panels of information accessible by tab controls.'>
|
||||
<img class="preview-img" alt="example of Tabs" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -80,24 +68,18 @@ It has long been common practice on the Web to turn each step into a separate pa
|
|||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Responsive Disclosure" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
|
||||
</ImagePreview>
|
||||
|
||||
Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
|
||||
<FlexWithImagePreview justify='space-between' title='Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.'>
|
||||
<img class="preview-img" alt="example of Responsive Disclosure" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Configurator Process" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
|
||||
</ImagePreview>
|
||||
|
||||
Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
|
||||
<FlexWithImagePreview justify='space-between' title='Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.'>
|
||||
<img class="preview-img" alt="example of Configurator Process" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
|
||||
</ImagePreview>
|
||||
|
||||
Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.
|
||||
<FlexWithImagePreview justify='space-between' title="Dialog Overlay Process: Any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary.">
|
||||
<img class="preview-img" alt="example of Dialog Overlay Process" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
|
|
|||
|
|
@ -15,31 +15,23 @@ title: 足不出户
|
|||
|
||||
## 覆盖层
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img good" alt="推荐示例" description="用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
|
||||
<img class="preview-img good" alt="推荐示例" description="特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
|
||||
<img class="preview-img bad" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png" >
|
||||
</ImagePreview>
|
||||
|
||||
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。
|
||||
<FlexWithImagePreview justify='space-between' title='二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。' description=''>
|
||||
<img class="preview-img good" alt="推荐示例" description="用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。" src="https://gw.alipayobjects.com/zos/rmsportal/YfhMlEIayfwnxiILcebI.png">
|
||||
<img class="preview-img good" alt="推荐示例" description="特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://gw.alipayobjects.com/zos/rmsportal/AKtiXJTTQEjKFOCQGZMa.png">
|
||||
<img class="preview-img bad" alt="不推荐示例" description="滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。" src="https://gw.alipayobjects.com/zos/rmsportal/cGqkngXLMBlmMyoHtgFs.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="详情覆盖层示例" description="通过「点击」图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
|
||||
</ImagePreview>
|
||||
|
||||
详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。
|
||||
|
||||
> 注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层
|
||||
<FlexWithImagePreview justify='space-between' title='详情覆盖层：一般在列表中，通过用户「悬停」/「点击」某个区块，在当前页加载该条列表项的更多详情信息。' description='注：使用「悬停」激活时，当鼠标移入时，需要设置 0.5 秒左右的延迟触发；当鼠标移出时，立刻关闭覆盖层'>
|
||||
<img class="preview-img" alt="详情覆盖层示例" description="通过「点击」图标查看更多详情信息。" src="https://gw.alipayobjects.com/zos/rmsportal/yagQVxwdzuXOulzqdxEq.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="输入覆盖层示例" description="鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
|
||||
</ImagePreview>
|
||||
|
||||
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
|
||||
<FlexWithImagePreview justify='space-between' title='输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。' description=''>
|
||||
<img class="preview-img" alt="输入覆盖层示例" description="鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。" src="https://gw.alipayobjects.com/zos/rmsportal/lLhJKFcaJnIPxFCjvUKY.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -47,19 +39,15 @@ title: 足不出户
|
|||
|
||||
## 嵌入层
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="列表嵌入层示例" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
|
||||
</ImagePreview>
|
||||
|
||||
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
|
||||
<FlexWithImagePreview justify='space-between' title='列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。' description=''>
|
||||
<img class="preview-img" alt="列表嵌入层示例" src="https://gw.alipayobjects.com/zos/rmsportal/TgoEocLVYXfMKzFGwJar.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="标签页示例" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
|
||||
</ImagePreview>
|
||||
|
||||
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
|
||||
<FlexWithImagePreview justify='space-between' title='标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。'>
|
||||
<img class="preview-img" alt="标签页示例" src="https://gw.alipayobjects.com/zos/rmsportal/CKwQXddFJnJHsyFAifsg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
|
|
@ -79,24 +67,18 @@ title: 足不出户
|
|||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="渐进式展现示例" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
|
||||
</ImagePreview>
|
||||
|
||||
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
|
||||
<FlexWithImagePreview justify='space-between' title='渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。'>
|
||||
<img class="preview-img" alt="渐进式展现示例" src="https://gw.alipayobjects.com/zos/rmsportal/OIxzAapqoGokUSIuFOWC.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="配置程序示例" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
|
||||
</ImagePreview>
|
||||
|
||||
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
|
||||
<FlexWithImagePreview justify='space-between' title='配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。'>
|
||||
<img class="preview-img" alt="配置程序示例" src="https://gw.alipayobjects.com/zos/rmsportal/nVgSYAiXfKGMHxkjypPp.png">
|
||||
</FlexWithImagePreview>
|
||||
|
||||
<br>
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="弹出框覆盖层示例" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
|
||||
</ImagePreview>
|
||||
|
||||
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。
|
||||
<FlexWithImagePreview justify='space-between' title='弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。'>
|
||||
<img class="preview-img" alt="弹出框覆盖层示例" src="https://gw.alipayobjects.com/zos/rmsportal/YutBaHmScUzpbKdFWDcg.png">
|
||||
</FlexWithImagePreview>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue