Material 3组件库实战：TopAppBar等 - 第3节 Material 3组件库实战：TopAppBar等 - 第3节

📚 课程目录第3章 Material 3组件库生态

## 第3章基础 TopAppBar 实现：导入组件、设置 title 属性、展示默认样式 ### 3.1 原理 TopAppBar 是 Material Design 3 中位于屏幕顶端的导航组件，提供标题、操作按钮和可选的导航图标。其核心作用： - **层级定位**：固定在顶部，始终可见； - **信息传达**：通过 `title` 属性展示页面标题或应用名称； - **操作入口**：左侧可放置返回/菜单按钮，右侧可放置工具栏按钮（如搜索、更多）； - **视觉分层**：默认带轻微投影（elevation）和背景色，区分内容区域。在 `@material/web` 组件库中，`md-top-app-bar` 组件遵循 MD3 规范，内置标题、槽位（slots）和属性，开发者只需极简代码即可获得完整样式。 ### 3.2 实现流程 | 步骤 | 操作 | 说明 | |------|------|------| | 1 | 安装 `@material/web` | 通过 npm 添加依赖 | | 2 | 导入 TopAppBar 组件模块 | 在入口文件或组件中 import | | 3 | 在模板中使用 `` | 设置 `title` 属性并添加其他内容 | | 4 | 运行开发服务器 | 查看默认样式与响应式行为 | ### 3.3 代码实现 **3.3.1 安装依赖**

npm install @material/web

**3.3.2 导入组件模块** 在 JavaScript/TypeScript 入口文件或独立组件文件中：

import '@material/web/top-app-bar/top-app-bar.js';

**3.3.3 在 HTML 模板中使用**

<md-top-app-bar title="我的应用">
  <!-- 左侧导航图标（可选） -->
  <button slot="navigation">☰</button>
  <!-- 右侧操作按钮（可选） -->
  <button slot="action">⋮</button>
</md-top-app-bar>

<main style="padding-top: 64px;">
  <p>页面内容区域</p>
</main>

**3.3.4 完整最小示例（HTML + JS 整合）**

<!DOCTYPE html>
<html>
<head>
  <script type="importmap">
  {
    "imports": {
      "@material/web/": "https://unpkg.com/@material/web@2.1.0/"
    }
  }
  </script>
  <script type="module">
    import '@material/web/top-app-bar/top-app-bar.js';
  </script>
</head>
<body>
  <md-top-app-bar title="基础示例"></md-top-app-bar>

  <main style="padding-top: 64px;">
    <h1>Material 3 TopAppBar 默认样式</h1>
  </main>
</body>
</html>

### 3.4 展示默认样式加载页面后，你将观察到： - 白色背景（或通过自定义主题改变）； - 标题文本居中（MD3 默认），字号约 20px； - 组件高度固定为 64px（桌面）或 56px（移动）； - 底部阴影为 `elevation=2`； - 无导航图标或操作按钮时，标题自动左对齐（取决于浏览器实现）。 > 注意：若未设置 `title` 属性，组件依然会占据空间但标题区域为空。**`title` 属性是强制性的语义属性**，推荐始终设置。 ### 3.5 常见错误与调试 | 错误现象 | 可能原因 | 解决方案 | |---------|---------|---------| | 组件未渲染（空白） | 未正确导入组件模块 | 检查 `import` 路径，确保 `@material/web` 已安装 | | 标题不显示 | 忘记设置 `title` 属性 | 添加 `title="..."` 属性 | | 页面内容被 TopAppBar 遮挡 | 未给 `main` 添加 `padding-top` | 设置 `padding-top: 64px`（桌面）或 `56px`（移动） | | 样式异常（如投影缺失） | 缺少 CSS 变量或主题 | 确保 `@material/web` 提供的基础样式已加载，可引入 `typography.css` 或 `theme.css` | ### 3.6 原理与内部结构下图展示了 `md-top-app-bar` 组件的核心节点布局与层级关系： ### 3.7 对比不同库的 TopAppBar 组件 | 特性 | `@material/web`（MD3 Web 组件） | Angular Material `MatToolbar` | React MUI `AppBar`（MD2） | |------|--------------------------------|------------------------------|---------------------------| | 导入方式 | `import '@material/web/...'` | `import { MatToolbarModule }` | `import { AppBar } from '@mui/material'` | | 标题设置 | `title="..."` 属性 | `...` 放入 | `` 作为子元素 | | 默认 elevation | 2 | 4 | 4 | | 是否内置 MD3 样式 | 是（原生MD3） | 需额外启用 MDC 主题 | 需自定义 `theme` 增加 MD3 支持 | | 自定义插槽 | `slot="navigation"`、`slot="action"` | `MatToolbarRow` 结构 | `children` | ### 3.8 提示与最佳实践

💡 建议：始终在 <md-top-app-bar> 外层包裹 <header> 语义标签，以提升可访问性。

  🔧 调试工具：在浏览器开发者工具中检查组件 shadow DOM 的样式变量（如 --md-top-app-bar-container-background、--md-sys-elevation-shadow-color），可快速定位主题对齐问题。

⚠️ 避免：在移动端未给 <main> 设置合适的 padding-top（/padding-bottom 等），导致内容被 TopAppBar 遮挡。建议使用 CSS 环境变量 env(safe-area-inset-top) 适配刘海屏。

### 3.9 性能与稳定性 - **按需导入**：只导入 `top-app-bar.js` 而非整个 `@material/web`，减少 bundle 体积； - **懒加载**：如果 TopAppBar 在多个路由复用，考虑模块预加载； - **稳定性**：`@material/web` 组件基于 Web Components 标准，对外部框架（React/Vue/Angular）无侵入，兼容性好。至此，你已经完成了基础 TopAppBar 的导入和默认样式展示。下一章将深入定制标题的字体、颜色与对齐方式。