syncfusion-angular-toolbar

用途

Syncfusion Angular Toolbar 是一个容器组件，用于在 Angular 应用中显示一组横向排列的命令按钮。它适用于需要在界面顶部或局部区域集中放置操作命令的场景，例如文本编辑器工具栏、文件操作栏、格式化选项栏、导航工具栏、移动端应用头部、文档查看器控制栏、仪表盘控件以及社交媒体分享栏等。

主要能力

按钮项：默认项类型，支持文本、图标与样式配置。
分隔符：在命令组之间添加垂直分隔线。
输入组件：可嵌入 NumericTextBox、DropDownList、CheckBox、RadioButton 等输入控件。
模板支持：通过 template 属性渲染 Angular 组件与自定义 HTML。
响应式模式：支持 Scrollable（默认，带导航箭头与触摸滑动）和 Popup 两种溢出处理模式。
自定义样式：支持 CSS 定制、Font Awesome 第三方图标集成以及主题应用。
工具提示：通过 tooltipText 属性为命令添加鼠标悬停提示。
链接：可在工具栏项中嵌入路由链接与锚点元素。
切换按钮：支持带状态的按钮，如播放/暂停、显示/隐藏。
键盘导航：支持 Tab 键与方向键导航。
RTL 支持：支持从右到左的文本与布局方向。
无障碍：符合 WCAG 标准，内置 WAI-ARIA 规范支持。

使用方式

快速入门

安装 @syncfusion/ej2-angular-navigations 包，配置 Angular 环境与依赖，在组件中导入 ToolbarModule，添加主题 CSS 导入，然后创建基本工具栏。

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 导入：

@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';

常见模式

简单文本按钮：使用 <e-item text='Cut'></e-item> 等创建基本操作按钮。
带文本的图标按钮：通过 prefixIcon 或 suffixIcon 添加图标，如 <e-item text='Bold' prefixIcon='e-icons e-bold'></e-item>。
带分隔符的分组命令：在相关命令之间插入 <e-item type='Separator'></e-item>。
带输入组件的工具栏：使用 type='Input' 与 ng-template 嵌入 NumericTextBox、DropDownList 等。
自定义模板与复选框：在 ng-template 中放置自定义 HTML 元素。
工具栏中的链接：在 ng-template 中添加 <a href="url" target="_blank"> 元素。
带悬停提示的工具提示：使用 <ejs-tooltip target='#Toolbar [title]'> 包裹工具栏，并为项设置 tooltipText。
响应式可滚动工具栏：设置固定宽度，当项超出容器宽度时自动触发滚动模式。
带状态的切换按钮：使用 isToggle="true" 与点击事件处理状态变化。
Font Awesome 图标：引入 Font Awesome 样式表，使用 prefixIcon="fa fa-twitter"。

关键属性

text：按钮显示文本。
type：项类型（Button、Separator、Input）。
prefixIcon / suffixIcon：文本前/后的图标 CSS 类。
id：项的唯一标识符。
width：按钮宽度。
align：项对齐方式（Left、Center、Right）。
tooltipText：悬停提示文本。
cssClass：应用的 CSS 类。
htmlAttributes：自定义 HTML 属性。
template：自定义模板内容。
tabIndex：Tab 键导航顺序。
scrollStep：滚动距离（像素）。

API 参考

组件属性（12 个）：allowKeyboard、cssClass、enableCollision、enableHtmlSanitizer、enablePersistence、enableRtl、height、items、locale、overflowMode、scrollStep、width。
事件（5 个）：beforeCreate、clicked、created、keyDown、destroyed。
方法（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。

适用场景

文本编辑器工具栏（加粗、斜体、下划线等）
文件操作（剪切、复制、粘贴、撤销、重做）
工具栏内搜索栏
格式化选项（字体大小、颜色选择器、对齐按钮）
导航工具栏（链接到不同区域或页面）
移动应用头部（紧凑可滚动布局中的图标与工具提示）
文档查看器（放大/缩小、打印、下载切换）
富文本编辑器（带模板与输入的完整格式化工具栏）
仪表盘控件（日期选择器、过滤器、排序选项）
社交媒体分享（Font Awesome 社交图标）

限制

资料中未提供关于收费、价格、平台兼容性、性能上限或具体版本要求的信息。