syncfusion-javascript-appbar

在 Syncfusion TypeScript 中实现 AppBar

何时使用此技能

在以下情况下使用此技能：

• 创建响应式应用程序标题栏或导航栏
• 显示品牌标识、屏幕标题或导航操作
• 使用按钮、菜单或自定义内容构建应用栏
• 将栏放置在顶部、底部或设为粘性元素
• 应用颜色模式（Light、Dark、Primary、Inherit）
• 自定义尺寸（Regular、Prominent、Dense）
• 设置 AppBar 的样式和主题
• 使用间隔符、分隔符和组件集成复杂布局
• 确保适配不同屏幕尺寸的响应式设计
• 实现无障碍功能

AppBar 概览

AppBar（也称为操作栏或导航栏）是 Syncfusion 的导航组件，用于显示与当前应用程序屏幕相关的信息和操作。它提供：

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

关键依赖项

@syncfusion/ej2-navigations  // AppBar component
@syncfusion/ej2-base         // Base utilities
@syncfusion/ej2-buttons      // Button integration
@syncfusion/ej2-splitbuttons // DropDownButton support

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和 npm 包设置
• TypeScript 和 ES5 JavaScript 方案
• AppBar 基本初始化
• CSS 导入和主题配置
• 添加按钮和内容
• 首次渲染和 CDN 参考

定位和粘性行为

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

• 顶部 AppBar（默认定位）
• 底部 AppBar 定位
• 粘性 AppBar 行为（isSticky 属性）
• 各种定位方式的使用场景
• 定位属性配置
• 与 ScrollView 交互

尺寸和高度模式

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

• Regular AppBar（默认高度）
• Prominent AppBar（适用于标题和图像的较大高度）
• Dense AppBar（紧凑高度）
• 高度自定义技巧
• 各模式的适用场景
• CSS 类应用

颜色和主题模式

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

• Light AppBar（浅色背景和文本）
• Dark AppBar（深色背景和文本）
• Primary AppBar（品牌主色）
• Inherit AppBar（继承父级颜色）
• 使用 e-inherit CSS 类实现按钮继承
• 组件集成（按钮、菜单、DropDownButton）

样式和自定义

📄 阅读： references/styling-customization.md

• CSS 类选择器及其用途
• 用于自定义样式的 CssClass 属性
• 用于 ARIA 标签和无障碍功能的 HtmlAttributes
• 创建自定义主题
• 与 Theme Studio 集成
• 自定义 CSS 变量

布局模式和设计

📄 阅读： references/layout-patterns-and-design.md

• 用于分配内容的间隔符元素（e-appbar-spacer）
• 用于视觉分组的分隔符元素（e-appbar-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）
• 跨页面重新加载的状态持久化（enablePersistence）
• 国际化和 RTL 支持（locale、enableRtl）
• 事件处理模式和生命周期管理
• 所有 API 的完整可运行示例

快速入门示例

基本 AppBar 设置

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>

常见模式

模式 1：带间隔项的导航

// Center title with left menu and right login
<header id="appbar">
  <button id="menu"></button>
  <span>My App</span>
  <div class="e-appbar-spacer"></div>
  <button id="login"></button>
</header>

模式 2：带分隔符的分组操作

// Edit actions | Format actions | Layout actions
<header id="appbar">
  <button id="cut"></button>
  <button id="copy"></button>
  <button id="paste"></button>
  <div class="e-appbar-separator"></div>
  <button id="bold"></button>
  <button id="italic"></button>
</header>

模式 3：带背景的醒目页眉

使用 mode: 'Prominent' 和背景图片来创建主视觉页眉。

模式 4：粘性导航

设置 isSticky: true，让页眉在滚动时保持固定。

模式 5：底部导航栏

设置 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 等）

常见用例

用例 1：电子商务页眉

// Logo, navigation menu, search, cart, profile
// Sticky, Primary color, responsive layout with e-appbar-spacer

用例 2：SPA 仪表板

// Menu toggle, page title, notification icon, user dropdown
// Top positioned, Prominent mode for title

用例 3：移动应用导航

// Bottom navigation bar with icons
// Dense mode, Bottom position, Light/Dark color mode

用例 4：文档编辑器

// Grouped editing tools with separators
// Regular mode, Primary color, e-inherit buttons for consistency

用例 5：带侧边栏的复杂仪表板

// Menu toggle + AppBar at top + Sidebar below
// Sticky AppBar, responsive media queries

后续步骤

1. 开始使用：阅读入门指南，设置你的第一个 AppBar
2. 设置栏的位置：通过定位指南选择位置
3. 选择尺寸模式：通过尺寸模式选择尺寸
4. 应用颜色：通过颜色模式设置主题
5. 设置样式并自定义：通过样式自定义外观
6. 设计布局：通过布局模式创建复杂模式
7. 确保质量：遵循最佳实践

---

控件： Syncfusion AppBar | 平台： TypeScript | 版本： EJ2 32.1.19+