syncfusion-aspnetcore-appbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion AppBar

实现Syncfusion AppBar组件

When to Use This Skill

何时使用此组件

Use the AppBar component when you need to:

Create top or bottom navigation bars with consistent branding and action placement
Display application titles and branding with sizing flexibility (regular, prominent, or dense modes)
Provide multiple color themes to match application design (light, dark, primary, or inherited colors)
Support responsive layouts that adapt to different screen sizes with media queries
Integrate navigation elements like menus, buttons, and sidebars using the inheritance system
Implement sticky/fixed positioning for persistent access to top-level actions during scrolling
Support right-to-left (RTL) languages with built-in directional support

当你需要以下功能时，请使用AppBar组件：

创建顶部或底部导航栏，具备一致的品牌标识和操作按钮布局
显示应用标题和品牌标识，支持灵活的尺寸模式（常规、醒目或紧凑模式）
提供多种颜色主题，匹配应用设计风格（浅色、深色、主色调或继承父元素颜色）
支持响应式布局，通过媒体查询适配不同屏幕尺寸
集成导航元素，如菜单、按钮和侧边栏，使用继承系统
实现粘性/固定定位，滚动时仍可持久访问顶级操作按钮
支持从右到左（RTL）语言，内置方向支持

Component Overview

组件概述

The Syncfusion AppBar is a flexible header component that displays information and actions related to the current application screen. It provides:

Positioning Options: Top (default) or bottom placement
Size Flexibility: Regular (default), Prominent (larger), or Dense (compressed) heights
Color Modes: Light, Dark, Primary, or Inherit from parent
Sticky Support: Fixed positioning during page scrolling via
```
isSticky
```
property
Content Layout: Spacer and Separator elements for organizing content
Component Integration: Seamless styling for nested Button, DropDownButton, Menu, and TextBox via
```
e-inherit
```
CSS class
Responsive Design: Full media query support for adaptive layouts
Localization: Custom locale support with RTL rendering

Syncfusion AppBar是一个灵活的头部组件，用于显示当前应用屏幕的相关信息和操作。它提供以下功能：

定位选项：顶部（默认）或底部放置
尺寸灵活性：常规（默认）、醒目（更大尺寸）或紧凑（压缩）高度
颜色模式：浅色、深色、主色调或继承父元素颜色
粘性支持：通过
```
isSticky
```
属性实现页面滚动时的固定定位
内容布局：使用间隔符（Spacer）和分隔符（Separator）元素组织内容
组件集成：通过
```
e-inherit
```
CSS类为嵌套的Button、DropDownButton、Menu和TextBox提供无缝样式
响应式设计：全面支持媒体查询以实现自适应布局
本地化：自定义区域设置支持及RTL渲染

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Prerequisites and system requirements verification
Project creation using Microsoft Templates or Syncfusion Extension
NuGet package installation and configuration
Tag Helper registration in _ViewImports.cshtml
Stylesheet and script references (CDN setup)
Script Manager registration
Basic AppBar implementation
First render and verification

📄 阅读： references/getting-started.md

先决条件和系统要求验证
使用Microsoft模板或Syncfusion扩展创建项目
NuGet包安装与配置
在_ViewImports.cshtml中注册Tag Helper
样式表和脚本引用（CDN设置）
注册Script Manager
基础AppBar实现
首次渲染与验证

Positioning and Layout

定位与布局

📄 Read: references/positioning.md

Top positioning behavior (default)
Bottom positioning with
```
position="Bottom"
```
property
Sticky positioning for fixed headers with
```
isSticky="true"
```
Combining position with responsive design
Real-world navigation patterns and use cases

📄 阅读： references/positioning.md

顶部定位行为（默认）
使用
```
position="Bottom"
```
属性实现底部定位
使用
```
isSticky="true"
```
实现固定头部的粘性定位
定位与响应式设计的结合
实际导航模式与使用场景

Sizing Modes

尺寸模式

📄 Read: references/sizing-modes.md

Regular mode (default height,
```
mode="Regular"
```
)
Prominent mode for larger content (
```
mode="Prominent"
```
)
Dense mode for compact layouts (
```
mode="Dense"
```
)
Use case guidance and content adaptation per mode
Height customization strategies

📄 阅读： references/sizing-modes.md

