Blazor SplitButton概述
的Blazor的SplitButton是按钮和下拉菜单的组合。它在一个紧凑的界面中提供了相关用户操作的集合。SplitButton有一个主要的可点击操作，它总是可见的，当用户单击箭头时，一个次要操作列表将在下拉列表中显示。
的SplitButton组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建Blazor SplitButton
- 添加一个
< TelerikSplitButton >标签。 - 定义子对象中的主要操作
< SplitButtonContent >标签。它的内容可以是纯文本、HTML甚至其他组件。 - 设置
OnClick参数。< TelerikSplitButton >标签。这将是主要操作的事件处理程序。 - 添加子元素
< SplitButtonItems >标签。插入一些< SplitButtonItem >标签在里面。 - 每一个
< SplitButtonItem >标签应该有一些内容和OnClick处理程序。
基本SplitButton
Reply Reply All Forward 最后一个动作: @LastAction @code {string LastAction {get;设置;} void OnReply() {LastAction = "回复";} void OnReplyAll() {LastAction = "回复所有";} void OnForward() {LastAction = "Forward";}}图标
主SplitButton动作和下拉菜单中的每个辅助项都可以显示字体图标或图像为了更好的外观和用户体验。
外貌
SplitButton提供了一个各种设置，以控制其视觉外观例如颜色、边框、形状和大小。这样就不需要使用自定义CSS代码。
事件
每个SplitButton动作单独启动OnClick事件，以便应用程序能够对用户行为做出反应。
SplitButton参数
除相关参数外，SplitButton参数如下表所示内置的样式而且图标．同时查看SplitButton API参考获取属性、方法和事件的完整列表。
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
AriaLabel |
字符串 |
设置aria-label属性的主要操作元素，即<按钮类= " k-button " >． |
类 |
字符串 |
将自定义CSS类呈现给主组件元素，即< div class = " k-split-button”>．用它来重写主题样式要获得特定的外观，如果都没有SplitButton外观设置可以做到这一点。 |
启用 |
保龄球（ 真正的） |
启用或禁用组件。 |
Id |
字符串 |
设置id主操作元素的属性(< >按钮）. |
TabIndex |
int |
设置tabindex主操作元素的属性。 |
标题 |
字符串 |
设置标题主操作元素的属性。 |
弹出设置
SplitButton为其下拉菜单(弹出菜单)公开配置设置。参数需要在< SplitButtonPopupSettings >标记，该标记应放在< SplitButtonSettings >这样的标签:
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
AnimationDuration |
int（ 300） |
设置下拉动画持续时间(以毫秒为单位)。 |
类 |
字符串 |
将自定义CSS类呈现到下拉容器，即< div class = " k-animation-container”>． |
高度 |
字符串（ “汽车”） |
下拉高度。如果项目不适合，将出现垂直滚动条。如果未设置，则下拉菜单将根据项的数量展开。 |
MaxHeight |
字符串 |
如果没有设置显式高度，则最大下拉高度。 |
MinHeight |
字符串 |
如果没有设置显式高度，则为最小下拉高度。 |
宽度 |
字符串 |
下拉宽度。如果未设置，则下拉菜单将根据其项的长度展开。 |
MaxWidth |
字符串 |
如果未设置显式宽度，则最大下拉宽度。如果有较长的项目，则会显示水平滚动条。 |
MinWidth |
字符串 |
如果没有设置显式宽度，则为最小下拉宽度。 |
与标准CSS一样，最小值而且马克斯设置优先于宽度而且高度．
项目设置
下表列出了SplitButtonItem参数，与。相关的参数除外图标．
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
类 |
字符串 |
将自定义CSS类呈现给下拉项的元素，即 |
启用 |
保龄球（ 真正的） |
启用或禁用该项。 |
SplitButton引用和方法
SplitButton公开了一个FocusAsync方法以编程方式聚焦它。属性定义对组件实例的引用@ref属性。如果您愿意，请了解Blazor生命周期将组件集中在页面加载上．
获取SplitButton的引用并执行方法
Reply Reply All Focus SplitButton 最后一个动作点击: @LastActionClicked @code {TelerikSplitButton SplitButtonRef {get;设置;} string LastActionClicked{获取;设置;} async任务FocusSplitButton(){等待SplitButtonRef.FocusAsync();} void OnReply() {LastActionClicked = "回复";} void OnReplyAll() {LastActionClicked = "回复所有";}}