syncfusion-aspnetcore-toolbar

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing ASP.NET Core Toolbar

实现ASP.NET Core Toolbar

The Syncfusion Toolbar is a command-driven navigation component that organizes buttons, input controls, and custom templates into a responsive horizontal container. It's ideal for application headers, document editors, and toolbars that need to handle responsive overflow with scrollable or popup modes.

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

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create command bars for editors, dashboards, or application headers
Build responsive toolbars that handle overflow with scrollable or popup modes
Integrate button controls with icons, text, and custom templates
Add input components like textboxes, dropdowns, or radio buttons to a toolbar
Customize toolbar behavior with tooltips, alignment, and keyboard navigation
Manage item visibility with overflow priority and popup customization
Toggle states and actions with custom buttons and event handling

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

为编辑器、仪表板或应用程序页眉创建命令栏
构建可通过滚动或弹出模式处理溢出的响应式工具栏
集成带有图标、文本和自定义模板的按钮控件
向工具栏添加文本框、下拉菜单或单选按钮等输入组件
通过工具提示、对齐方式和键盘导航自定义工具栏行为
通过溢出优先级和弹出窗口自定义管理项可见性
使用自定义按钮和事件处理切换状态与操作

Component Overview

组件概述

The Toolbar control provides:

Item Types: Buttons (default), Separators, and Input containers
Responsive Modes: Scrollable (default with navigation arrows) and Popup overflow
Template Support: HTML-based rendering with item-wise customization
Styling Options: CSS classes, icons (prefix/suffix), width control, and themes
Event Handling: Click events, creation/destroy events, and keyboard navigation
Keyboard Support: Tab navigation with configurable tabIndex and arrow key support

Toolbar控件提供以下功能：

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

Documentation and Navigation Guide

文档与导航指南

Navigate to the reference files below to explore specific features and implementation patterns:

导航到以下参考文件，探索特定功能和实现模式：

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet package installation and setup
TagHelper registration and configuration
CSS and script resource inclusion
Basic toolbar creation with items
First working examples with icons and text

📄 阅读： references/getting-started.md

NuGet包安装与设置
TagHelper注册与配置
CSS和脚本资源引入
创建带项的基础工具栏
包含图标和文本的首个工作示例

Item Configuration

项配置

📄 Read: references/item-configuration-guide.md

Button items with text, icons, and width properties
Separator items and behavior constraints
Input items for integrated components (NumericTextBox, DropDownList, RadioButton)
Tab key navigation with tabIndex property
Complete property tables and examples

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

带有文本、图标和宽度属性的按钮项
分隔符项及其行为约束
用于集成组件（NumericTextBox、DropDownList、RadioButton）的输入项
带有tabIndex属性的选项卡键导航
完整的属性表和示例

Responsive Modes and Overflow

响应式模式与溢出

📄 Read: references/responsive-modes-and-overflow.md

Scrollable mode with navigation arrows and swipe support
Popup mode with command priority system
Overflow property options (show, hide, none)
ShowAlwaysInPopup for permanent popup items
ShowTextOn property for button text visibility
Real-world responsive examples

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

带导航箭头和滑动支持的滚动模式
带有命令优先级系统的弹出模式
溢出属性选项（show、hide、none）
用于永久弹出项的ShowAlwaysInPopup
用于按钮文本可见性的ShowTextOn属性
真实场景的响应式示例

Templates and Customization

模板与自定义

📄 Read: references/templates-and-customization.md

HTML-based template rendering structure
Item templates using strings and query selectors
Popup customization with e-overflow-show and e-overflow-hide classes
Button text modes (e-popup-text, e-toolbar-text)
Menu component integration
CSS class customization patterns

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

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

Advanced Features

高级功能

📄 Read: references/advanced-features.md

Toggle button implementation and state management
Tooltip integration with tooltipText property
Command customization with htmlAttributes and cssClass
Scroll step customization for navigation
Item-wise custom templates with complex controls
Event arguments and handler implementation

📄 阅读： references/advanced-features.md

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

API Reference

API参考

📄 Read: references/api-reference.md