常规模式（默认高度，
```
mode="Regular"
```
）
醒目模式用于显示更大内容（
```
mode="Prominent"
```
）
紧凑模式用于紧凑布局（
```
mode="Dense"
```
）
各模式的使用场景指南与内容适配
高度自定义策略

Color and Theme Modes

颜色与主题模式

📄 Read: references/color-modes.md

Light mode (default appearance,
```
colorMode="Light"
```
)
Dark mode for contrast (
```
colorMode="Dark"
```
)
Primary mode for brand colors (
```
colorMode="Primary"
```
)
Inherit mode for parent element colors (
```
colorMode="Inherit"
```
)
Integration with CSS theme system

📄 阅读： references/color-modes.md

浅色模式（默认外观，
```
colorMode="Light"
```
）
深色模式用于高对比度（
```
colorMode="Dark"
```
）
主色调模式用于品牌颜色（
```
colorMode="Primary"
```
）
继承模式用于继承父元素颜色（
```
colorMode="Inherit"
```
）
与CSS主题系统的集成

Design Patterns and Layouts

设计模式与布局

📄 Read: references/design-layouts.md

Spacer element for dynamic content distribution
Separator element for visual content grouping
Media queries for responsive AppBar design
Component integration patterns (Menu, Button, DropDownButton with
```
e-inherit
```
)
SideBar integration and toggle patterns
Real-world design examples and best practices

📄 阅读： references/design-layouts.md

使用间隔符元素实现动态内容分布
使用分隔符元素实现视觉内容分组
用于响应式AppBar设计的媒体查询
组件集成模式（Menu、Button、DropDownButton搭配
```
e-inherit
```
）
侧边栏集成与切换模式
实际设计示例与最佳实践

Customization and Advanced Features

自定义与高级功能

📄 Read: references/customization.md

CSS class customization via
```
cssClass
```
property
HTML attributes configuration via
```
htmlAttributes
```
Right-to-left (RTL) support with
```
enableRtl="true"
```
Component state persistence with
```
enablePersistence="true"
```
Locale customization for internationalization
Advanced styling and edge cases

📄 阅读： references/customization.md

通过
```
cssClass
```
属性自定义CSS类
通过
```
htmlAttributes
```
配置HTML属性
使用
```
enableRtl="true"
```
支持从右到左（RTL）语言
使用
```
enablePersistence="true"
```
实现组件状态持久化
自定义区域设置以支持国际化
高级样式与边缘情况处理

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

All properties with type information and usage
Event declarations with proper TagHelper binding syntax
Enumeration values for position, mode, and color
Code examples for APIs not covered in other references
API summary and cross-references

📄 阅读： references/api-reference.md

所有属性的类型信息与用法
事件声明及正确的TagHelper绑定语法
定位、模式和颜色的枚举值
其他参考文档未覆盖的API代码示例
API摘要与交叉引用

Quick Start Example

快速入门示例

Create a basic AppBar with navigation buttons:

html

<div class="col-lg-12 control-section default-appbar-section">
    <ejs-appbar id="defaultAppBar" colorMode="Primary">
        <e-content-template>
            <ejs-button aria-label="menu" id="menuButton" cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
            <span class="regular" style="margin:0 5px">My Application</span>
            <div class="e-appbar-spacer"></div>
            <ejs-button id="trialButton" cssClass="e-inherit" content="Get Started"></ejs-button>
        </e-content-template>
    </ejs-appbar>
</div>

Key Elements:

```
colorMode="Primary"
```
- Uses primary brand color theme
```
<e-content-template>
```
- Container for AppBar content
```
cssClass="e-inherit"
```
- Buttons inherit AppBar colors
```
<div class="e-appbar-spacer"></div>
```
- Pushes content to opposite sides

创建一个包含导航按钮的基础AppBar：

html

<div class="col-lg-12 control-section default-appbar-section">
    <ejs-appbar id="defaultAppBar" colorMode="Primary">
        <e-content-template>
            <ejs-button aria-label="menu" id="menuButton" cssClass="e-inherit" iconCss="e-icons e-menu"></ejs-button>
            <span class="regular" style="margin:0 5px">My Application</span>
            <div class="e-appbar-spacer"></div>
            <ejs-button id="trialButton" cssClass="e-inherit" content="Get Started"></ejs-button>
        </e-content-template>
    </ejs-appbar>
</div>

关键元素：

```
colorMode="Primary"
```
- 使用主品牌颜色主题
```
<e-content-template>
```
- AppBar内容的容器
```
cssClass="e-inherit"
```
- 按钮继承AppBar的颜色样式
```
<div class="e-appbar-spacer"></div>
```
- 将内容推至两侧

