syncfusion-angular-toolbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Toolbar

实现Syncfusion Angular Toolbar

Displays a group of command buttons arranged horizontally with responsive overflow handling and rich customization options.

显示一组水平排列的命令按钮，具备响应式溢出处理和丰富的自定义选项。

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create action buttons in a horizontal toolbar layout
Add separators between button groups
Embed input components (NumericTextBox, DropDownList, CheckBox)
Customize styling with CSS and Font Awesome icons
Handle click events and command interactions
Render custom templates and components in toolbar items
Set tooltips for toolbar commands
Add routing links as toolbar items
Create toggle buttons with state management
Implement responsive scrolling or popup overflow modes
Build accessible toolbars with keyboard navigation

当你需要以下功能时使用此技能：

在水平Toolbar布局中创建操作按钮
在按钮组之间添加separators
嵌入input components（NumericTextBox、DropDownList、CheckBox）
使用CSS和Font Awesome图标自定义样式
处理点击事件和命令交互
在Toolbar项中渲染自定义templates和组件
为Toolbar命令设置tooltips
添加路由链接作为Toolbar项
创建具备状态管理的切换按钮
实现响应式滚动或popup溢出模式
构建支持键盘导航的可访问Toolbar

Toolbar Overview

Toolbar概述

The Syncfusion Angular Toolbar is a container component that displays a collection of command buttons arranged horizontally. It supports multiple item types (buttons, separators, inputs), custom templates, styling, responsive behavior, and accessibility features.

Key Features:

Button Items: Default item type with text, icons, and styling
Separators: Vertical divisions between command groups
Input Components: Embed NumericTextBox, DropDownList, CheckBox, RadioButton
Template Support: Render Angular components and custom HTML
Responsive Modes: Scrollable (default) and Popup overflow handling
Custom Styling: CSS customization, Font Awesome integration, themes
Tooltips: Hint text on mouse hover for all commands
Links: Embed routing links and anchor elements
Toggle Buttons: Stateful buttons with play/pause, show/hide functionality
Keyboard Navigation: Tab key support, arrow key navigation
RTL Support: Right-to-left text and layout direction
Accessibility: WCAG compliance with ARIA attributes

Syncfusion Angular Toolbar是一个容器组件，用于显示一组水平排列的命令按钮。它支持多种项类型（buttons、separators、inputs）、自定义templates、样式、响应式行为以及可访问性功能。

核心功能：

Button Items： 默认项类型，包含文本、图标和样式
Separators： 命令组之间的垂直分隔
Input Components： 嵌入NumericTextBox、DropDownList、CheckBox、RadioButton
Template支持： 渲染Angular组件和自定义HTML
响应式模式： 可滚动（默认）和Popup溢出处理
自定义样式： CSS定制、Font Awesome集成、主题
Tooltips： 鼠标悬停时显示所有命令的提示文本
Links： 嵌入路由链接和锚点元素
Toggle Buttons： 具备播放/暂停、显示/隐藏功能的有状态按钮
键盘导航： 支持Tab键和箭头键导航
RTL支持： 从右到左的文本和布局方向
可访问性： 符合WCAG标准，支持ARIA属性

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Install @syncfusion/ej2-angular-navigations package
Setup Angular environment and dependencies
Import ToolbarModule in component
Add CSS imports for themes
Create basic toolbar with button items
Run and test the application

📄 阅读： references/getting-started.md

安装@syncfusion/ej2-angular-navigations包
设置Angular环境和依赖项
在组件中导入ToolbarModule
添加主题的CSS导入
创建包含Button Items的基础Toolbar
运行并测试应用

Item Configuration

项配置

📄 Read: references/item-configuration.md

Configure button item properties (text, id, prefixIcon, suffixIcon, width, align)
Add separator items to group commands
Setup Input type items (NumericTextBox, DropDownList, CheckBox, RadioButton)
Enable tab key navigation with tabIndex property
Dynamic item management and updates

📄 阅读： references/item-configuration.md

配置Button Item属性（text、id、prefixIcon、suffixIcon、width、align）
添加separator项以分组命令
设置Input类型项（NumericTextBox、DropDownList、CheckBox、RadioButton）
通过tabIndex属性启用Tab键导航
动态项管理与更新

