syncfusion-blazor-appbar

Syncfusion Blazor AppBar 组件

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

何时使用此技能

在 Blazor 应用中实现 AppBar，且需要以下功能时，请使用此技能：

• 导航页眉，包含品牌标识、菜单和操作按钮
• 应用工具栏，包含上下文相关的操作和控件
• 响应式页眉，可适配不同屏幕尺寸
• 固定或粘性定位，固定在视口顶部或底部
• 与其他组件集成，例如菜单、按钮和侧边栏
• 自定义样式，以匹配应用主题和品牌风格

组件概述

AppBar 组件提供：

• 灵活的布局，通过间隔和分隔符组织内容
• 多种尺寸模式（Regular、Prominent、Dense），适用于不同场景
• 多种颜色模式（Light、Dark、Primary、Inherit），用于主题设置
• 定位选项（Top、Bottom、Sticky），用于控制布局
• 支持子组件，包括按钮、菜单、下拉列表和自定义内容
• 响应式设计，支持媒体查询

文档和导航指南

开始使用和安装

📄 阅读： references/getting-started.md

在以下情况下阅读此参考文档：

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

尺寸和颜色配置

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

在以下情况下阅读此参考文档：

• 使用尺寸模式（Regular、Prominent、Dense）配置 AppBar 高度
• 使用 Regular AppBar 实现标准高度的导航
• 使用 Prominent AppBar 展示较大的标题、图片或主视觉区域
• 使用 Dense AppBar 实现紧凑、节省空间的页眉
• 配置颜色模式（Light、Dark、Primary、Inherit）
• 使用 Light 模式设置默认的浅色背景
• 在深色主题应用中使用 Dark 模式
• 使用 Primary 模式应用主题的主色
• 使用 Inherit 模式继承父元素样式
• 组合尺寸和颜色模式，呈现不同的视觉效果

定位选项

📄 阅读： references/positioning.md

在以下情况下阅读此参考文档：

• 使用 Position 属性控制 AppBar 位置
• 实现 Top AppBar 定位（默认）
• 实现 Bottom AppBar，固定在底部进行导航
• 使用 IsSticky 属性启用 AppBar 粘性行为
• 处理粘性定位下的滚动行为
• 管理定位后的 AppBar 周围的内容布局
• 了解定位方式与页面内容之间的交互

设计 UI 元素

📄 阅读： references/design-ui.md

在以下情况下阅读此参考文档：

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

样式设置和自定义

📄 阅读： references/styling.md

需要执行以下操作时，请阅读此参考：

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

快速入门示例

以下是创建带导航的基本 AppBar 的最简示例：

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

先决条件：

1. 安装 Syncfusion.Blazor.Navigations 包
2. 将 @using Syncfusion.Blazor.Navigations 添加到 _Imports.razor
3. 使用 builder.Services.AddSyncfusionBlazor() 注册服务
4. 在 index.html 中引入主题 CSS 和 Syncfusion 脚本

常见模式

带徽标和操作项的应用程序页眉

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

带菜单切换功能的响应式 AppBar

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

带导航菜单的粘性 AppBar

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

用于移动端操作的底部 AppBar

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

关键属性参考

属性	类型	默认值	说明
ColorMode	AppBarColor	Light	设置背景颜色模式（Light、Dark、Primary、Inherit）
Mode	AppBarMode	Regular	设置高度模式（Regular、Prominent、Dense）
Position	AppBarPosition	Top	设置位置（Top、Bottom）
IsSticky	bool	false	启用滚动时的粘性行为
CssClass	string	-	用于设置样式的自定义 CSS 类
HtmlAttributes	Dictionary	-	其他 HTML 属性

子组件

组件	用途	用法
AppBarSpacer	在元素之间添加弹性间距	放置在元素之间，使它们彼此分开
AppBarSeparator	添加垂直分隔线	放置在相关项组之间
SfButton	使用 e-inherit 样式的操作按钮	使用 CssClass="e-inherit" 以匹配 AppBar 主题
SfMenu	集成导航菜单	使用 CssClass="e-inherit" 以保持样式一致

常见用例

1. 主应用程序导航

创建包含徽标、菜单项和用户操作的主导航页眉。

适用场景： 构建 Web 应用程序的主导航 模式： 徽标 + 菜单项 + 间隔区 + 用户操作 参考： design-ui.md

2. 仪表板页眉

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

适用场景： 构建管理仪表板或以数据为核心的应用程序 模式： 菜单切换 + 标题 + 间隔区 + 操作按钮 参考： design-ui.md

3. 移动端底部导航

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

适用场景： 构建适配移动设备的应用程序 模式： 底部位置 + 图标按钮 参考： positioning.md

4. 主视觉区域页眉

为着陆页实现醒目的 AppBar，并使用大标题和图片。

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

5. 紧凑型工具栏

为垂直空间有限的应用程序创建节省空间的工具栏。

适用场景： 构建数据密集型应用程序或工具 模式： Dense 模式 + 图标按钮 + 分隔线 参考： size-and-color.md

6. 侧边栏切换导航

实现可控制侧边栏显示状态的 AppBar，以便进行导航。

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

成功提示

• 在子按钮和菜单上使用 e-inherit CSS class，以继承 AppBar 的配色方案
• 结合使用 AppBarSpacer，创建能根据内容灵活调整的布局
• 通过媒体查询测试响应式行为，适配不同屏幕尺寸
• 考虑使用粘性定位，让导航在滚动时保持可见
• 使用 CssClass 自定义样式，而不是直接覆盖默认样式
• 根据使用场景选择尺寸模式：标准应用使用 Regular，主视觉区域使用 Prominent，工具使用 Dense