syncfusion-aspnetcore-appbar

实现 Syncfusion AppBar

何时使用此技能

在以下情况下使用 AppBar 组件：

• 创建顶部或底部导航栏，以保持品牌形象和操作项位置的一致性
• 显示应用标题和品牌标识，并灵活调整尺寸（常规、突出或紧凑模式）
• 提供多种配色主题，以匹配应用设计（浅色、深色、主色或继承颜色）
• 支持响应式布局，通过媒体查询适配不同屏幕尺寸
• 使用继承系统集成导航元素，例如菜单、按钮和侧边栏
• 实现粘性／固定定位，以便在滚动时持续访问顶层操作项
• 支持从右向左（RTL）语言，并内置方向支持

组件概述

Syncfusion AppBar 是一个灵活的页眉组件，用于显示与当前应用屏幕相关的信息和操作。它提供：

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

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

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

定位与布局

📄 阅读： references/positioning.md

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

尺寸模式

📄 阅读： references/sizing-modes.md

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

颜色与主题模式

📄 阅读： references/color-modes.md

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

设计模式与布局

📄 阅读： references/design-layouts.md

• 使用 Spacer 元素动态分布内容
• 使用 Separator 元素直观地分组内容
• 使用媒体查询设计响应式 AppBar
• 组件集成模式（使用 e-inherit 的 Menu、Button、DropDownButton）
• SideBar 集成和切换模式
• 实用设计示例和最佳实践

自定义与高级功能

📄 阅读： references/customization.md

• 通过 cssClass 属性自定义 CSS 类
• 通过 htmlAttributes 配置 HTML 属性
• 支持从右向左（RTL）布局：enableRtl="true"
• 使用 enablePersistence="true" 持久化组件状态
• 自定义区域设置以实现国际化
• 高级样式和边缘情况

完整 API 参考

📄 阅读： references/api-reference.md

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

快速入门示例

创建包含导航按钮的基本 AppBar：

<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> - 将内容推至两侧

常见模式

模式 1：包含标题和操作项的顶部导航

<ejs-appbar id="navAppBar" position="Top">
    <e-content-template>
        
        <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>

模式 2：用于持久导航的粘性页眉

<ejs-appbar id="stickyAppBar" isSticky="true" colorMode="Dark">
    <e-content-template>
        
    </e-content-template>
</ejs-appbar>

模式 3：用于功能页眉的突出模式

<ejs-appbar id="prominentAppBar" mode="Prominent" colorMode="Primary">
    <e-content-template>
        
    </e-content-template>
</ejs-appbar>

关键属性概览

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

常见用例

1. 电商页眉：顶部粘性 AppBar，包含徽标、搜索框和购物车图标
2. 仪表板导航：突出模式的 AppBar，包含面包屑和快捷操作
3. 移动端导航：采用紧凑模式并置于底部的 AppBar，适合触控布局
4. 管理面板：深色主题的 AppBar，包含用户菜单和通知徽标
5. 内容平台：使用突出模式和图片背景展示特色文章页眉

---

后续步骤：

• 如需设置说明，请阅读入门指南
• 如需了解设计决策，请阅读定位和尺寸模式
• 如需查看完整 API 详情，请阅读 API 参考