【Material-UI】App Bar 中的 Dense 和 Prominent 属性详解

Material-UI 是 React 生态系统中非常流行的 UI 库，为开发者提供了丰富的组件，帮助构建现代化的响应式用户界面。本文将详细介绍 Material-UI 中 App Bar 组件的两种重要属性：Dense 和 Prominent，分别适用于不同的 UI 场景，帮助开发者优化界面设计。

一、App Bar 组件概述

1. 组件介绍

App Bar 组件是 Material-UI 中一个常用的导航栏组件，通常用于页面顶部，作为展示应用名称、导航菜单、搜索框等内容的容器。它的高度、排版和功能可以根据不同场景需求进行调整。在这其中，Dense 和 Prominent 是两种常见的模式，它们在布局、视觉风格上各有特点。

2. Dense 和 Prominent 的定义

• Dense：即“紧凑模式”，该模式会减少 App Bar 的高度，使其在桌面端占用更少的垂直空间，从而提供更多的可用内容区域。Dense 模式非常适合内容密集的页面，尤其是需要在屏幕上同时展示大量内容时。
• Prominent：即“显著模式”，这种模式会增大 App Bar 的高度，使其在页面上更加醒目，通常用于强调某些重要的导航或操作按钮。这种模式适合需要突出显示品牌或关键操作的页面，通常用于首页或具有重要功能的界面。

接下来我们将详细介绍如何在项目中使用这两种模式，并讨论它们各自的应用场景。

二、Dense 模式详解

1. Dense 模式的基本用法

Dense 模式的特点是 App Bar 的高度较低，因此非常适合桌面端使用，特别是在需要节省垂直空间的场景下。以下是一个 Dense 模式的代码示例：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function DenseAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

在这个示例中，我们通过在 Toolbar 组件上添加 variant="dense" 属性来启用紧凑模式。Dense 模式下的 App Bar 高度明显减少，适合在信息量较大、希望保留更多屏幕空间的应用场景中使用。

2. Dense 模式的应用场景

Dense 模式的主要优势在于能够减少 App Bar 占用的垂直空间，尤其适合以下场景：

• 后台管理系统：后台系统通常需要展示大量的信息和数据，紧凑的 App Bar 可以让页面布局更加紧凑，腾出更多空间用于展示内容。
• 表单和数据输入页面：在大量表单字段和输入控件的页面上，减少 App Bar 的高度可以避免用户频繁滚动页面，提升用户体验。

3. 优点和局限

• 优点：节省垂直空间，适合信息密集型界面，视觉上更加紧凑。
• 局限：由于 Dense 模式高度较小，在一些需要突出展示应用名称或导航的场景中，视觉效果可能不够显著。

三、Prominent 模式详解

1. Prominent 模式的基本用法

Prominent 模式的特点是 App Bar 的高度较高，目的是让导航栏更加醒目，适合在首页或需要重点展示品牌或操作按钮的页面中使用。下面是 Prominent 模式的代码示例：

import * as React from 'react';
import { styled } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import MoreIcon from '@mui/icons-material/MoreVert';

const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  alignItems: 'flex-start',
  paddingTop: theme.spacing(1),
  paddingBottom: theme.spacing(2),
  '@media all': {
    minHeight: 128,
  },
}));

export default function ProminentAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <StyledToolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="open drawer"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h5"
            noWrap
            component="div"
            sx={{ flexGrow: 1, alignSelf: 'flex-end' }}
          >
            MUI
          </Typography>
          <IconButton size="large" aria-label="search" color="inherit">
            <SearchIcon />
          </IconButton>
          <IconButton
            size="large"
            aria-label="display more actions"
            edge="end"
            color="inherit"
          >
            <MoreIcon />
          </IconButton>
        </StyledToolbar>
      </AppBar>
    </Box>
  );
}

在这个示例中，我们使用了 styled 方法来自定义 Toolbar 的样式，通过增加顶部和底部的内边距以及设置最小高度来实现显著的 App Bar 效果。这种设计能够在页面顶部占据更大的视觉区域，适合展示重要的品牌标识或功能按钮。

2. Prominent 模式的应用场景

Prominent 模式的显著性使其在以下场景中表现优异：

• 首页：当用户第一次访问网站时，通过增大的 App Bar 来突出品牌标识，有助于增强品牌认知。
• 内容主导的页面：在内容驱动的页面中，显著的 App Bar 可以包含更多的操作按钮，如搜索、菜单等，从而提升页面的功能性和交互性。

3. 优点和局限

• 优点：突出品牌或重要操作按钮，适合增强视觉层次感和提高用户关注度。
• 局限：由于高度增加，可能会占用较多的垂直空间，不适合信息密集型界面。

四、Dense 和 Prominent 模式的选择指南

在实际项目中，开发者需要根据具体需求来选择合适的 App Bar 模式。以下是一些建议：

• 选择 Dense 模式：如果你的页面信息量大，并且需要最大化利用屏幕空间，如后台管理系统或数据展示页面，Dense 模式是最佳选择。
• 选择 Prominent 模式：如果你希望在页面上突出品牌标识或关键操作，如首页或具有重要功能的页面，Prominent 模式更为合适。

示例：如何在同一项目中混合使用 Dense 和 Prominent 模式

在一些大型应用中，可能需要在不同页面中混合使用 Dense 和 Prominent 模式。例如：

• 在首页使用 Prominent 模式，强调品牌和关键操作按钮。
• 在数据展示页面使用 Dense 模式，节省空间，最大化展示内容。

五、总结

Material-UI 的 App Bar 组件通过提供 Dense 和 Prominent 两种模式，为开发者提供了灵活的设计选择。Dense 模式适合信息密集型页面，而 Prominent 模式则用于强调品牌或关键操作的场景。合理选择和应用这两种模式，可以显著提升用户界面的美观性和功能性。希望本文能帮助你更好地理解和应用 App Bar 组件中的这两种模式，在项目中为用户提供更加优质的使用体验。

推荐：

• JavaScript
• react
• vue

---