syncfusion-blazor-appbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor AppBar Component

Syncfusion Blazor AppBar组件

The Syncfusion Blazor AppBar is a navigation component that displays information and actions related to the current application screen. It provides a consistent header area for branding, navigation, and actions across your application with flexible configuration options for appearance and behavior.

Syncfusion Blazor AppBar是一个导航组件，用于显示与当前应用屏幕相关的信息和操作。它为应用提供了一致的标题区域，用于品牌展示、导航和操作，同时提供灵活的外观和行为配置选项。

When to Use This Skill

何时使用本技能

Use this skill when implementing an AppBar in Blazor applications that requires:

Navigation headers with branding, menus, and action buttons
Application toolbars with context-specific actions and controls
Responsive headers that adapt to different screen sizes
Fixed or sticky positioning at the top or bottom of the viewport
Integration with other components like menus, buttons, sidebars
Custom styling to match application themes and branding

当你在Blazor应用中实现满足以下需求的AppBar时，可以使用本技能：

带有品牌标识、菜单和操作按钮的导航标题
带有特定上下文操作和控件的应用工具栏
可适配不同屏幕尺寸的响应式标题
固定或粘性定位在视口顶部或底部的标题栏
与菜单、按钮、侧边栏等其他组件集成
可自定义样式以匹配应用主题和品牌的标题栏

Component Overview

组件概述

The AppBar component provides:

Flexible layout with spacers and separators for organizing content
Multiple size modes (Regular, Prominent, Dense) for different use cases
Multiple color modes (Light, Dark, Primary, Inherit) for theming
Positioning options (Top, Bottom, Sticky) for layout control
Child component support for buttons, menus, dropdowns, and custom content
Responsive design with media query support

AppBar组件提供以下特性：

带有间隔符和分隔符的灵活布局，用于组织内容
多种尺寸模式（常规、突出、紧凑），适用于不同使用场景
多种颜色模式（浅色、深色、主色调、继承），用于主题适配
多种定位选项（顶部、底部、粘性），用于布局控制
支持子组件，可集成按钮、菜单、下拉菜单和自定义内容
支持媒体查询的响应式设计

Documentation and Navigation Guide

文档与导航指南

Getting Started and Installation

入门与安装

📄 Read: references/getting-started.md

Read this reference when you need to:

Install and configure the Syncfusion Blazor AppBar package
Add required namespaces and service registrations
Include stylesheet and script resources
Create your first basic AppBar implementation
Add buttons and spacers to the AppBar
Understand the component's basic structure and usage

📄 阅读： references/getting-started.md

当你需要以下操作时，请阅读本参考文档：

安装和配置Syncfusion Blazor AppBar包
添加所需的命名空间和服务注册
引入样式表和脚本资源
创建你的第一个基础AppBar实现
向AppBar添加按钮和间隔符
理解组件的基本结构和用法

Size and Color Configuration

尺寸与颜色配置

📄 Read: references/size-and-color.md

Read this reference when you need to:

Configure AppBar height with size modes (Regular, Prominent, Dense)
Use Regular AppBar for standard height navigation
Implement Prominent AppBar for larger titles, images, or hero sections
Apply Dense AppBar for compact, space-efficient headers
Configure color modes (Light, Dark, Primary, Inherit)
Apply Light mode for default light backgrounds
Apply Dark mode for dark-themed applications
Apply Primary mode using theme's primary colors
Apply Inherit mode to use parent element styling
Combine size and color modes for different visual effects

📄 阅读： references/size-and-color.md

当你需要以下操作时，请阅读本参考文档：

通过尺寸模式（常规、突出、紧凑）配置AppBar高度
使用常规AppBar作为标准高度导航栏
实现突出AppBar以展示大标题、图片或英雄区域
使用紧凑AppBar创建节省空间的标题栏
配置颜色模式（浅色、深色、主色调、继承）
应用浅色模式作为默认浅色背景
应用深色模式适配深色主题应用
应用主色调模式使用主题的主色调
应用继承模式使用父元素样式
组合尺寸和颜色模式以实现不同视觉效果

