syncfusion-angular-appbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular AppBar

实现Syncfusion Angular AppBar

The Syncfusion Angular AppBar component is a flexible navigation component also known as an action bar or nav bar. It displays information and actions related to the current application screen and is used to show branding, screen titles, navigation, and actions. The AppBar supports height modes, color modes, positioning, and integrates seamlessly with other Syncfusion components like Buttons, Menus, and Sidebars.

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

When to Use This Skill

何时使用此技能

Navigation Headers: Creating top or bottom navigation bars for applications
Sticky Headers: Building persistent headers that stay visible while scrolling
Responsive Navigation: Designing navigation that adapts to different screen sizes
Component Integration: Combining AppBar with Buttons, Menus, DropDownButtons, and Sidebars
Branding & Layout: Displaying logos, titles, and action buttons
Visual Styling: Customizing AppBar appearance with size modes and color themes
Content Spacing: Using spacers and separators to organize AppBar content

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

Component Overview

组件概述

The AppBar component provides:

Positioning options: Top (default), Bottom, Sticky
Size modes: Regular (default), Prominent (tall), Dense (compact)
Color modes: Light, Dark, Primary, Inherit
Built-in spacing: Spacer elements and Separators for content organization
Component integration: Works with Buttons, DropDownButtons, Menus, and Sidebars
Customization: CSS classes, custom styling, and theme support

AppBar组件提供以下功能：

定位选项：顶部（默认）、底部、粘性
尺寸模式：Regular（默认）、Prominent（高）、Dense（紧凑）
颜色模式：Light、Dark、Primary、Inherit
内置间距：用于内容组织的间隔元素和分隔符
组件集成：可与Buttons、DropDownButtons、Menus和Sidebars配合使用
自定义功能：CSS类、自定义样式和主题支持

Documentation and Navigation Guide

文档与导航指南

Choose the reference that matches your task:

选择与你的任务匹配的参考文档：

Getting Started

入门指南

📄 Read: references/getting-started.md

Angular environment setup and Angular CLI installation
Syncfusion AppBar package installation (Ivy and ngcc versions)
Basic component implementation
CSS imports and theme configuration
Running the application

📄 阅读： references/getting-started.md

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

Positioning and Layout

定位与布局

📄 Read: references/positioning-and-layout.md

Top AppBar positioning (default)
Bottom AppBar positioning
Sticky AppBar behavior during scrolling
Position and isSticky property configuration
Examples for each positioning type

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

顶部AppBar定位（默认）
底部AppBar定位
滚动时的粘性AppBar行为
Position和isSticky属性配置
每种定位类型的示例

Sizing and Colors

尺寸与颜色

📄 Read: references/sizing-and-colors.md

Size modes: Regular, Prominent, Dense (mode property)
Color modes: Light, Dark, Primary, Inherit (colorMode property)
Visual customization with different combinations
Height adjustments for Prominent AppBar
Comprehensive examples for all configurations

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

尺寸模式：Regular、Prominent、Dense（mode属性）
颜色模式：Light、Dark、Primary、Inherit（colorMode属性）
不同组合的视觉自定义
Prominent AppBar的高度调整
所有配置的综合示例

Design Patterns

设计模式

📄 Read: references/design-patterns.md

Spacer element for spacing between AppBar content
Separator element for visual grouping
AppBar with Menu component integration
AppBar with Button and DropDownButton integration
AppBar with Sidebar integration
Media queries for responsive behavior

📄 阅读： references/design-patterns.md

用于AppBar内容间距的间隔元素
用于视觉分组的分隔元素
AppBar与Menu组件集成
AppBar与Button和DropDownButton集成
AppBar与Sidebar集成
响应式行为的媒体查询

Styling and Customization

样式与自定义

📄 Read: references/styling-and-customization.md

Built-in CSS classes (.e-appbar, .e-prominent, .e-dense, .e-light, .e-dark, .e-primary, .e-inherit)
CssClass property for custom styling
HtmlAttributes directive for inline attributes
Theme Studio integration
Custom theming and styling approaches

📄 阅读： 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 Reference

API参考

📄 Read: references/api-reference.md - Complete API Documentation

All 9 properties with usage examples and defaults
All 2 events (created, destroyed) with examples
CSS classes and HTML elements
Property combinations and patterns
Accessibility and internationalization

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

全部9个属性及使用示例与默认值
全部2个事件（created、destroyed）及示例
CSS类和HTML元素
属性组合与模式
可访问性与国际化

Quick Start

快速开始

Here's a minimal AppBar implementation:

typescript

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

Add CSS imports to your

style.css

css

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

以下是最简版AppBar实现：

typescript

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导入：

css

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

Common Patterns

常见模式

Pattern 1: Spacer for Content Distribution

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

Use

.e-appbar-spacer

to push content to the ends:

typescript

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

使用

.e-appbar-spacer

将内容推至两端：

typescript

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

Pattern 2: Separator for Content Grouping

模式2：用于内容分组的分隔符

Use

.e-appbar-separator

to visually separate button groups:

typescript

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

使用

.e-appbar-separator

在视觉上分隔按钮组：

typescript

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

Pattern 3: Bottom Positioned AppBar

模式3：底部定位的AppBar

Set position to Bottom for footer-style navigation:

typescript

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

将position设置为Bottom，实现页脚式导航：

typescript

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

Pattern 4: Sticky Header

模式4：粘性页眉

Use isSticky property for headers that persist while scrolling:

typescript

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

使用isSticky属性实现滚动时保持持久化的页眉：

typescript

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

Key Properties Reference

关键属性参考

Property	Type	Default	Purpose
`position`	"Top" \| "Bottom"	"Top"	Vertical position of AppBar
`isSticky`	boolean	false	Makes AppBar sticky during scrolling
`mode`	"Regular" \| "Prominent" \| "Dense"	"Regular"	Controls AppBar height
`colorMode`	"Light" \| "Dark" \| "Primary" \| "Inherit"	"Light"	Sets color scheme
`cssClass`	string	-	Applies custom CSS classes
`enablePersistence`	boolean	false	Persist component state between reloads
`enableRtl`	boolean	false	Enable right-to-left direction
`htmlAttributes`	Record	-	Custom HTML attributes
`locale`	string	"en-US"	Localization settings

→ See API Reference for complete API documentation with examples

属性	类型	默认值	用途
`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-angular-appbar

Original

Translation

Implementing Syncfusion Angular AppBar

实现Syncfusion Angular AppBar

When to Use This Skill

何时使用此技能

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Positioning and Layout

定位与布局

Sizing and Colors

尺寸与颜色

Design Patterns

设计模式

Styling and Customization

样式与自定义

API Reference

API参考

Quick Start

快速开始

Common Patterns

常见模式

Pattern 1: Spacer for Content Distribution

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

Pattern 2: Separator for Content Grouping

模式2：用于内容分组的分隔符

Pattern 3: Bottom Positioned AppBar

模式3：底部定位的AppBar

Pattern 4: Sticky Header

模式4：粘性页眉

Key Properties Reference

关键属性参考

Related Syncfusion Components

相关Syncfusion组件