syncfusion-aspnetcore-toolbar

实现 ASP.NET Core 工具栏

Syncfusion 工具栏是一种由命令驱动的导航组件，可将按钮、输入控件和自定义模板组织在响应式水平容器中。它非常适合应用程序标题栏、文档编辑器，以及需要通过可滚动或弹出模式处理响应式溢出的工具栏。

何时使用此技能

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

• 创建命令栏，用于编辑器、仪表板或应用程序标题栏
• 构建响应式工具栏，通过可滚动或弹出模式处理溢出
• 集成按钮控件，包含图标、文本和自定义模板
• 向工具栏添加输入组件，例如文本框、下拉列表或单选按钮
• 自定义工具栏行为，包括工具提示、对齐方式和键盘导航
• 管理项目可见性，包括溢出优先级和弹出窗口自定义
• 通过自定义按钮和事件处理切换状态并执行操作

组件概览

工具栏控件提供：

• 项目类型：按钮（默认）、分隔符和输入容器
• 响应模式：可滚动（默认，带导航箭头）和弹出式溢出
• 模板支持：基于 HTML 的渲染，并支持逐项自定义
• 样式选项：CSS 类、图标（前缀／后缀）、宽度控制和主题
• 事件处理：单击事件、创建／销毁事件和键盘导航
• 键盘支持：使用可配置的 tabIndex 进行 Tab 导航，并支持方向键

文档和导航指南

导航到以下参考文件，了解具体功能和实现模式：

入门

📄 阅读： references/getting-started.md

• NuGet 包安装和设置
• TagHelper 注册和配置
• CSS 和脚本资源引入
• 使用项目创建基本工具栏
• 包含图标和文本的首个可运行示例

项目配置

📄 阅读： references/item-configuration-guide.md

• 包含文本、图标和宽度属性的按钮项目
• 分隔符项目及其行为限制
• 用于集成组件（NumericTextBox、DropDownList、RadioButton）的输入项目
• 使用 tabIndex 属性进行 Tab 键导航
• 完整的属性表和示例

响应模式和溢出

📄 阅读： references/responsive-modes-and-overflow.md

• 带导航箭头并支持滑动的可滚动模式
• 采用命令优先级系统的弹出模式
• 溢出属性选项（show、hide、none）
• 使用 ShowAlwaysInPopup 将项目永久显示在弹出窗口中
• 使用 ShowTextOn 属性控制按钮文本的可见性
• 实际响应式示例

模板和自定义

📄 阅读： references/templates-and-customization.md

• 基于 HTML 的模板渲染结构
• 使用字符串和查询选择器的项目模板
• 使用 e-overflow-show 和 e-overflow-hide 类自定义弹出窗口
• 按钮文本模式（e-popup-text、e-toolbar-text）
• 菜单组件集成
• CSS 类自定义模式

高级功能

📄 阅读： references/advanced-features.md

• 切换按钮实现和状态管理
• 使用 tooltipText 属性集成工具提示
• 使用 htmlAttributes 和 cssClass 自定义命令
• 自定义导航滚动步长
• 使用复杂控件的逐项自定义模板
• 事件参数和处理程序实现

API 参考

📄 阅读： references/api-reference.md

• 完整的工具栏属性及其默认值
• 所有受支持的事件及其签名
• 项目配置属性
• 溢出和对齐枚举
• 用于编程控制的方法签名
• 每个 API 的 TagHelper 兼容代码示例

快速入门示例

包含按钮和分隔符的基本工具栏：

@addTagHelper *, Syncfusion.EJ2


<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>


<ejs-scripts></ejs-scripts>


<ejs-toolbar id="toolbar" width="600px">
    <e-toolbar-items>
        <e-toolbar-item text="Cut" prefixIcon="e-cut-icon tb-icons" tooltipText="Cut"></e-toolbar-item>
        <e-toolbar-item text="Copy" prefixIcon="e-copy-icon tb-icons" tooltipText="Copy"></e-toolbar-item>
        <e-toolbar-item text="Paste" prefixIcon="e-paste-icon tb-icons" tooltipText="Paste"></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item text="Bold" prefixIcon="e-bold-icon tb-icons" tooltipText="Bold"></e-toolbar-item>
        <e-toolbar-item text="Italic" prefixIcon="e-italic-icon tb-icons" tooltipText="Italic"></e-toolbar-item>
    </e-toolbar-items>
</ejs-toolbar>

常见模式

带工具提示的纯图标按钮： 使用 prefixIcon 和 tooltipText，在节省视觉空间的同时提供操作提示。

按优先级响应式溢出： 将 overflow="show" 用于始终可见的按钮，将 overflow="hide" 用于移至弹出菜单中的次要操作。

工具栏中的输入控件： 使用 type="Input" 嵌入 DropDownList 或 NumericTextBox 等组件，以便筛选或配置。

自定义模板： 使用 template 属性和 HTML 字符串或查询选择器来构建复杂的自定义控件。

标签页导航： 在项目上设置 tabIndex，即可使用 Tab/Shift+Tab 键盘导航，并支持方向键操作。

关键属性

• width：设置工具栏容器的宽度（像素或百分比）
• overflowMode：控制响应式行为——Scrollable（默认）或 Popup
• scrollStep：点击导航箭头时的滚动距离
• allowKeyboard：启用键盘导航（默认值：true）
• enableCollision：启用弹出菜单碰撞检测
• cssClass：为工具栏根元素应用自定义 CSS 类

项目配置快速参考

项目类型	用途	关键属性
按钮	命令操作	text、prefixIcon、suffixIcon、width、tooltipText
分隔符	视觉分隔	type: "Separator"
输入项	嵌入组件	type: "Input"、template
自定义项	复杂控件	type: "Button"、template

常见用例

• 文本编辑器工具栏：剪切、复制、粘贴、格式设置按钮及分隔符
• 仪表板筛选栏：使用 DropDownList 和 DatePicker 筛选数据
• 应用程序页眉：品牌标识 + 导航按钮 + 用户菜单
• 媒体播放器控件：使用自定义模板实现播放、暂停、停止和音量控制
• 文档工具：保存、打印、导出，并采用响应式溢出处理

---

从 入门指南 开始，设置你的第一个工具栏。