Positioning Options

定位选项

📄 Read: references/positioning.md

Read this reference when you need to:

Control AppBar position with the Position property
Implement Top AppBar positioning (default)
Implement Bottom AppBar for bottom-anchored navigation
Enable Sticky AppBar behavior with the IsSticky property
Handle scrolling behavior with sticky positioning
Manage content layout around positioned AppBars
Understand positioning interactions with page content

📄 阅读： references/positioning.md

当你需要以下操作时，请阅读本参考文档：

通过Position属性控制AppBar位置
实现顶部AppBar定位（默认）
实现底部AppBar作为底部锚定导航栏
通过IsSticky属性启用粘性AppBar行为
处理粘性定位的滚动行为
管理定位AppBar周围的内容布局
理解定位与页面内容的交互

Design UI Elements

UI元素设计

📄 Read: references/design-ui.md

Read this reference when you need to:

Add spacing with AppBarSpacer component
Add visual separators with AppBarSeparator component
Implement responsive design with media queries
Integrate SfMenu component for navigation menus
Integrate SfButton and SfDropDownButton for actions
Integrate SfSidebar with AppBar toggle button
Control sidebar expand/collapse from AppBar
Style child components with e-inherit CSS class
Build complex AppBar layouts with multiple components

📄 阅读： references/design-ui.md

当你需要以下操作时，请阅读本参考文档：

使用AppBarSpacer组件添加间距
使用AppBarSeparator组件添加视觉分隔线
通过媒体查询实现响应式设计
集成SfMenu组件作为导航菜单
集成SfButton和SfDropDownButton作为操作控件
将SfSidebar与AppBar切换按钮集成
通过AppBar控制侧边栏的展开/折叠
使用e-inherit CSS类样式化子组件
使用多个组件构建复杂的AppBar布局

Styling and Customization

样式与自定义

📄 Read: references/styling.md

Read this reference when you need to:

Customize AppBar appearance with CSS classes
Use the CssClass property for custom styling
Override default CSS for specific elements
Apply custom background and font colors
Use HtmlAttributes for additional HTML attributes
Add custom aria-label attributes
Integrate with Theme Studio for theming
Apply CSS variable overrides
Understand available CSS class selectors

📄 阅读： references/styling.md

当你需要以下操作时，请阅读本参考文档：

使用CSS类自定义AppBar外观
使用CssClass属性进行自定义样式
覆盖特定元素的默认CSS
应用自定义背景和字体颜色
使用HtmlAttributes添加额外HTML属性
添加自定义aria-label属性
与Theme Studio集成进行主题定制
应用CSS变量覆盖
了解可用的CSS类选择器

Quick Start Example

快速入门示例

Here's a minimal example to create a basic AppBar with navigation:

cshtml

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="app-title">My Application</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

Prerequisites:

Install
```
Syncfusion.Blazor.Navigations
```
package
Add
```
@using Syncfusion.Blazor.Navigations
```
to _Imports.razor
Register service with
```
builder.Services.AddSyncfusionBlazor()
```
Include theme CSS and Syncfusion script in index.html

以下是创建带有导航功能的基础AppBar的最简示例：

cshtml

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
    <span class="app-title">My Application</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Login"></SfButton>
</SfAppBar>

前置条件：

安装
```
Syncfusion.Blazor.Navigations
```
包
在_Imports.razor中添加
```
@using Syncfusion.Blazor.Navigations
```
通过
```
builder.Services.AddSyncfusionBlazor()
```
注册服务
在index.html中引入主题CSS和Syncfusion脚本

Common Patterns

常见模式

Application Header with Logo and Actions

带有Logo和操作的应用标题

cshtml

<SfAppBar ColorMode="AppBarColor.Light">
    <a href="/" class="logo-link">
        <img src="logo.svg" alt="Company Logo" height="30" />
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Features"></SfButton>
    <SfButton CssClass="e-inherit" Content="Pricing"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    <AppBarSeparator></AppBarSeparator>
    <SfButton IsPrimary="true" Content="Sign Up"></SfButton>
