syncfusion-react-toolbar

用途

Syncfusion React Toolbar 用于在 React 应用中创建响应式命令栏与操作工具栏，将按钮、分隔符和输入控件等命令组织在一起，便于用户执行操作。

主要能力

条目类型：Button（按钮）、Separator（分隔符）、Input（输入控件）。
响应式溢出模式：Scrollable、Popup、MultiRow、Extended。
内置键盘导航与 ARIA 支持，支持 Tab 键导航。
支持在工具栏条目中渲染组件，外观与行为可自定义。
支持动态条目管理（添加/删除/启用/禁用）。
丰富事件系统：beforeCreate、clicked、keyDown、created、destroyed。
完整的 RTL 与区域设置（locale）支持。
无状态模板渲染。

使用方式

通过 npm 安装 @syncfusion/ej2-react-navigations，在组件中使用 ToolbarComponent 配合 ItemsDirective 与 ItemDirective 配置条目。需导入相应的 CSS 主题文件。示例：

import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import './App.css';

const App = () => {
  return (
    <ToolbarComponent id='toolbar'>
      <ItemsDirective>
        <ItemDirective text="Cut" prefixIcon="e-cut-icon" />
        <ItemDirective text="Copy" prefixIcon="e-copy-icon" />
        <ItemDirective text="Paste" prefixIcon="e-paste-icon" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" prefixIcon="e-bold-icon" />
        <ItemDirective text="Italic" prefixIcon="e-italic-icon" />
        <ItemDirective text="Underline" prefixIcon="e-underline-icon" />
      </ItemsDirective>
    </ToolbarComponent>
  );
};

export default App;

所需 CSS 导入（App.css）：

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

关键属性包括：id、overflowMode（Scrollable/Popup）、width、items、text、prefixIcon、suffixIcon、type（Button/Separator/Input）、align、overflow（Show/Hide/None）、tabIndex、template。

适用场景

文本编辑器工具栏：格式按钮、对齐选项、颜色与字体选择器。
文件操作工具栏：新建、打开、保存、另存为、打印、撤销/重做。
响应式移动端工具栏：使用 Popup 紧凑显示或 Scrollable 连续访问。
无障碍命令栏：键盘导航、ARIA 属性、屏幕阅读器友好。
定制品牌工具栏：自定义 CSS、主题集成、企业图标。

限制

资料未提供收费、价格、版本兼容性及具体性能指标等信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制