Complete Toolbar properties and their defaults
All supported events with signatures
Item configuration properties
Overflow and alignment enumerations
Method signatures for programmatic control
TagHelper-compliant code examples for each API

📄 阅读： references/api-reference.md

完整的Toolbar属性及其默认值
所有支持的事件及其签名
项配置属性
溢出与对齐枚举
用于程序化控制的方法签名
每个API的TagHelper兼容代码示例

Quick Start Example

快速入门示例

Basic toolbar with buttons and separator:

html

<!-- In ~/Pages/_ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<!-- In ~/Pages/Shared/_Layout.cshtml (head) -->
<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>

<!-- In ~/Pages/Shared/_Layout.cshtml (body, end) -->
<ejs-scripts></ejs-scripts>

<!-- In ~/Pages/Index.cshtml -->
<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>

带有按钮和分隔符的基础工具栏：

html

<!-- In ~/Pages/_ViewImports.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<!-- In ~/Pages/Shared/_Layout.cshtml (head) -->
<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>

<!-- In ~/Pages/Shared/_Layout.cshtml (body, end) -->
<ejs-scripts></ejs-scripts>

<!-- In ~/Pages/Index.cshtml -->
<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>

Common Patterns

常见模式

Icon-only buttons with tooltips: Use

prefixIcon

with

tooltipText

for minimal visual footprint with affordance.

Responsive overflow with priority: Set

overflow="show"

for always-visible buttons and

overflow="hide"

for secondary actions that move to popup.

Input controls in toolbar: Use

type="Input"

to embed components like DropDownList or NumericTextBox for filtering or configuration.

Custom templates: Use

template

property with HTML strings or query selectors for complex custom controls.

Tab navigation: Set

tabIndex

on items to enable Tab/Shift+Tab keyboard navigation in addition to arrow keys.

仅带图标的按钮与工具提示： 使用

prefixIcon

搭配

tooltipText

，实现视觉简洁且具有提示性的效果。

带优先级的响应式溢出： 为始终可见的按钮设置

overflow="show"

，为次要操作设置

overflow="hide"

，使其移至弹出窗口。

工具栏中的输入控件： 使用

type="Input"

嵌入DropDownList或NumericTextBox等组件，用于筛选或配置。

自定义模板： 使用

template

属性搭配HTML字符串或查询选择器，实现复杂的自定义控件。

选项卡导航： 为项设置

tabIndex

，除箭头键外，还支持Tab/Shift+Tab键盘导航。

Key Properties

关键属性

width
: Sets toolbar container width (pixels or percentage)
overflowMode
: Controls responsive behavior -
```
Scrollable
```
(default) or
```
Popup
```
scrollStep
: Distance to scroll when navigation arrows are clicked
allowKeyboard
: Enables keyboard navigation (default: true)
enableCollision
: Enables popup collision detection
cssClass
: Applies custom CSS classes to the toolbar root

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

Item Configuration Quick Reference

项配置快速参考

Item Type	Use Case	Key Properties
Button	Command actions	`text` , `prefixIcon` , `suffixIcon` , `width` , `tooltipText`
Separator	Visual dividers	`type: "Separator"`
Input	Embedded components	`type: "Input"` , `template`
Custom	Complex controls	`type: "Button"` , `template`

项类型	使用场景	关键属性
Button	命令操作	`text` , `prefixIcon` , `suffixIcon` , `width` , `tooltipText`
Separator	视觉分隔符	`type: "Separator"`
Input	嵌入式组件	`type: "Input"` , `template`
Custom	复杂控件	`type: "Button"` , `template`

Common Use Cases

常见使用场景

Text Editor Toolbar: Cut, Copy, Paste, formatting buttons with separators
Dashboard Filter Bar: DropDownList and DatePicker for filtering data
Application Header: Branding + navigation buttons + user menu
Media Player Controls: Play, Pause, Stop, Volume with custom templates
Document Tools: Save, Print, Export with responsive overflow handling

Start with Getting Started Guide to set up your first toolbar.

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

从入门指南开始，搭建你的首个工具栏。