syncfusion-angular-appbar

实现 Syncfusion Angular AppBar

Syncfusion Angular AppBar 组件是一种灵活的导航组件，也称为操作栏或导航栏。它会显示与当前应用屏幕相关的信息和操作，用于展示品牌标识、屏幕标题、导航和操作。AppBar 支持多种高度模式、颜色模式和定位方式，并可与 Buttons、Menus 和 Sidebars 等其他 Syncfusion 组件无缝集成。

何时使用此技能

• 导航栏：为应用创建顶部或底部导航栏
• 固定标题栏：构建滚动时仍保持可见的持久标题栏
• 响应式导航：设计可适应不同屏幕尺寸的导航
• 组件集成：将 AppBar 与 Buttons、Menus、DropDownButtons 和 Sidebars 结合使用
• 品牌标识与布局：显示徽标、标题和操作按钮
• 视觉样式：通过尺寸模式和颜色主题自定义 AppBar 外观
• 内容间距：使用间隔符和分隔符组织 AppBar 内容

组件概览

AppBar 组件提供：

• 定位选项：顶部（默认）、底部、固定
• 尺寸模式：常规（默认）、突出（高）、紧凑
• 颜色模式：浅色、深色、主色、继承
• 内置间距：用于组织内容的间隔元素和分隔符
• 组件集成：可与 Buttons、DropDownButtons、Menus 和 Sidebars 配合使用
• 自定义：CSS 类、自定义样式和主题支持

文档与导航指南

选择与任务相符的参考文档：

入门

📄 阅读： references/getting-started.md

• Angular 环境设置和 Angular CLI 安装
• Syncfusion AppBar 包安装（Ivy 和 ngcc 版本）
• 基本组件实现
• CSS 导入和主题配置
• 运行应用

定位与布局

📄 阅读： references/positioning-and-layout.md

• AppBar 顶部定位（默认）
• AppBar 底部定位
• 滚动时的 AppBar 固定行为
• position 和 isSticky 属性配置
• 各种定位类型的示例

尺寸与颜色

📄 阅读： references/sizing-and-colors.md

• 尺寸模式：常规、突出、紧凑（mode 属性）
• 颜色模式：浅色、深色、主色、继承（colorMode 属性）
• 不同组合的视觉自定义
• 突出型 AppBar 的高度调整
• 所有配置的完整示例

设计模式

📄 阅读： references/design-patterns.md

• 使用间隔元素调整 AppBar 内容间距
• 使用分隔符进行视觉分组
• AppBar 与 Menu 组件集成
• AppBar 与 Button 和 DropDownButton 集成
• AppBar 与 Sidebar 集成
• 使用媒体查询实现响应式行为

样式与自定义

📄 阅读： references/styling-and-customization.md

• 内置 CSS 类（.e-appbar、.e-prominent、.e-dense、.e-light、.e-dark、.e-primary、.e-inherit）
• CssClass 属性用于自定义样式
• HtmlAttributes 指令用于内联属性
• 与 Theme Studio 集成
• 自定义主题和样式方法

API 参考

📄 阅读： references/api-reference.md - 完整 API 文档

• 全部 9 个属性及其用法示例和默认值
• 全部 2 个事件（created、destroyed）及其示例
• CSS 类和 HTML 元素
• 属性组合和模式
• 无障碍功能和国际化

快速入门

以下是一个最简 AppBar 实现：

import { Component } from "@angular/core";
import { AppBarModule } from '@syncfusion/ej2-angular-navigations'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

@Component({
  imports: [AppBarModule, ButtonModule],
  standalone: true,
  selector: "app-root",
  template: `
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <span style="margin: 0 5px">Angular AppBar</span>
        <div class="e-appbar-spacer"></div>
        <button ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>
  `
})
export class AppComponent { }

将 CSS 导入添加到 style.css：

@import "../node_modules/@syncfusion/ej2-base/styles/material3";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material3";

常见模式

模式 1：使用间隔符分布内容

使用 .e-appbar-spacer 将内容推至两端：

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">FREE TRIAL</button>
</ejs-appbar>

模式 2：内容分组分隔符

使用 .e-appbar-separator 以视觉方式分隔按钮组：

<ejs-appbar colorMode="Primary">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
  <div class="e-appbar-separator"></div>
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
</ejs-appbar>

模式 3：底部定位的 AppBar

将 position 设置为 Bottom，用作页脚式导航：

<ejs-appbar colorMode="Primary" position="Bottom">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
  <div class="e-appbar-spacer"></div>
  <button ejs-button cssClass="e-inherit">Settings</button>
</ejs-appbar>

模式 4：粘性页眉

使用 isSticky 属性，让页眉在滚动时保持显示：

<ejs-appbar colorMode="Primary" [isSticky]="true">
  <button ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
  <span>My App</span>
</ejs-appbar>

关键属性参考

属性	类型	默认值	用途
position	"Top" | "Bottom"	"Top"	AppBar 的垂直位置
isSticky	boolean	false	让 AppBar 在滚动时保持固定
mode	"Regular" | "Prominent" | "Dense"	"Regular"	控制 AppBar 的高度
colorMode	"Light" | "Dark" | "Primary" | "Inherit"	"Light"	设置配色方案
cssClass	string	-	应用自定义 CSS 类
enablePersistence	boolean	false	在重新加载之间保留组件状态
enableRtl	boolean	false	启用从右到左的方向
htmlAttributes	Record	-	自定义 HTML 属性
locale	string	"en-US"	本地化设置

→ 查看 API 参考，了解包含示例的完整 API 文档

相关 Syncfusion 组件

• Button - AppBar 中的交互式按钮
• DropDownButton - AppBar 中的下拉菜单
• Menu - 菜单栏集成
• Sidebar - 与 AppBar 搭配使用的侧边导航
• Toolbar - 样式不同的类似操作栏组件

---

准备好开始实现了吗？ 请从 references/getting-started.md 开始，设置你的第一个 AppBar；也可以直接跳转到符合你使用场景的具体参考文档。