syncfusion-react-appbar

用途

Syncfusion React AppBar 组件用于在 React 应用的顶部或底部创建灵活的导航头部和工具栏。它适合展示应用品牌、页面标题、导航控件和操作项，并支持响应式布局、多种定位模式和丰富的样式选项。

主要能力

• 定位与布局：支持 Top（默认）、Bottom、Sticky 三种位置模式；提供 Spacer 用于水平内容间距，Separator 用于视觉分组；支持媒体查询实现响应式设计。
• 尺寸与颜色模式：mode 属性可选 Regular、Prominent、Dense；colorMode 属性可选 Light、Dark、Primary、Inherit；Prominent 模式支持自定义高度。
• 设计模式：可与 Menu、Button、DropDownButton、Sidebar、TreeView 等组件集成，构建导航、品牌展示和响应式侧边栏；支持 e-inherit CSS 类。
• 样式与无障碍：通过 cssClass 自定义 CSS；支持 htmlAttributes（如 aria-label）；遵循 WCAG 2.2 和 Section 508，支持键盘导航、RTL、颜色对比度和移动端。
• API 属性：colorMode、mode、position、isSticky、cssClass、htmlAttributes、enableRtl、enablePersistence、locale；事件包括 created、destroyed。

使用方式

安装 @syncfusion/ej2-react-navigations 等包后，在 React 中引入 AppBarComponent 即可使用。基础示例：

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;

常见模式包括：基础导航栏、带标题的 Prominent AppBar、Dense 工具栏、底部 Sticky AppBar。

适用场景

• 电商产品页：顶部 Primary AppBar 展示品牌与搜索，导航按钮，右侧用户与购物车图标，Sticky 保持可见。
• 管理后台：Dark AppBar 显示应用名，左侧侧边栏切换按钮，右侧用户资料与登出。
• 移动优先应用：响应式菜单按钮，Dense 模式节省空间，移动端底部操作栏，桌面端顶部完整导航。
• 文档编辑器：Dense AppBar 放置编辑工具（剪切、复制、粘贴），Separator 分组，Sticky 保持可见。

限制

资料未提供具体的收费、价格、平台兼容性细节或性能数据；安装依赖、主题配置和完整 API 需参考官方文档。