Back to Details

syncfusion-react-appbar

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion React AppBar

实现Syncfusion React AppBar

The AppBar component creates flexible navigation headers and toolbars at the top or bottom of your application. It's used to display branding, screen titles, navigation controls, and actions while supporting responsive layouts, multiple positioning modes, and rich styling options.
AppBar组件可在应用的顶部或底部创建灵活的导航页眉和工具栏。它用于展示品牌标识、页面标题、导航控件和操作按钮，同时支持响应式布局、多种定位模式以及丰富的样式选项。

When to Use This Skill

何时使用该组件

Use AppBar when you need to:
  • Display application branding and navigation at the top/bottom of pages
  • Create action bars with buttons, menus, or dropdowns
  • Build responsive toolbars that adapt to screen size
  • Implement sticky/fixed navigation that stays visible while scrolling
  • Create responsive sidebars with menu navigation
  • Add visual separation between grouped controls
  • Support accessibility standards (WCAG 2.2, Section 508, keyboard navigation)
在以下场景中使用AppBar：
  • 在页面顶部/底部展示应用品牌标识和导航
  • 创建包含按钮、菜单或下拉菜单的操作栏
  • 构建可适配屏幕尺寸的响应式工具栏
  • 实现滚动时保持可见的粘性/固定导航
  • 创建带有菜单导航的响应式侧边栏
  • 为分组控件添加视觉分隔
  • 支持无障碍标准（WCAG 2.2、Section 508、键盘导航）

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
  • Package installation and dependencies
  • React setup (Vite and Create React App)
  • CSS imports and theme configuration
  • Basic AppBar with buttons and icons
  • First working example
📄 阅读： references/getting-started.md
  • 包安装与依赖
  • React环境搭建（Vite和Create React App）
  • CSS导入与主题配置
  • 包含按钮和图标的基础AppBar
  • 第一个可运行示例

Positioning and Layout

定位与布局

📄 Read: references/positioning-and-layout.md
  • Position modes: Top (default), Bottom, Sticky
  • Spacer for horizontal content spacing
  • Separator for visual grouping
  • Media queries for responsive design
  • Layout patterns for different screen sizes
📄 阅读： references/positioning-and-layout.md
  • 定位模式：顶部（默认）、底部、粘性
  • 用于水平内容间距的间隔符
  • 用于视觉分组的分隔符
  • 响应式设计的媒体查询
  • 适配不同屏幕尺寸的布局模式

Size and Color Modes

尺寸与颜色模式

📄 Read: references/size-and-color-modes.md
  • Mode property: Regular, Prominent, Dense
  • ColorMode property: Light, Dark, Primary, Inherit
  • When to use each mode combination
  • Height customization for prominent AppBars
  • Visual hierarchy with color modes
📄 阅读： references/size-and-color-modes.md
  • 模式属性：Regular、Prominent、Dense
  • 颜色模式属性：Light、Dark、Primary、Inherit
  • 各类模式组合的适用场景
  • 突出显示型AppBar的高度自定义
  • 利用颜色模式构建视觉层级

Design Patterns

设计模式

📄 Read: references/design-patterns.md
  • AppBar with Menu component integration
  • AppBar with Button and DropDownButton
  • AppBar with Sidebar for responsive navigation
  • Navigation and branding patterns
  • e-inherit CSS class usage
  • Responsive sidebar with TreeView
📄 阅读： references/design-patterns.md
  • AppBar与Menu组件集成
  • AppBar与Button及DropDownButton搭配使用
  • 带有响应式导航侧边栏的AppBar
  • 导航与品牌标识设计模式
  • e-inherit CSS类的使用
  • 结合TreeView的响应式侧边栏

Styling and Accessibility

样式与无障碍支持

📄 Read: references/styling-and-accessibility.md
  • CSS customization with cssClass property
  • HTML attributes and aria-label
  • CSS class reference (.e-appbar, .e-prominent, etc.)
  • WCAG 2.2 and Section 508 compliance
  • Keyboard navigation support
  • RTL, color contrast, and mobile support
📄 阅读： references/styling-and-accessibility.md
  • 利用cssClass属性自定义CSS样式
  • HTML属性与aria-label
  • CSS类参考（.e-appbar、.e-prominent等）
  • 符合WCAG 2.2和Section 508标准
  • 键盘导航支持
  • RTL、颜色对比度与移动端支持

