组件/ButtonGroup

Blazor ButtonGroup概述

的信息Blazor ButtonGroup组件以及它的核心特征。

ButtonGroup组件是一个容器常规和切换按钮。在继续之前，请确保您熟悉两者之间的区别常规的按钮和切换按钮。

ButtonGroup组件允许您选择一个或多个切换按钮，并回应选择和单击事件。里面的按钮填满容器，根据样式匹配选择主题并提供常规的按钮功能，如图像和图标以及其他参数和属性。

《Blazor Ninja》图像的teleerik UI

ButtonGroup组件是《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

创建Blazor按钮组

  1. 使用< TelerikButtonGroup >标记将组件添加到razor页面。
  2. 在里面加入所需的配料按钮标签表示每个按钮< ButtonGroupToggleButton >或< ButtonGroupButton >。
  3. 可选地，使用OnClick事件，以处理用户操作。阅读更多事件篇文章。

TelerikButtonGroup，包含常规按钮和切换按钮，以及它们各自的OnClick处理程序

 第一个按钮 第二个按钮  @code{async Task FirstClick(){控制台。WriteLine("第一个按钮被点击了");} async Task SecondClick(){控制台。第二个按钮被点击了。点击它就会被选中。”);}}

按钮

ButtonGroup包含两种类型的按钮ButtonGroupToggleButton和ButtonGroupButton。您可以单独配置它们的设置，控制它们的启用/禁用状态和可见性。阅读更多关于Blazor ButtonGroup按钮的信息…

图标

为了直观地传达按钮的目的，您可以添加图像、精灵或字体图标。您可以在各种内置字体图标之间进行选择，也可以使用自定义字体图标。阅读更多关于Blazor按钮组图标…

选择

ButtonGroup允许您控制其控件的选择模式ButtonGroupToggleButton实例。用户可以选择单个或多个ButtonGroupToggleButton。在ButtonGroup组件中阅读更多关于选择的信息…

外观

ButtonGroup的单独按钮实例提供了几个参数来控制它们的按钮造型和外观，包括背景颜色，形状，圆角和填充。

事件

Blazor ButtonGroup触发事件，您可以处理这些事件并响应用户操作。阅读更多关于Blazor ButtonGroup活动的信息....

ButtonGroup参数

ButtonGroup参数如下表所示。检查ButtonGroup API参考获取属性、方法和事件的完整列表。

参数 类型和默认值 描述
类 字符串 类的附加CSS类<按钮类= " k-button " >元素。使用它来应用自定义样式或覆盖主题。看到自定义样式在下面。
启用 保龄球
（真正的）		 是否启用ButtonGroup并接受单击。
SelectionMode ButtonGroupSelectionMode
（ButtonGroupSelectionMode。单）		 的选择模式按钮组的。
宽度 字符串 按钮组的宽度。

自定义样式

您可以通过它们来设置单个按钮的样式类属性来定义应用于HTML呈现的自己的CSS规则。你可能想要根据他们的选择状态。

为按钮设置CSS类并更改其外观

 Default  style - Selected: @IsSelected  @code {bool IsSelected {get;设置;}} 
         
          
         
        改进这篇文章
Baidu
map