ButtonGroup
The ButtonGroup component can be used to group related buttons.
Notes
The BitButtonGroupGroup is a Multi-API component which can accept the list of Items in 3 different ways: BitButtonGroupGroupItem class, a custom Generic class, and BitButtonGroupGroupOption component.Usage
Basic
The buttons can be grouped by putting them in a ButtonGroup component.
ButtonStyle
All the standard button styles are supported.
Primary (default)
Standard
Text
Icon
Each item in the ButtonGroup can have an icon.
Primary (default)
Standard
Text
Vertical
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.
Events
Managing button click events.
Component's ItemClick event:
Clicked item:
Item's Click event:
Click count: 0
Color
Offering a range of specialized colors, providing visual cues for specific states within your application.
Info
Success
Warning
SevereWarning
Error
Size
Different sizes for buttons to meet design needs, ensuring flexibility within your application.
Small
Medium
Large
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's style & class:
Item's style & class:
Implementation
BitButtonGroup parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
ButtonStyle | BitButtonStyle | BitButtonStyle.Primary | The style of button, Possible values: Primary | Standard. |
ItemTemplate | RenderFragment<TItem>? | null | The content inside the item can be customized. |
Vertical | bool | false | Defines whether to render ButtonGroup children vertically. |
Items | IEnumerable<TItem> | new List<TItem>() | List of Item, each of which can be a Button with different action in the ButtonGroup. |
ItemTemplate | RenderFragment<TItem>? | null | The content inside the item can be customized. |
NameSelectors | BitButtonGroupNameSelectors<TItem>? | null | Names and selectors of the custom input type properties. |
OnItemClick | EventCallback<TItem> | The callback that is called when a button is clicked. | |
Options | RenderFragment? | null | Alias of ChildContent. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
Class | string? | null | Custom CSS class for the root element of the component. |
HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
IsEnabled | bool | true | Whether or not the component is enabled. |
Style | string? | null | Custom CSS style for the root element of the component. |
Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
RootElement | ElementReference | The ElementReference of the root element. |
BitButtonGroupNameSelectors properties
Name |
Type |
Default value |
Description |
---|---|---|---|
Class | BitNameSelectorPair<TItem, string?> | new(nameof(BitButtonGroupItem.Class)) | The CSS Class field name and selector of the custom input class. |
IconName | BitNameSelectorPair<TItem, string?> | new(nameof(BitButtonGroupItem.IconName)) | IconName field name and selector of the custom input class. |
IsEnabled | BitNameSelectorPair<TItem, bool> | new(nameof(BitButtonGroupItem.IsEnabled)) | IsEnabled field name and selector of the custom input class. |
Key | BitNameSelectorPair<TItem, string?> | new(nameof(BitButtonGroupItem.Key)) | Key field name and selector of the custom input class. |
OnClick | BitNameSelectorPair<TItem, Action<TItem>?> | new(nameof(BitButtonGroupItem.OnClick)) | OnClick field name and selector of the custom input class. |
Style | BitNameSelectorPair<TItem, string?> | new(nameof(BitButtonGroupItem.Style)) | Style field name and selector of the custom input class. |
Template | BitNameSelectorPair<TItem, RenderFragment?> | new(nameof(BitButtonGroupItem.Template)) | Template field name and selector of the custom input class. |
Text | BitNameSelectorPair<TItem, string?> | new(nameof(BitButtonGroupItem.Text)) | Text field name and selector of the custom input class. |
BitNameSelectorPair properties
Name |
Type |
Default value |
Description |
---|---|---|---|
Name | string | Custom class property name. | |
Selector | Func<TItem, TProp?>? | Custom class property selector. |
BitVisibility enum
Name |
Value |
Description |
---|---|---|
Visible | 0 | The content of the component is visible. |
Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
Collapsed | 2 | The component is hidden (display:none). |