Blazor工具栏概述
的Blazor工具栏组件是按钮或其他特定于应用程序的工具的容器。本文将解释可用的特性。
工具栏组件是为Blazor的Telerik UI,一个具有100个本地组件的专业级UI库,用于构建现代和功能丰富的应用程序。想要试用它,请注册一个30天的免费试用。
创建Blazor工具栏
- 添加
< TelerikToolBar >
标记到Razor文件。 - 使用子标记进行添加工具如
< ToolBarButton >
或< ToolBarToggleButton >
.将按钮文本设置为子内容。可选地,设置图标
. - 定义
OnClick
按钮的处理程序。 - 设置
选择
切换按钮的参数。它支持双向绑定。 - (可选)将相关按钮放在
< ToolBarButtonGroup >
一起展示。
基本Telerik工具栏
bold italic Toggle Button undo 最后点击按钮:Toggle按钮的选择状态为@Selected.ToString()
@code {bool已选{get;设置;} = true;LastClicked {get;设置;} void OnBold() {LastClicked = "Bold";} void OnItalic() {LastClicked = "Italic";} void OnUndo() {LastClicked = "撤消";}}
内置的工具
工具栏组件可以包括内置工具,如按钮、切换按钮和按钮组。阅读更多关于Blazor工具栏内置工具.
分隔符
工具栏的功能是分隔符和间隔符,它们可以可视化地划分组件项。阅读更多关于Blazor工具栏分隔符和分隔符。.
自定义项目
工具栏组件支持模板项。使用它们创建具有下拉菜单、输入和其他自定义内容的复杂工具栏。阅读更多关于Blazor工具栏项目定制的信息.
事件
Blazor工具栏触发点击和选择事件。处理这些事件以响应用户操作。阅读更多关于Blazor工具栏事件.
工具栏参数
Blazor工具栏提供了配置组件的参数:
参数 | 类型 | 描述 |
---|---|---|
自适应 |
保龄球 |
切换工具栏的溢出弹出窗口。在工具栏右侧显示额外的锚,它将放置从工具栏溢出的所有项。 |
类 |
字符串 |
要在ToolBar组件的主包装元素上呈现的CSS类,它是< div class = " k-toolbar”> .使用样式的定制. |
例子
Blazor工具栏有一个适应性选项。此选项允许您隐藏弹出窗口中溢出的项。
当使用
ToolBarTemplateItem
随着响应式溢出弹出,模板将自动继承溢出
-ToolBarItemOverflow。从来没有
的行为。
响应式溢出弹出窗口
更改宽度!
@code { void ChangeWidth() { Width = 40; } public double Width { get; set; } = 100; public bool ToolBarAdaptive { get; set; } = true; }