- Material UI 简介
- Material UI 组件库详解
- 使用 Material UI 的 Autocomplete 组件详解
- 使用 Material UI 的 Button 组件详解
- 使用 Material UI 创建按钮组(Button Group)的详细指南
- 使用 Material UI 创建复选框(Checkbox)的详细指南
- Material UI 中 Floating Action Button 的使用详解
- Material UI 中 Radio Group 的使用详解
- Material UI 中 Rating 组件的使用详解
- Material UI 中 Select 组件的使用详解
- Material UI 中 Slider 组件的使用详解
- Material UI Switch 组件使用详解
- Material UI Text Field 组件使用详解
- Material UI Transfer List 使用详解
- Material UI Toggle Button 使用详解
- Material UI Avatar 组件使用详解
- Material UI Badge 组件使用详解
- Material UI Chip 组件使用详解
- Material UI Divider 组件使用详解
- Material UI Icons 组件使用详解
- Material UI 中 Material Icons 的使用详解
- Material UI 框架中 Lists 的使用详解
- Material UI 框架中 Table 的使用详解
- Material UI 框架中 Tooltip 的使用详解
- Material UI 框架中 Typography 的使用详解
- Material UI 框架中 Alert 组件的使用详解
- Material UI 框架中 Backdrop 组件的详细使用教程
- Material UI 框架中 Dialog 组件的详细使用教程
- Material UI Progress 组件详解及示例
- Material UI 框架中的 Skeleton 组件详解
- Material UI 框架中的 Snackbar 组件详解
- Material UI 框架中的 Accordion 组件详解
- Material UI 框架中的 App Bar 组件详解
- Material UI 框架中的 Card 组件详解
- Material UI 框架中的 Paper 组件详解
- 使用 Material UI 框架中的 Bottom Navigation 组件
- 使用 Material UI 框架中的 Breadcrumbs 组件
- 使用 Material UI 框架中的 Drawer 组件
- 使用 Material UI 框架中的 Links 组件
- 使用 Material UI 框架中的 Menu 组件
- 使用 Material UI 框架中的 Pagination 组件
- 使用 Material UI 框架中的 Speed Dial 组件
- 使用 Material UI 框架中的 Stepper 组件
- 使用 Material UI 框架中的 Tabs 组件
- 使用 Material UI 框架中的 Layout Box 组件
- 使用 Material UI 框架中的 Layout Container
- 使用 Material UI 框架中的 Layout Grid
- 使用 Material UI 框架中的 Layout Grid Version 2
- 使用 Material UI 框架中的 Layout Stack
- 使用 Material UI 框架中的 Layout Image List
- 使用 Material UI 框架中的 Layout Hidden
- 使用 Material UI 框架中的 Click-Away Listener
- 使用 Material UI 框架中的 CSS Baseline
- 使用 Material UI 框架中的 Utils Modal
- 使用 Material UI 框架中的 Utils No SSR
- 使用 Material UI 框架中的 Utils Popover
- 使用 Material UI 框架中的 Utils Popper
- 使用 Material UI 框架中的 Utils Portal
- 使用 Material UI 框架中的 Utils Textarea Autosize
- 使用 Material UI 框架中的 Utils Transitions
- 使用 Material UI 框架中的 `useMediaQuery`
- 使用 Material UI 框架中的 MUI X Data Grid
- 使用 Material UI 框架中的 Data Grid - Layout
- 使用 Material UI 框架中的 Data Grid:深入探索列定义与管理
- 深入探索 Material UI 框架中的 Data Grid:行定义与管理
- 深入探索 Material UI 框架中的 Data Grid 编辑功能
- 深入探索 Material UI 框架中的 Data Grid 排序功能
- 深入探索 Material UI 框架中的 Data Grid 过滤功能
- 深入探索 Material UI 框架中的 Data Grid 分页功能
- 深入探索 Material UI 框架中的 Data Grid 行选择和单元格选择功能
- 深入探索 Material UI 框架中的 Data Grid 导出功能
- 深入探索 Material UI 框架中的 Data Grid - Copy and Paste 功能
- 深入探索 Material UI 框架中的 Data Grid - Overlays 功能
- 深入探索 Material UI 框架中的 Data Grid - Custom Slots and Subcomponents
- 深入探索 Material UI 框架中的 Data Grid - Styling 和 Styling Recipes
- 深入探索 Material UI 框架中的 Data Grid - Translated Components
- 使用 Material UI 的 Data Grid - Scrolling 功能
- 使用 Material UI 的 Data Grid - Virtualization 功能
- 使用 Material UI 的 Data Grid - 可访问性(Accessibility)功能
- 使用 Material UI 的 Data Grid - 性能(Performance)优化
- 使用 Material UI 的 Data Grid - 树形数据(Tree Data)
- 使用 Material UI 的 Data Grid - 行分组(Row Grouping)
- 使用 Material UI 的 Data Grid - 数据聚合(Aggregation)
- 使用 Material UI 的 Data Grid - 数据透视(Pivoting)
- 使用 Material UI 的 Data Grid - 服务器端数据(Server-side Data)
- 使用 Material UI 的 Data Grid - 服务器端树形数据(Server-side Tree Data)
- 使用 Material UI 的 Data Grid - 服务器端懒加载(Server-side Lazy Loading)
- 使用 Material UI 的 Data Grid - 服务器端行分组(Server-side Row Grouping)
- 使用 Material UI 的 Data Grid - 服务器端聚合(Server-side Aggregation)
- 使用 Material UI 的 Data Grid - API Object
- 使用 Material UI 的 Data Grid - 事件处理(Events)
- 使用 Material UI 的 Data Grid - State 管理
- Material UI Data Grid - 编辑功能详解与使用示例
- Material UI Data Grid - Row Grouping 使用指南与示例
- Material UI DataGrid API 使用指南
- Material UI DataGridPremium API 使用指南
- Material UI 框架 DataGridPro API 使用指南
- Material UI 框架 GridFilterForm API 使用指南
- Material UI 框架 GridFilterPanel API 使用指南
- Material UI 框架 GridApi API 使用指南
- Material UI 框架 GridCellParams API 使用指南
- Material UI 框架 GridColDef API 使用指南
- Material UI 框架 GridSingleSelectColDef API 使用指南
- Material UI 框架 GridActionsColDef API 使用指南
- Material UI 框架 GridExportStateParams API 使用指南
- Material UI 框架 GridFilterItem API 使用指南
- Material UI 框架 GridFilterModel API 使用指南
- Material UI 框架:GridToolbarQuickFilter API 使用详解
- Material UI 框架:GridApi 接口详解及其使用
- Material UI 框架:Interface `GridCellParams` API 使用详解
- Material UI 框架:Interface `GridColDef` API 使用详解
- Material UI 框架:Interface `GridSingleSelectColDef` API 使用详解
- Material UI 框架:Interface `GridActionsColDef` API 使用详解
- Material UI 框架:Interface `GridExportStateParams` API 使用详解
- Material UI 框架:`GridFilterItem` API 使用详解
- Material UI 框架:`GridFilterModel` API 使用详解
- Material UI 框架:`Interface GridFilterOperator` API 使用详解
- Material UI 框架:`GridRowClassNameParams` 接口详解及使用指南
- Material UI 框架:`GridRowParams` 接口详解及使用指南
- Material UI 框架:`GridRowSpacingParams` 接口详解及使用指南
- Material UI 框架:`GridAggregationFunction` 接口详解及使用指南
- Material UI 框架:`GridCsvExportOptions` 接口详解及使用指南
- Material UI 框架:`GridPrintExportOptions` 接口详解及使用指南
- Material UI 框架:`GridExcelExportOptions` 接口详解及使用指南
- Material UI 框架:MUI X 日期和时间选择器使用指南
- Material UI 框架:日期和时间选择器 - 入门指南
- Material UI 框架:日期和时间选择器 - 基本概念
- Material UI 框架:日期和时间选择器 - 可访问性
- Material UI 框架之 Date Picker 组件详解
- Material UI 框架之 Date Field 组件详解
- Material UI 框架之 Date Calendar 组件详解
- Material UI 框架之 Time Picker 组件详解
- Material UI 框架之 Time Field 组件详解
- Material UI 框架之 Time Clock 组件详解
- Material UI 框架之 Digital Clock 组件详解
- Material UI 框架之 DateTime Picker 组件详解
- Material UI 框架之 DateTime Field 组件详解
- Material UI 组件 Date Range Picker 使用详解
- Material UI 组件 Date Range Field 使用详解
- Material UI 组件 Date Range Calendar 使用详解
- Material UI 组件 Time Range Picker 使用详解
- Material UI 组件 Time Range Field 使用详解
- Material UI 组件 Date Time Range Picker 使用详解
- Material UI 组件 Date Time Range Field 使用详解
Material UI 框架中的 App Bar 组件详解
class App Bar在现代 web 应用中,App Bar 是一个非常重要的 UI 组件,通常用于显示应用程序的标题、导航链接以及其他相关操作。Material UI 提供了功能强大的 App Bar 组件,能够帮助开发者快速构建具有良好用户体验的导航条。
本文将深入探讨 Material UI 中 App Bar 组件的使用,包括各种属性、方法,以及通过结合其他组件展示不同的使用场景。我们将提供多个示例代码,帮助你全面理解 App Bar 的功能。
1. 什么是 App Bar?
App Bar 是 Material Design 中的一个关键组件,主要用于应用程序的顶端导航。它通常包含:
- 应用名称或标志
- 导航链接
- 操作按钮(如搜索、设置等)
- 用户头像或菜单
2. 安装 Material UI
在开始之前,确保已经安装好 Material UI 库:
npm install @mui/material @emotion/react @emotion/styled
3. 基本用法
示例:基本的 App Bar
import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
function BasicAppBar() {
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
我的应用
</Typography>
<Button color="inherit">登录</Button>
</Toolbar>
</AppBar>
);
}
export default BasicAppBar;
示例解析:
AppBar
: 组件的外层容器,通常设置为position="static"
或position="fixed"
。Toolbar
: 用于放置应用内容的容器,确保内容在 App Bar 中适当对齐。Typography
: 用于显示文本,如应用名称。Button
: 典型的操作按钮,如登录。
4. App Bar 的位置属性
App Bar 具有不同的 position 属性,影响其在页面中的位置。可选值包括:
static
:默认状态,随着页面滚动而滚动。fixed
:固定在窗口顶部,不随页面滚动而移动。absolute
:相对定位,可以在特定位置展示。sticky
:在用户滚动时保持在可视区域内。
示例:固定的 App Bar
function FixedAppBar() {
return (
<AppBar position="fixed">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
固定的 App Bar
</Typography>
</Toolbar>
</AppBar>
);
}
示例:绝对定位的 App Bar
function AbsoluteAppBar() {
return (
<AppBar position="absolute">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
绝对定位的 App Bar
</Typography>
</Toolbar>
</AppBar>
);
}
5. 结合其他组件
示例:带有图标的 App Bar
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
function IconAppBar() {
return (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
带有图标的 App Bar
</Typography>
</Toolbar>
</AppBar>
);
}
示例:使用下拉菜单的 App Bar
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import AccountCircle from '@mui/icons-material/AccountCircle';
function MenuAppBar() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
下拉菜单的 App Bar
</Typography>
<IconButton
edge="end"
aria-label="account"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>个人资料</MenuItem>
<MenuItem onClick={handleClose}>设置</MenuItem>
<MenuItem onClick={handleClose}>登出</MenuItem>
</Menu>
</Toolbar>
</AppBar>
</div>
);
}
6. 添加样式
可以使用 sx
属性来为 App Bar 添加自定义样式。例如,改变背景色、文字颜色等。
示例:自定义样式的 App Bar
function StyledAppBar() {
return (
<AppBar position="static" sx={{ backgroundColor: '#2196F3' }}>
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1, color: 'white' }}>
自定义样式的 App Bar
</Typography>
</Toolbar>
</AppBar>
);
}
7. 响应式设计
Material UI 的 App Bar 可以根据屏幕大小调整内容。例如,使用 Drawer 组件实现移动设备上的导航。
示例:响应式 App Bar
import Drawer from '@mui/material/Drawer';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import Typography from '@mui/material/Typography';
import { useState } from 'react';
function ResponsiveAppBar() {
const [drawerOpen, setDrawerOpen] = useState(false);
const toggleDrawer = (open) => (event) => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setDrawerOpen(open);
};
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" onClick={toggleDrawer(true)} aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
响应式 App Bar
</Typography>
</Toolbar>
</AppBar>
<Drawer anchor="left" open={drawerOpen} onClose={toggleDrawer(false)}>
<div
role="presentation"
onClick={toggleDrawer(false)}
onKeyDown={toggleDrawer(false)}
>
<Typography variant="h6" sx={{ padding: 2 }}>
导航链接
</Typography>
<Typography>链接 1</Typography>
<Typography>链接 2</Typography>
<Typography>链接 3</Typography>
</div>
</Drawer>
</div>
);
}
8. 总结
在本篇博客中,我们深入探讨了 Material UI 中 App Bar 组件的多种使用方式,包括基本用法、位置属性、结合其他组件、样式定制和响应式设计。App Bar 是构建用户友好的界面不可或缺的部分,通过合理运用 App Bar,可以显著提升用户体验。
希望这些示例能够帮助你在自己的项目中更好地使用 Material UI 的 App Bar 组件,构建出更加优雅和实用的应用程序界面。如果你对其他 Material UI 组件感兴趣,请继续关注我们的系列文章。
chat评论区
评论列表
{{ item.user.nickname || item.user.username }}