syncfusion-javascript-appbar

用途

本技能用于在 Syncfusion TypeScript（EJ2）项目中实现和配置 AppBar 控件。AppBar 也称为操作栏或导航栏，是 Syncfusion 提供的导航组件，用于展示与当前应用屏幕相关的信息和操作。适用于创建响应式应用头部或导航栏、展示品牌/屏幕标题/导航操作、构建包含按钮、菜单或自定义内容的应用栏等场景。

主要能力

灵活定位：顶部（默认）、底部或粘性（Sticky）。
多种尺寸模式：Regular、Prominent、Dense。
颜色主题：Light、Dark、Primary、Inherit。
组件集成：按钮、DropDownButtons、菜单、侧边栏。
布局元素：用于内容分布的 Spacer（e-appbar-spacer）、用于分组的 Separator（e-appbar-separator）。
响应式设计：自动适配移动端和桌面端。
无障碍支持：ARIA 属性、键盘导航、语义化 HTML。
定制能力：CSS 类、自定义主题、HtmlAttributes。

关键依赖

@syncfusion/ej2-navigations  // AppBar 组件
@syncfusion/ej2-base         // 基础工具
@syncfusion/ej2-buttons      // 按钮集成
@syncfusion/ej2-splitbuttons // DropDownButton 支持

使用方式

技能按主题组织为多个参考文档，可按需阅读：

入门（references/getting-started.md）：安装与 npm 包设置、TypeScript 与 ES5 JavaScript 方式、基本 AppBar 初始化、CSS 导入与主题配置、添加按钮与内容、首次渲染与 CDN 引用。
定位与粘性（references/positioning-and-sticky.md）：顶部 AppBar（默认）、底部 AppBar、粘性行为（isSticky 属性）、各位置用例、定位属性配置、ScrollView 交互。
尺寸与高度模式（references/size-and-height-modes.md）：Regular（默认高度）、Prominent（更大高度，用于标题/图片）、Dense（紧凑高度）、高度定制技巧、各模式适用场景、CSS 类应用。
颜色与主题模式（references/color-and-theme-modes.md）：Light、Dark、Primary、Inherit 四种模式、按钮继承（e-inherit CSS 类）、组件集成（按钮、菜单、DropDownButton）。
样式与定制（references/styling-customization.md）：CSS 类选择器及用途、CssClass 属性、HtmlAttributes 用于 ARIA 标签与无障碍、自定义主题创建、Theme Studio 集成、CSS 变量定制。
布局模式与设计（references/layout-patterns-and-design.md）：Spacer 元素、Separator 元素、按钮与 DropDownButton 集成模式、菜单组件集成、侧边栏与 TreeView 集成、响应式设计与媒体查询、复杂导航布局。
最佳实践与无障碍（references/best-practices-and-accessibility.md）：语义化 HTML 结构、ARIA 属性、键盘导航、颜色对比度与无障碍合规、移动端响应式断点、性能优化、常见陷阱与故障排查。
API 参考（references/api-reference.md）：全部属性、方法和事件的完整 API 文档，包括 9 个属性（colorMode、cssClass、enablePersistence、enableRtl、htmlAttributes、isSticky、locale、mode、position）、8 个方法（addEventListener、appendTo、dataBind、destroy、getRootElement、refresh、removeEventListener、inject）、2 个事件（created、destroyed），以及状态持久化、国际化与 RTL 支持、事件处理模式与生命周期管理。

快速上手示例

TypeScript：

import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";

// Create AppBar with Primary color
const appbarObj: AppBar = new AppBar({
  colorMode: 'Primary'
});
appbarObj.appendTo("#appbar");

// Add buttons with inherited styling
const menuButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  iconCss: 'e-icons e-menu' 
});
menuButton.appendTo('#menuBtn');

const loginButton: Button = new Button({ 
  cssClass: 'e-inherit', 
  content: 'Login' 
});
loginButton.appendTo('#loginBtn');

HTML：

<!DOCTYPE html>
<html>
<head>
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
  <link href="url" rel="stylesheet" />
</head>
<body>
  <header id="appbar">
    <button id="menuBtn"></button>
    <div class="e-appbar-spacer"></div>
    <button id="loginBtn"></button>
  </header>
</body>
</html>

常见模式

带 Spacer 的导航：左侧菜单、居中标题、右侧登录按钮。
带 Separator 的分组操作：编辑操作 | 格式操作 | 布局操作。
带背景的 Prominent 头部：使用 mode: 'Prominent' 配合背景图片制作主视觉头部。
粘性导航：设置 isSticky: true 使头部在滚动时保持固定。
底部导航栏：设置 position: 'Bottom' 实现移动端风格的底部导航。

关键属性参考

属性	类型	默认值	用途
colorMode	'Light' \| 'Dark' \| 'Primary' \| 'Inherit'	'Light'	设置背景和文字颜色
mode	'Regular' \| 'Prominent' \| 'Dense'	'Regular'	控制 AppBar 高度
position	'Top' \| 'Bottom'	'Top'	将 AppBar 定位在顶部或底部
isSticky	boolean	false	使 AppBar 在滚动时保持固定
cssClass	string	''	应用自定义 CSS 类
htmlAttributes	object	{}	设置 HTML 属性（ARIA 等）

适用场景

电商头部：Logo、导航菜单、搜索、购物车、个人资料；粘性、Primary 颜色、使用 e-appbar-spacer 的响应式布局。
SPA 仪表盘：菜单切换、页面标题、通知图标、用户下拉菜单；顶部定位、Prominent 模式用于标题。
移动应用导航：带图标的底部导航栏；Dense 模式、Bottom 位置、Light/Dark 颜色模式。
文档编辑器：使用分隔符分组编辑工具；Regular 模式、Primary 颜色、e-inherit 按钮保持一致。
带侧边栏的复杂仪表盘：菜单切换 + 顶部 AppBar + 下方侧边栏；粘性 AppBar、响应式媒体查询。

限制

资料未提供关于收费、价格、平台兼容性细节、性能指标或具体效果保证的信息。控件版本为 EJ2 32.1.19+，平台为 TypeScript。