syncfusion-angular-appbar

用途

Syncfusion Angular AppBar 是一个灵活的导航组件，也被称为操作栏（action bar）或导航栏（nav bar）。它用于显示与当前应用屏幕相关的信息和操作，常用于展示品牌标识、屏幕标题、导航入口和操作按钮。该技能面向需要在 Angular 应用中实现 AppBar 的开发者，提供从环境搭建到样式定制的完整指导。

主要能力

AppBar 组件提供以下能力：

定位选项：Top（默认）、Bottom、Sticky。
尺寸模式：Regular（默认）、Prominent（较高）、Dense（紧凑）。
颜色模式：Light、Dark、Primary、Inherit。
内置间距：Spacer 元素和 Separator 分隔符，用于内容组织。
组件集成：可与 Buttons、DropDownButtons、Menus 和 Sidebars 配合使用。
自定义：支持 CSS 类、自定义样式和主题支持。

使用方式

技能文档按任务类型提供参考文件，可按需查阅：

入门（references/getting-started.md）：Angular 环境搭建与 Angular CLI 安装、Syncfusion AppBar 包安装（Ivy 和 ngcc 版本）、基础组件实现、CSS 导入与主题配置、运行应用。
定位与布局（references/positioning-and-layout.md）：Top 定位（默认）、Bottom 定位、Sticky 滚动行为、position 与 isSticky 属性配置及各定位示例。
尺寸与颜色（references/sizing-and-colors.md）：mode 属性（Regular、Prominent、Dense）、colorMode 属性（Light、Dark、Primary、Inherit）、不同组合的视觉定制、Prominent AppBar 的高度调整及完整示例。
设计模式（references/design-patterns.md）：Spacer 元素用于内容间距、Separator 元素用于视觉分组、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）：全部 9 个属性及用法示例和默认值、2 个事件（created、destroyed）及示例、CSS 类与 HTML 元素、属性组合与模式、无障碍与国际化。

最小实现示例：

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 { }

在 style.css 中添加 CSS 导入：

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

常见模式：

模式 1：使用 .e-appbar-spacer 将内容推向两端。
模式 2：使用 .e-appbar-separator 对按钮组进行视觉分隔。
模式 3：设置 position="Bottom" 实现底部导航。
模式 4：使用 [isSticky]="true" 实现滚动时保持可见的粘性页头。

关键属性：position（"Top" | "Bottom"，默认 "Top"）、isSticky（boolean，默认 false）、mode（"Regular" | "Prominent" | "Dense"，默认 "Regular"）、colorMode（"Light" | "Dark" | "Primary" | "Inherit"，默认 "Light"）、cssClass（string）、enablePersistence（boolean，默认 false）、enableRtl（boolean，默认 false）、htmlAttributes（Record）、locale（string，默认 "en-US"）。

适用场景

导航头部：为应用创建顶部或底部导航栏。
粘性页头：构建滚动时保持可见的持久页头。
响应式导航：设计适应不同屏幕尺寸的导航。
组件集成：将 AppBar 与 Buttons、Menus、DropDownButtons 和 Sidebars 组合使用。
品牌与布局：展示 logo、标题和操作按钮。
视觉样式：通过尺寸模式和颜色主题定制 AppBar 外观。
内容间距：使用 spacer 和 separator 组织 AppBar 内容。

限制

资料未提供关于收费、价格、平台兼容性范围、性能指标或具体使用步骤之外的限制说明，相关内容暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制