syncfusion-react-appbar

实现 Syncfusion React AppBar

AppBar 组件可在应用顶部或底部创建灵活的导航标题栏和工具栏。它用于显示品牌标识、屏幕标题、导航控件和操作，同时支持响应式布局、多种定位模式和丰富的样式选项。

何时使用此技能

在以下情况下使用 AppBar：

• 在页面顶部或底部显示应用品牌标识和导航
• 创建包含按钮、菜单或下拉菜单的操作栏
• 构建可根据屏幕尺寸自适应的响应式工具栏
• 实现滚动时保持可见的粘性／固定导航
• 创建带菜单导航的响应式侧边栏
• 为分组控件添加视觉分隔
• 支持无障碍标准（WCAG 2.2、Section 508、键盘导航）

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 软件包安装和依赖项
• React 设置（Vite 和 Create React App）
• CSS 导入和主题配置
• 带按钮和图标的基本 AppBar
• 第一个可运行示例

定位和布局

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

• 定位模式：Top（默认）、Bottom、Sticky
• 用于水平内容间距的 Spacer
• 用于视觉分组的 Separator
• 用于响应式设计的媒体查询
• 适用于不同屏幕尺寸的布局模式

尺寸和颜色模式

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

• Mode 属性：Regular、Prominent、Dense
• ColorMode 属性：Light、Dark、Primary、Inherit
• 各种模式组合的适用场景
• Prominent AppBar 的高度自定义
• 使用颜色模式创建视觉层次

设计模式

📄 阅读： references/design-patterns.md

• AppBar 与 Menu 组件集成
• AppBar 与 Button 和 DropDownButton 集成
• AppBar 与 Sidebar 配合实现响应式导航
• 导航和品牌标识模式
• e-inherit CSS 类的用法
• 使用 TreeView 的响应式侧边栏

样式和无障碍

📄 阅读： references/styling-and-accessibility.md

• 使用 cssClass 属性自定义 CSS
• HTML 属性和 aria-label
• CSS 类参考（.e-appbar、.e-prominent 等）
• 符合 WCAG 2.2 和 Section 508 标准
• 支持键盘导航
• 支持 RTL、颜色对比度和移动设备

API 参考

📄 阅读： references/api-reference.md

• 完整的属性文档（colorMode、mode、position、isSticky、cssClass、htmlAttributes、enableRtl、enablePersistence、locale）
• 事件文档（created、destroyed）
• 每个属性的可运行代码示例
• 事件处理程序示例
• 常见属性组合
• 所有 API 的汇总表

快速开始

import { AppBarComponent } from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from "react";

const App = () => {
  return (
    <AppBarComponent colorMode="Primary">
      <ButtonComponent cssClass='e-inherit menu' iconCss='e-icons e-menu'></ButtonComponent>
      <span className="regular">My App</span>
      <div className="e-appbar-spacer"></div>
      <ButtonComponent cssClass='e-inherit login'>Login</ButtonComponent>
    </AppBarComponent>
  );
}

export default App;

常见模式

模式 1：基本导航栏

<AppBarComponent colorMode="Primary">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Home</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">About</ButtonComponent>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Contact</ButtonComponent>
</AppBarComponent>

模式 2：带标题的突出显示 AppBar

<AppBarComponent colorMode="Primary" mode="Prominent" cssClass="prominent-appbar">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-menu"></ButtonComponent>
  <span className="prominent">Large Title Section</span>
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Action</ButtonComponent>
</AppBarComponent>

模式 3：紧凑工具栏

<AppBarComponent colorMode="Dark" mode="Dense">
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-cut"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-copy"></ButtonComponent>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-paste"></ButtonComponent>
  <div className="e-appbar-separator"></div>
  <ButtonComponent cssClass="e-inherit" iconCss="e-icons e-bold"></ButtonComponent>
</AppBarComponent>

模式 4：底部定位的粘性 AppBar

<AppBarComponent colorMode="Primary" isSticky position="Bottom">
  <div className="e-appbar-spacer"></div>
  <ButtonComponent cssClass="e-inherit">Save</ButtonComponent>
  <ButtonComponent cssClass="e-inherit">Cancel</ButtonComponent>
</AppBarComponent>

关键属性

最常用的 AppBar 属性快速参考：

属性	类型	默认值	用途
colorMode	string	"Light"	配色方案：Light、Dark、Primary、Inherit
mode	string	"Regular"	尺寸模式：Regular、Prominent、Dense
position	string	"Top"	垂直位置：Top、Bottom
isSticky	boolean	false	滚动时固定在视口中
cssClass	string	-	用于样式设置的自定义 CSS 类
htmlAttributes	Record	{}	HTML 属性（aria-label、data-* 等）
enableRtl	boolean	false	启用从右到左的方向
enablePersistence	boolean	false	在重新加载之间保留状态
locale	string	"en-US"	语言和区域设置

如需了解所有属性、事件和方法的详细说明及代码示例，请参阅 API 参考。

常见用例

用例 1：电商产品页面

• 顶部的主要 AppBar，包含品牌徽标和搜索功能
• 导航按钮（Home、Products、About）
• 右侧对齐的用户账户和购物车图标
• 设置为粘性，使其在滚动浏览产品时保持可见

用例 2：管理仪表板

• 显示应用名称的深色 AppBar
• 左侧边栏切换按钮（e-menu 图标）
• 居中间隔区，用于保持平衡
• 右侧对齐的用户个人资料和退出登录按钮

用例 3：移动优先应用

• 响应式菜单按钮（在桌面端隐藏）
• 使用 Dense 模式节省屏幕空间
• 在移动端使用带操作按钮的底部 AppBar
• 在桌面端使用带完整导航的顶部 AppBar

用例 4：文档编辑器

• 带有编辑工具（剪切、复制、粘贴）的 Dense AppBar
• 使用分隔符对相关按钮分组
• 左侧为撤销/重做，右侧为格式选项
• 编辑文档时保持固定

---

**后续步骤：**根据具体任务选择上方的参考文件。例如，如果要开始使用，请阅读“入门”。如果需要设置 AppBar 的位置，请阅读“定位和布局”。