Common Patterns

常见模式

Pattern 1: Top Navigation with Title and Actions

模式1：带标题和操作按钮的顶部导航

html

<ejs-appbar id="navAppBar" position="Top">
    <e-content-template>
        <!-- Left: Logo/Menu -->
        <ejs-button iconCss="e-icons e-menu" cssClass="e-inherit"></ejs-button>
        <!-- Center: Title -->
        <span style="margin: 0 auto;">Dashboard</span>
        <!-- Right: User Actions -->
        <div class="e-appbar-spacer"></div>
        <ejs-button content="Profile" cssClass="e-inherit"></ejs-button>
    </e-content-template>
</ejs-appbar>

html

<ejs-appbar id="navAppBar" position="Top">
    <e-content-template>
        <!-- 左侧：Logo/菜单 -->
        <ejs-button iconCss="e-icons e-menu" cssClass="e-inherit"></ejs-button>
        <!-- 中间：标题 -->
        <span style="margin: 0 auto;">Dashboard</span>
        <!-- 右侧：用户操作 -->
        <div class="e-appbar-spacer"></div>
        <ejs-button content="Profile" cssClass="e-inherit"></ejs-button>
    </e-content-template>
</ejs-appbar>

Pattern 2: Sticky Header for Persistent Navigation

模式2：用于持久导航的粘性头部

html

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        <!-- Sticky content remains visible during scroll -->
    </e-content-template>
</ejs-appbar>

html

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        <!-- 粘性内容在滚动时保持可见 -->
    </e-content-template>
</ejs-appbar>

Pattern 3: Prominent Mode for Feature Headers

模式3：用于特色头部的醒目模式

html

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        <!-- Larger area for rich content, titles, images -->
    </e-content-template>
</ejs-appbar>

html

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        <!-- 更大的区域用于丰富内容、标题和图片 -->
    </e-content-template>
</ejs-appbar>

Key Properties Overview

关键属性概述

Property	Type	Default	Purpose
`position`	AppBarPosition	Top	Placement: Top or Bottom
`mode`	AppBarMode	Regular	Height: Regular, Prominent, or Dense
`colorMode`	AppBarColor	Light	Theme: Light, Dark, Primary, or Inherit
`isSticky`	boolean	false	Fixed positioning during scroll
`cssClass`	string	-	Custom CSS classes for styling
`enableRtl`	boolean	false	Right-to-left language support
`enablePersistence`	boolean	false	State persistence between page reloads
`locale`	string	en-US	Custom culture and localization
`htmlAttributes`	Record	-	Additional HTML attributes

属性	类型	默认值	用途
`position`	AppBarPosition	Top	位置：顶部或底部
`mode`	AppBarMode	Regular	高度：常规、醒目或紧凑
`colorMode`	AppBarColor	Light	主题：浅色、深色、主色调或继承
`isSticky`	boolean	false	滚动时固定定位
`cssClass`	string	-	用于样式自定义的CSS类
`enableRtl`	boolean	false	从右到左语言支持
`enablePersistence`	boolean	false	页面重载之间的状态持久化
`locale`	string	en-US	自定义文化与本地化
`htmlAttributes`	Record	-	额外的HTML属性

Common Use Cases

常见使用场景

E-Commerce Header: Top sticky AppBar with logo, search, and cart icon
Dashboard Navigation: Prominent AppBar with breadcrumbs and quick actions
Mobile Navigation: Dense AppBar with bottom positioning for touch-friendly layouts
Admin Panel: Dark themed AppBar with user menu and notification badges
Content Platform: Featured article header using Prominent mode with image background

Next Steps:

For setup instructions, read Getting Started Guide
For design decisions, read Positioning and Sizing Modes
For complete API details, read API Reference

电商头部：顶部粘性AppBar，包含Logo、搜索框和购物车图标
仪表板导航：醒目模式AppBar，包含面包屑和快速操作按钮
移动端导航：紧凑模式AppBar，底部放置以适配触控友好布局
管理面板：深色主题AppBar，包含用户菜单和通知徽章
内容平台：使用醒目模式的特色文章头部，带图片背景

下一步：

如需设置说明，请阅读快速入门指南
如需设计决策指导，请阅读定位和尺寸模式
如需完整API详情，请阅读API参考