</SfAppBar>

cshtml

<SfAppBar ColorMode="AppBarColor.Light">
    <a href="/" class="logo-link">
        <img src="logo.svg" alt="Company Logo" height="30" />
    </a>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Features"></SfButton>
    <SfButton CssClass="e-inherit" Content="Pricing"></SfButton>
    <SfButton CssClass="e-inherit" Content="About"></SfButton>
    <AppBarSeparator></AppBarSeparator>
    <SfButton IsPrimary="true" Content="Sign Up"></SfButton>
</SfAppBar>

Responsive AppBar with Menu Toggle

带有菜单切换的响应式AppBar

cshtml

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" @onclick="ToggleMenu"></SfButton>
    <span class="app-title">Dashboard</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

cshtml

<SfAppBar ColorMode="AppBarColor.Primary">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-menu" @onclick="ToggleMenu"></SfButton>
    <span class="app-title">Dashboard</span>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-settings"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Sticky AppBar with Navigation Menu

带有导航菜单的粘性AppBar

cshtml

<SfAppBar ColorMode="AppBarColor.Dark" IsSticky="true">
    <span class="brand">MyApp</span>
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Home"></MenuItem>
            <MenuItem Text="Products">
                <MenuItems>
                    <MenuItem Text="Product 1"></MenuItem>
                    <MenuItem Text="Product 2"></MenuItem>
                </MenuItems>
            </MenuItem>
            <MenuItem Text="Contact"></MenuItem>
        </MenuItems>
    </SfMenu>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Account"></SfButton>
</SfAppBar>

cshtml

<SfAppBar ColorMode="AppBarColor.Dark" IsSticky="true">
    <span class="brand">MyApp</span>
    <SfMenu CssClass="e-inherit" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Home"></MenuItem>
            <MenuItem Text="Products">
                <MenuItems>
                    <MenuItem Text="Product 1"></MenuItem>
                    <MenuItem Text="Product 2"></MenuItem>
                </MenuItems>
            </MenuItem>
            <MenuItem Text="Contact"></MenuItem>
        </MenuItems>
    </SfMenu>
    <AppBarSpacer></AppBarSpacer>
    <SfButton CssClass="e-inherit" Content="Account"></SfButton>
</SfAppBar>

Bottom AppBar for Mobile Actions

用于移动端操作的底部AppBar

cshtml

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-heart"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

cshtml

<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
    <SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-search"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-heart"></SfButton>
    <SfButton CssClass="e-inherit" IconCss="e-icons e-user"></SfButton>
</SfAppBar>

Key Properties Reference

关键属性参考

Property	Type	Default	Description
`ColorMode`	AppBarColor	Light	Sets the background color mode (Light, Dark, Primary, Inherit)
`Mode`	AppBarMode	Regular	Sets the height mode (Regular, Prominent, Dense)
`Position`	AppBarPosition	Top	Sets the position (Top, Bottom)
`IsSticky`	bool	false	Enables sticky behavior on scroll
`CssClass`	string	-	Custom CSS class for styling
`HtmlAttributes`	Dictionary	-	Additional HTML attributes

属性	类型	默认值	描述
`ColorMode`	AppBarColor	Light	设置背景颜色模式（浅色、深色、主色调、继承）
`Mode`	AppBarMode	Regular	设置高度模式（常规、突出、紧凑）
`Position`	AppBarPosition	Top	设置位置（顶部、底部）
`IsSticky`	bool	false	启用滚动时的粘性行为
`CssClass`	string	-	用于样式定制的自定义CSS类
`HtmlAttributes`	Dictionary	-	额外的HTML属性

Child Components

子组件

Component	Purpose	Usage
`AppBarSpacer`	Adds flexible spacing between elements	Place between elements to push them apart
`AppBarSeparator`	Adds a vertical divider line	Place between groups of related items
`SfButton`	Action buttons with e-inherit styling	Use CssClass="e-inherit" to match AppBar theme
`SfMenu`	Navigation menu integration	Use CssClass="e-inherit" for consistent styling

