【Material-UI】Dialog 中的 Non-modal Dialog 详解

Material-UI 是 React 生态系统中广泛应用的 UI 框架，提供了丰富的组件来构建直观且美观的用户界面。本文将详细介绍 Material-UI 中的 Non-modal Dialog（非模态对话框）功能，并探讨其在用户交互中的重要性。

一、什么是 Non-modal Dialog？

1. 基本概念

在用户界面设计中，Dialog 是一种常见的组件，用于在界面中弹出一个对话框以展示信息或提示用户进行操作。传统的 Dialog 通常是模态的（modal），意味着在用户与对话框互动之前，不能与背景内容进行任何交互。而 Non-modal Dialog 则不同，它允许用户在对话框显示时继续与背景内容进行交互。

2. 使用场景

Non-modal Dialog 通常用于不需要完全打断用户当前操作的场景。例如，Cookie 通知、工具提示或状态更新提示等。这类对话框通常不会要求用户立即作出回应，而是可以在用户方便时再进行处理。

二、Non-modal Dialog 的实现

1. 示例代码

下面的代码展示了如何使用 Material-UI 创建一个 Non-modal Dialog。这个示例实现了一个常见的 Cookie 通知栏，它作为一个非模态对话框存在于页面底部。

import * as React from 'react';
import Stack from '@mui/material/Stack';
import TrapFocus from '@mui/material/Unstable_TrapFocus';
import CssBaseline from '@mui/material/CssBaseline';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Paper from '@mui/material/Paper';
import Fade from '@mui/material/Fade';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

export default function CookiesBanner() {
  const [bannerOpen, setBannerOpen] = React.useState(true);

  const closeBanner = () => {
    setBannerOpen(false);
  };

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar position="fixed" component="nav">
        <Toolbar>
          <IconButton size="large" edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Container component="main" sx={{ pt: 3 }}>
        <Toolbar />
        <Typography sx={{ marginBottom: 2 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
          imperdiet.
        </Typography>
        <Typography sx={{ marginBottom: 2 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
          imperdiet.
        </Typography>
      </Container>
      <TrapFocus open disableAutoFocus disableEnforceFocus>
        <Fade appear={false} in={bannerOpen}>
          <Paper
            role="dialog"
            aria-modal="false"
            aria-label="Cookie banner"
            square
            variant="outlined"
            tabIndex={-1}
            sx={{
              position: 'fixed',
              bottom: 0,
              left: 0,
              right: 0,
              m: 0,
              p: 2,
              borderWidth: 0,
              borderTopWidth: 1,
            }}
          >
            <Stack
              direction={{ xs: 'column', sm: 'row' }}
              sx={{ justifyContent: 'space-between', gap: 2 }}
            >
              <Box
                sx={{ flexShrink: 1, alignSelf: { xs: 'flex-start', sm: 'center' } }}
              >
                <Typography sx={{ fontWeight: 'bold' }}>
                  This website uses cookies
                </Typography>
                <Typography variant="body2">
                  example.com relies on cookies to improve your experience.
                </Typography>
              </Box>
              <Stack
                direction={{
                  xs: 'row-reverse',
                  sm: 'row',
                }}
                sx={{
                  gap: 2,
                  flexShrink: 0,
                  alignSelf: { xs: 'flex-end', sm: 'center' },
                }}
              >
                <Button size="small" onClick={closeBanner} variant="contained">
                  Allow all
                </Button>
                <Button size="small" onClick={closeBanner}>
                  Reject all
                </Button>
              </Stack>
            </Stack>
          </Paper>
        </Fade>
      </TrapFocus>
    </React.Fragment>
  );
}

2. 代码详解

在这个示例中，我们创建了一个 CookiesBanner 组件，它包含以下几个关键部分：

• TrapFocus: 使用 TrapFocus 组件可以确保用户在对话框打开时，焦点在对话框内循环，不会被跳出对话框的区域。尽管它在非模态对话框中是可选的，但在某些情况下可以提升可访问性。
• Fade: Fade 组件用于处理对话框的淡入淡出效果，使对话框显示更加流畅。
• Paper: Paper 组件是 Material-UI 中的一个基本容器组件，它具有 Material Design 的纸张外观。我们使用它来创建 Cookie 通知栏。
• Button: 我们在通知栏中添加了两个按钮，分别用于“允许所有”和“拒绝所有”操作。点击任意按钮都会关闭通知栏。

3. 自定义样式

在这个示例中，我们使用了 sx 属性来对组件进行样式定制。Paper 组件被固定在页面底部，横跨整个页面的宽度，且边框顶部略微加粗以便与页面主体部分区分开来。

三、Non-modal Dialog 的优势

1. 提高用户体验

Non-modal Dialog 的一个主要优势在于它不会中断用户当前的操作。这种对话框允许用户继续操作页面上的其他内容，同时提供必要的提示或选择，避免用户因为被强制打断而感到困扰。

2. 提供持续反馈

在某些场景中，用户可能需要持续获取信息或选项。Non-modal Dialog 可以作为一种持续反馈机制，确保用户在进行其他操作的同时，仍然能够看到重要的提示或选项。

3. 更灵活的界面设计

Non-modal Dialog 赋予设计师更多的自由，可以在不影响用户主任务的前提下，增加一些次要但仍然重要的交互元素。例如，Cookie 通知、更新提示或应用内帮助等。

四、Non-modal Dialog 的注意事项

1. 避免过度使用

虽然 Non-modal Dialog 提供了诸多便利，但过度使用可能会分散用户的注意力。在设计过程中，应确保对话框的内容和功能确实需要持续显示，而不是占用用户的屏幕空间。

2. 保持简洁明了

Non-modal Dialog 应该保持内容简洁，直截了当。例如，在 Cookie 通知栏中，用户通常只需要了解最基本的信息，因此对话框的内容不应过于复杂。

3. 提供关闭选项

即使 Non-modal Dialog 不会打断用户操作，但用户仍应有能力手动关闭它。这不仅提高了用户的控制感，还能避免不必要的视觉干扰。

五、结论

Non-modal Dialog 是 Material-UI 中一个非常实用的功能，能够在不打断用户当前操作的情况下，提供必要的信息或选项。通过合理使用 Non-modal Dialog，开发者可以显著提升用户体验，增加界面的交互性和灵活性。在实际应用中，开发者应注意平衡对话框的使用频率，确保其真正为用户提供价值而不是造成干扰。

推荐：

• JavaScript
• react
• vue

---