Styling & Customization

样式与自定义

📄 Read: references/styling-customization.md

Customize toolbar container styling with CSS
Style toolbar items and buttons
Customize icons and icon colors
Apply hover and focus state styles
Integrate Font Awesome third-party icons
CSS class customization (e-toolbar, e-toolbar-item, e-tbar-btn)
Icon positioning with e-icons class

📄 阅读： references/styling-customization.md

使用CSS自定义Toolbar容器样式
设置Toolbar项和按钮的样式
自定义图标及图标颜色
应用悬停和聚焦状态样式
集成Font Awesome第三方图标
CSS类定制（e-toolbar、e-toolbar-item、e-tbar-btn）
使用e-icons类定位图标

Command Events & Customization

命令事件与自定义

📄 Read: references/command-events.md

Implement click event handlers for toolbar items
Use htmlAttributes property for custom HTML attributes
Apply multiple CSS classes with cssClass property
Command customization with id, class, style, role attributes
Event-driven patterns for toolbar interactions
Handle item-specific actions and responses

📄 阅读： references/command-events.md

为Toolbar项实现点击事件处理程序
使用htmlAttributes属性添加自定义HTML属性
通过cssClass属性应用多个CSS类
使用id、class、style、role属性定制命令
用于Toolbar交互的事件驱动模式
处理特定项的操作与响应

Item Templates & Components

项模板与组件

📄 Read: references/item-templates.md

Use template property for custom item rendering
Render Angular components with ng-template directive
Checkbox and input templates as string literals
Template references with query selectors
Menu component integration in toolbar
Render multiple components (NumericTextBox, DatePicker, Button)
Custom HTML template structures

📄 阅读： references/item-templates.md

使用template属性进行自定义项渲染
使用ng-template指令渲染Angular组件
将复选框和输入框模板作为字符串字面量
使用查询选择器引用模板
在Toolbar中集成Menu组件
渲染多个组件（NumericTextBox、DatePicker、Button）
自定义HTML模板结构

Tooltips & Links

Tooltips与链接

📄 Read: references/tooltips-links.md

Set tooltipText property for hint text on hover
Import and initialize Tooltip module with target selector
Add anchor elements with ng-template
Create routing links in toolbar items
Toggle button implementation with state changes
Play/pause, show/hide, and filter toggle patterns
Accessibility for links and button states

📄 阅读： references/tooltips-links.md

设置tooltipText属性以显示悬停提示文本
导入并初始化Tooltip模块及目标选择器
使用ng-template添加锚点元素
在Toolbar项中创建路由链接
实现带状态变化的切换按钮
播放/暂停、显示/隐藏和筛选切换模式
链接和按钮状态的可访问性

Responsive & Scrolling

响应式与滚动

📄 Read: references/responsive-scrolling.md

Scrollable overflow mode (default) with navigation arrows
Touch swipe gestures for scrolling on devices
Popup overflow mode for mobile-optimized display
Customize scrollStep property for scroll distance
Handle overflow when items exceed container width
Navigation icon disabled states and behavior
Continuous scrolling with long press navigation

📄 阅读： references/responsive-scrolling.md

可滚动溢出模式（默认），带导航箭头
设备上支持触摸滑动手势滚动
针对移动设备优化的Popup溢出模式
自定义scrollStep属性设置滚动距离
处理项超出容器宽度时的溢出
导航图标禁用状态及行为
长按导航实现连续滚动

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Grouping related toolbar buttons together
Nested items and hierarchical structures
Keyboard navigation with arrow keys and Tab support
WCAG accessibility compliance and ARIA attributes
RTL (right-to-left) language support
Performance optimization for large toolbars
Built-in compliance with WAI-ARIA specifications

📄 阅读： references/advanced-features.md

将相关Toolbar按钮分组
嵌套项和层级结构
支持箭头键和Tab键的键盘导航
WCAG可访问性合规及ARIA属性
RTL（从右到左）语言支持
大型Toolbar的性能优化
内置符合WAI-ARIA规范的支持

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