组件	用途	使用方式
`AppBarSpacer`	在元素之间添加灵活间距	放置在元素之间以拉开距离
`AppBarSeparator`	添加垂直分隔线	放置在相关项目组之间
`SfButton`	带有e-inherit样式的操作按钮	使用CssClass="e-inherit"以匹配AppBar主题
`SfMenu`	导航菜单集成	使用CssClass="e-inherit"以保持样式一致

Common Use Cases

常见使用场景

1. Main Application Navigation

1. 主应用导航

Create a primary navigation header with logo, menu items, and user actions.

When: Building the main navigation for web applications Pattern: Logo + Menu Items + Spacer + User Actions Reference: design-ui.md

创建带有Logo、菜单项和用户操作的主导航标题。

适用场景： 构建Web应用的主导航 模式： Logo + 菜单项 + 间隔符 + 用户操作 参考文档： design-ui.md

2. Dashboard Header

2. 仪表板标题

Implement a dashboard toolbar with context-specific actions and controls.

When: Building admin dashboards or data-focused applications Pattern: Menu Toggle + Title + Spacer + Action Buttons Reference: design-ui.md

实现带有特定上下文操作和控件的仪表板工具栏。

适用场景： 构建管理仪表板或数据导向型应用 模式： 菜单切换按钮 + 标题 + 间隔符 + 操作按钮 参考文档： design-ui.md

3. Mobile Bottom Navigation

3. 移动端底部导航

Create a mobile-optimized bottom navigation bar with icon buttons.

When: Building mobile-responsive applications Pattern: Bottom Position + Icon Buttons Reference: positioning.md

创建带有图标按钮的移动端优化底部导航栏。

适用场景： 构建响应式移动应用 模式： 底部定位 + 图标按钮 参考文档： positioning.md

4. Hero Section Header

4. 英雄区域标题

Implement a prominent AppBar for landing pages with large titles and images.

When: Creating marketing or landing pages Pattern: Prominent Mode + Custom Background + Large Typography Reference: size-and-color.md

为着陆页实现突出显示的AppBar，带有大标题和图片。

适用场景： 创建营销页面或着陆页 模式： 突出模式 + 自定义背景 + 大字体 参考文档： size-and-color.md

5. Compact Toolbar

5. 紧凑工具栏

Create a space-efficient toolbar for applications with limited vertical space.

When: Building data-dense applications or tools Pattern: Dense Mode + Icon Buttons + Separators Reference: size-and-color.md

为空间有限的应用或工具创建节省空间的工具栏。

适用场景： 构建数据密集型应用或工具 模式： 紧凑模式 + 图标按钮 + 分隔符 参考文档： size-and-color.md

6. Sidebar Toggle Navigation

6. 侧边栏切换导航

Implement an AppBar that controls sidebar visibility for navigation.

When: Building applications with collapsible side navigation Pattern: Menu Button + Title + Spacer + Actions + Sidebar Integration Reference: design-ui.md

实现可控制侧边栏可见性的AppBar导航。

适用场景： 构建带有可折叠侧边导航的应用 模式： 菜单按钮 + 标题 + 间隔符 + 操作 + 侧边栏集成 参考文档： design-ui.md

Tips for Success

成功技巧

Use
e-inherit
CSS class on child buttons and menus to inherit AppBar's color scheme
Combine AppBarSpacer to create flexible layouts that adapt to content
Test responsive behavior with media queries for different screen sizes
Consider sticky positioning for navigation that stays visible while scrolling
Customize with CssClass instead of overriding default styles directly
Match size mode to context: Regular for standard apps, Prominent for heroes, Dense for tools

在子按钮和菜单上使用
```
e-inherit
```
CSS类，以继承AppBar的配色方案
结合使用AppBarSpacer创建可适配内容的灵活布局
使用媒体查询测试不同屏幕尺寸下的响应式行为
考虑使用粘性定位，使导航在滚动时保持可见
使用CssClass进行自定义，而非直接覆盖默认样式
根据上下文匹配尺寸模式：常规模式适用于标准应用，突出模式适用于英雄区域，紧凑模式适用于工具类应用