API Reference

API参考

📄 Read: references/api-reference.md
  • Complete property documentation (colorMode, mode, position, isSticky, cssClass, htmlAttributes, enableRtl, enablePersistence, locale)
  • Event documentation (created, destroyed)
  • Working code examples for every property
  • Event handler examples
  • Common property combinations
  • Summary table of all APIs
📄 阅读： references/api-reference.md
  • 完整的属性文档（colorMode、mode、position、isSticky、cssClass、htmlAttributes、enableRtl、enablePersistence、locale）
  • 事件文档（created、destroyed）
  • 每个属性对应的可运行代码示例
  • 事件处理示例
  • 常见属性组合
  • 所有API的汇总表格

Quick Start

快速开始

tsx
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;
tsx
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;

Common Patterns

常见模式

Pattern 1: Basic Navigation Bar

模式1：基础导航栏

tsx
<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>
tsx
<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>

Pattern 2: Prominent AppBar with Title

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

tsx
<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>
tsx
<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>

Pattern 3: Dense Toolbar

模式3：紧凑型工具栏

tsx
<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>
tsx
<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>

Pattern 4: Sticky AppBar with Bottom Position

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

tsx
<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>
tsx
<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>

Key Props

核心属性

Quick reference for the most commonly used AppBar properties:
PropTypeDefaultPurpose
colorMode
string
"Light"
Color scheme: Light, Dark, Primary, Inherit
mode
string
"Regular"
Size mode: Regular, Prominent, Dense
position
string
"Top"
Vertical position: Top, Bottom
isSticky
boolean
false
Stick to viewport while scrolling
cssClass
string-Custom CSS classes for styling
htmlAttributes
Record
{}
HTML attributes (aria-label, data-*, etc.)
enableRtl
boolean
false
Enable right-to-left direction
enablePersistence
boolean
false
Persist state between reloads
locale
string
"en-US"
Language and culture settings
For detailed explanations and code examples for all properties, events, and methods, see the API Reference.
常用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参考。

Common Use Cases

常见使用场景

Use Case 1: E-commerce Product Page
  • Primary AppBar at top with brand logo and search
  • Navigation buttons (Home, Products, About)
  • Right-aligned user account and cart icons
  • Sticky so it stays visible when scrolling products
Use Case 2: Admin Dashboard
  • Dark AppBar with application name
  • Left sidebar toggle button (e-menu icon)
  • Center spacer for balance
  • Right-aligned user profile and logout
Use Case 3: Mobile-First App
  • Responsive menu button (hidden on desktop)
  • Dense mode to save screen space
  • Bottom AppBar with action buttons on mobile
  • Top AppBar on desktop with full navigation
Use Case 4: Document Editor
  • Dense AppBar with editing tools (cut, copy, paste)
  • Separators to group related buttons
  • Undo/Redo on left, Format options on right
  • Sticky while editing document
Next Steps: Choose a reference file above based on your specific task. For example, if you're getting started, read "Getting Started". If you need to position the AppBar, read "Positioning and Layout".
场景1：电商产品页面
  • 顶部的Primary类型AppBar，包含品牌标志和搜索框
  • 导航按钮（首页、商品、关于我们）
  • 右侧对齐的用户账户和购物车图标
  • 设置为粘性，滚动查看商品时保持可见
场景2：管理后台仪表盘
  • Dark类型AppBar，显示应用名称
  • 左侧的侧边栏切换按钮（e-menu图标）
  • 中间添加间隔符保持布局平衡
  • 右侧对齐的用户资料和退出按钮
场景3：移动端优先应用
  • 响应式菜单按钮（在桌面端隐藏）
  • 使用Dense模式节省屏幕空间
  • 移动端使用底部AppBar放置操作按钮
  • 桌面端使用顶部AppBar展示完整导航
场景4：文档编辑器
  • Dense类型AppBar，包含编辑工具（剪切、复制、粘贴）
  • 使用分隔符对相关按钮进行分组
  • 左侧放置撤销/重做按钮，右侧放置格式选项
  • 设置为粘性，编辑文档时保持可见
下一步： 根据你的具体任务选择上方的参考文档。例如，如果你刚开始使用，请阅读“快速入门”；如果你需要设置AppBar的定位，请阅读“定位与布局”。