Toolbar Component Properties (12 properties)
- allowKeyboard, cssClass, enableCollision, enableHtmlSanitizer, enablePersistence
- enableRtl, height, items, locale, overflowMode, scrollStep, width
Toolbar Events (5 events)
- beforeCreate (BeforeCreateArgs), clicked (ClickEventArgs), created, keyDown (KeyDownEventArgs), destroyed
Toolbar Methods (7 methods)
- addItems, destroy, disable, enableItems, hideItem, refreshOverflow, removeItems
Item Configuration Properties (19+ properties)
- align, cssClass, disabled, htmlAttributes, id, overflow, prefixIcon, suffixIcon
- showAlwaysInPopup, showTextOn, tabIndex, template, text, tooltipText, type, visible, width
Types & Enums (5 enums)
- ItemType, ItemAlign, OverflowMode, OverflowOption, DisplayMode
Complete API Examples
- Advanced toolbar with all features
- Responsive toolbar with dynamic configuration

📄 阅读： references/api-reference.md

Toolbar组件属性（12个属性）
- allowKeyboard、cssClass、enableCollision、enableHtmlSanitizer、enablePersistence
- enableRtl、height、items、locale、overflowMode、scrollStep、width
Toolbar事件（5个事件）
- beforeCreate（BeforeCreateArgs）、clicked（ClickEventArgs）、created、keyDown（KeyDownEventArgs）、destroyed
Toolbar方法（7个方法）
- addItems、destroy、disable、enableItems、hideItem、refreshOverflow、removeItems
项配置属性（19+个属性）
- align、cssClass、disabled、htmlAttributes、id、overflow、prefixIcon、suffixIcon
- showAlwaysInPopup、showTextOn、tabIndex、template、text、tooltipText、type、visible、width
类型与枚举（5个枚举）
- ItemType、ItemAlign、OverflowMode、OverflowOption、DisplayMode
完整API示例
- 包含所有功能的高级Toolbar
- 动态配置的响应式Toolbar

Quick Start Example

快速入门示例

typescript

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Paste'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Bold'></e-item>
        <e-item text='Italic'></e-item>
        <e-item text='Underline'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

Add CSS imports in styles.css:

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';

typescript

import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { Component } from '@angular/core';

@Component({
  imports: [ToolbarModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toolbar>
      <e-items>
        <e-item text='Cut'></e-item>
        <e-item text='Copy'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Paste'></e-item>
        <e-item type='Separator'></e-item>
        <e-item text='Bold'></e-item>
        <e-item text='Italic'></e-item>
        <e-item text='Underline'></e-item>
      </e-items>
    </ejs-toolbar>
  `
})
export class AppComponent { }

在styles.css中添加CSS导入：

css

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';

Common Patterns

常见模式

Pattern 1: Simple Text Buttons

模式1：简单文本按钮

typescript

<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item text='Paste'></e-item>

Use when: You need basic action buttons with text labels.

typescript

<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item text='Paste'></e-item>

适用场景： 需要带文本标签的基础操作按钮时。

Pattern 2: Icon Buttons with Text

模式2：带文本的图标按钮

typescript

<e-item text='Bold' prefixIcon='e-icons e-bold'></e-item>
<e-item text='Italic' prefixIcon='e-icons e-italic'></e-item>
<e-item text='Undo' suffixIcon='e-icons e-undo'></e-item>

Use when: You want visual icons before or after text labels.

typescript

<e-item text='Bold' prefixIcon='e-icons e-bold'></e-item>
<e-item text='Italic' prefixIcon='e-icons e-italic'></e-item>
<e-item text='Undo' suffixIcon='e-icons e-undo'></e-item>

适用场景： 需要在文本标签前后添加视觉图标时。

Pattern 3: Grouped Commands with Separators

模式3：带分隔符的命令组

typescript

<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Bold'></e-item>
<e-item text='Italic'></e-item>

Use when: You need to visually group related commands.

typescript

<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Bold'></e-item>
<e-item text='Italic'></e-item>

适用场景： 需要将相关命令进行视觉分组时。

Pattern 4: Toolbar with Input Components

模式4：包含输入组件的Toolbar

typescript

<e-item type='Input'>
  <ng-template #template>
    <ejs-numerictextbox value="10" width="150"></ejs-numerictextbox>
  </ng-template>
</e-item>
<e-item type='Input'>
  <ng-template #template>
    <ejs-dropdownlist [dataSource]='data' width="120"></ejs-dropdownlist>
  </ng-template>
</e-item>

Use when: You need input fields, dropdowns, or other controls within the toolbar.

typescript

<e-item type='Input'>
  <ng-template #template>
    <ejs-numerictextbox value="10" width="150"></ejs-numerictextbox>
  </ng-template>
</e-item>
<e-item type='Input'>
  <ng-template #template>
    <ejs-dropdownlist [dataSource]='data' width="120"></ejs-dropdownlist>
  </ng-template>
</e-item>

适用场景： 需要在Toolbar中添加输入字段、下拉列表或其他控件时。

Pattern 5: Custom Templates with Checkboxes

模式5：带复选框的自定义模板

typescript

<e-item>
  <ng-template #template>
    <input type='checkbox' id='check1' checked=''>
    <label for='check1'>Enable Feature</label>
  </ng-template>
</e-item>

Use when: You need custom HTML elements like checkboxes or custom controls.

typescript

<e-item>
  <ng-template #template>
    <input type='checkbox' id='check1' checked=''>
    <label for='check1'>Enable Feature</label>
  </ng-template>
</e-item>

适用场景： 需要添加复选框或自定义控件等HTML元素时。

Pattern 6: Links in Toolbar

模式6：Toolbar中的链接

typescript

<e-item>
  <ng-template #template>
    <a href="url" target="_blank">Documentation</a>
  </ng-template>
</e-item>

Use when: You need to add clickable links as toolbar items.

typescript

<e-item>
  <ng-template #template>
    <a href="url" target="_blank">Documentation</a>
  </ng-template>
</e-item>

适用场景： 需要添加可点击链接作为Toolbar项时。

Pattern 7: Tooltips with Hover Help

模式7：带悬停提示的Tooltips

typescript

<ejs-tooltip target='#Toolbar [title]'>
  <ejs-toolbar id='Toolbar'>
    <e-items>
      <e-item text='Cut' tooltipText='Cut selected content'></e-item>
      <e-item text='Paste' tooltipText='Paste copied content'></e-item>
    </e-items>
  </ejs-toolbar>
</ejs-tooltip>

Use when: You want to show hint text on mouse hover.

typescript

<ejs-tooltip target='#Toolbar [title]'>
  <ejs-toolbar id='Toolbar'>
    <e-items>
      <e-item text='Cut' tooltipText='Cut selected content'></e-item>
      <e-item text='Paste' tooltipText='Paste copied content'></e-item>
    </e-items>
  </ejs-toolbar>
</ejs-tooltip>

适用场景： 需要在鼠标悬停时显示提示文本时。

Pattern 8: Responsive Scrollable Toolbar

模式8：响应式可滚动Toolbar

typescript

<ejs-toolbar width="300px">
  <e-items>
    <e-item text='Cut'></e-item>
    <e-item text='Copy'></e-item>
    <!-- Multiple items trigger horizontal scroll -->
  </e-items>
</ejs-toolbar>

Use when: Container is narrower than total content width, triggering scrollable mode.

typescript

<ejs-toolbar width="300px">
  <e-items>
    <e-item text='Cut'></e-item>
    <e-item text='Copy'></e-item>
    <!-- Multiple items trigger horizontal scroll -->
  </e-items>
</ejs-toolbar>

适用场景： 容器宽度小于内容总宽度，触发可滚动模式时。

Pattern 9: Toggle Buttons with State

模式9：带状态的切换按钮

typescript

<ng-template #template>
  <button ejs-button class="e-btn" iconCss="e-play-icon" 
    isToggle="true" (click)="onPlayClick()"></button>
</ng-template>

Use when: You need buttons that toggle states (play/pause, show/hide).

typescript

<ng-template #template>
  <button ejs-button class="e-btn" iconCss="e-play-icon" 
    isToggle="true" (click)="onPlayClick()"></button>
</ng-template>

适用场景： 需要具备切换状态（播放/暂停、显示/隐藏）的按钮时。

Pattern 10: Font Awesome Icons

模式10：Font Awesome图标

typescript

<link rel="stylesheet" href="url" />

<e-item prefixIcon="fa fa-twitter"></e-item>
<e-item prefixIcon="fa fa-facebook"></e-item>

Use when: You need third-party icons like Font Awesome.

typescript

<link rel="stylesheet" href="url" />

<e-item prefixIcon="fa fa-twitter"></e-item>
<e-item prefixIcon="fa fa-facebook"></e-item>

适用场景： 需要使用Font Awesome等第三方图标时。

Key Properties

核心属性

Property	Type	Purpose	Example
`text`	string	Button display text	`text='Cut'`
`type`	string	Item type (Button, Separator, Input)	`type='Separator'`
`prefixIcon`	string	CSS class for icon before text	`prefixIcon='e-icons e-cut'`
`suffixIcon`	string	CSS class for icon after text	`suffixIcon='e-icons e-undo'`
`id`	string	Unique item identifier	`id='item1'`
`width`	string	Button width	`width='100px'`
`align`	string	Item alignment (Left, Center, Right)	`align='Right'`
`tooltipText`	string	Hover tooltip hint text	`tooltipText='Cut'`
`cssClass`	string	CSS classes to apply	`cssClass='custom-btn'`
`htmlAttributes`	object	Custom HTML attributes	`[htmlAttributes]='{class: "custom"}'`
`template`	string\|object	Custom template content	`[template]='templateVar'`
`tabIndex`	number	Tab key navigation order	`tabIndex=1`
`scrollStep`	number	Scroll distance in pixels	`scrollStep='50'`

属性	类型	用途	示例
`text`	string	Button显示文本	`text='Cut'`
`type`	string	项类型（Button、Separator、Input）	`type='Separator'`
`prefixIcon`	string	文本前图标的CSS类	`prefixIcon='e-icons e-cut'`
`suffixIcon`	string	文本后图标的CSS类	`suffixIcon='e-icons e-undo'`
`id`	string	项的唯一标识符	`id='item1'`
`width`	string	按钮宽度	`width='100px'`
`align`	string	项对齐方式（Left、Center、Right）	`align='Right'`
`tooltipText`	string	悬停提示文本	`tooltipText='Cut'`
`cssClass`	string	要应用的CSS类	`cssClass='custom-btn'`
`htmlAttributes`	object	自定义HTML属性	`[htmlAttributes]='{class: "custom"}'`
`template`	string\|object	自定义模板内容	`[template]='templateVar'`
`tabIndex`	number	Tab键导航顺序	`tabIndex=1`
`scrollStep`	number	滚动距离（像素）	`scrollStep='50'`

Common Use Cases

常见用例

Text Editor Toolbar - Bold, Italic, Underline buttons with separators
File Operations - Cut, Copy, Paste, Undo, Redo buttons
Search Bar in Toolbar - Input field for search within container width
Formatting Options - Font size, color picker, alignment buttons
Navigation Toolbar - Links to different sections or pages
Mobile App Header - Icons with tooltips in compact, scrollable layout
Document Viewer - Zoom in/out, print, download toggles
Rich Text Editor - Full formatting toolbar with templates and inputs
Dashboard Controls - Date picker, filters, sorting options
Social Media Sharing - Font Awesome social icons in toolbar

文本编辑器Toolbar - 带有separators的加粗、斜体、下划线按钮
文件操作 - 剪切、复制、粘贴、撤销、重做按钮
Toolbar中的搜索栏 - 容器宽度内的搜索输入字段
格式化选项 - 字体大小、颜色选择器、对齐按钮
导航Toolbar - 指向不同章节或页面的链接
移动应用头部 - 紧凑可滚动布局中带tooltips的图标
文档查看器 - 放大/缩小、打印、下载切换按钮
富文本编辑器 - 包含模板和输入框的完整格式化Toolbar
仪表板控件 - 日期选择器、筛选器、排序选项
社交媒体分享 - Toolbar中的Font Awesome社交图标