**ButtonGroup** The ButtonGroup component can be used to group related buttons.
**Basic**:
private List
basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
**Variant**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
private List disabledItems =
[
new() { Text = "Add" }, new() { Text = "Edit", IsEnabled = false }, new() { Text = "Delete" }
];
**Icon**:
private List iconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { Text = "Edit", IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
**IconOnly**:
private List iconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { Text = "Edit", IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
private List onlyIconItems =
[
new() { Text = "Add", IconName = BitIconName.Add },
new() { IconName = BitIconName.Edit },
new() { Text = "Delete", IconName = BitIconName.Delete }
];
**ReversedIcon**:
private List reversedIconItems =
[
new() { Text = "Add", IconName = BitIconName.Add, ReversedIcon = true },
new() { Text = "Edit", IconName = BitIconName.Edit, ReversedIcon = true },
new() { Text = "Delete", IconName = BitIconName.Delete, ReversedIcon = true }
];
**Toggle**:
Toggle key: @toggleKey
Forward
Changed toggle: @onChangeToggleItem?.Key , @onChangeToggleItem?.IsToggled
private string? toggleKey = "play";
private List toggledItems =
[
new() { Key = "back", OnText = "Back (2X)", OffText = "Back (1X)", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind },
new() { Key = "play", OnText = "Resume", OffText = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play },
new() { Key = "forward", OnText = "Forward (2X)", OffText = "Forward (1X)", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true }
];
private BitButtonGroupItem? onChangeToggleItem;
private List changeToggledItems =
[
new() { Key = "back", OnText = "Back (2X)", OffText = "Back (1X)", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind },
new() { Key = "play", OnText = "Resume", OffText = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play },
new() { Key = "forward", OnText = "Forward (2X)", OffText = "Forward (1X)", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true }
];
**Vertical**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
**Events**:
Clicked item: @clickedItem
Click count: @clickCounter
private int clickCounter;
private string? clickedItem;
private List eventsItems =
[
new() { Text = "Increase", IconName = BitIconName.Add },
new() { Text = "Reset", IconName = BitIconName.Reset },
new() { Text = "Decrease", IconName = BitIconName.Remove }
];
protected override void OnInitialized()
{
eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); };
eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); };
eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); };
}
**Size**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
**FullWidth**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
**Color**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
**External Icons**:
private List externalIconItems =
[
new() { Text = "Add", Icon = "fa-solid fa-plus" },
new() { Text = "Edit", Icon = BitIconInfo.Css("fa-solid fa-pen") },
new() { Text = "Delete", Icon = BitIconInfo.Fa("solid trash") }
];
**Style & Class**:
private List basicItems =
[
new() { Text = "Add" }, new() { Text = "Edit" }, new() { Text = "Delete" }
];
private List styleClassItems =
[
new()
{
Text = "Styled",
Style = "color: tomato; border-color: brown; background-color: peachpuff;",
IconName = BitIconName.Brush,
},
new()
{
Text = "Classed",
Class = "custom-item",
IconName = BitIconName.FormatPainter,
}
];
**RTL**:
private List rtlItems =
[
new() { Text = "اضافه کردن", IconName = BitIconName.Add },
new() { Text = "ویرایش", IconName = BitIconName.Edit },
new() { Text = "حذف", IconName = BitIconName.Delete }
];**Basic**:
private BitButtonGroupNameSelectors
nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
**Variant**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
public bool IsEnabled { get; set; } = true;
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
private List disabledCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit", IsEnabled = false }, new() { Name = "Delete" }
];
**Icon**:
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
}
private List iconCustoms =
[
new() { Name = "Add", Image = BitIconName.Add },
new() { Name = "Edit", Image = BitIconName.Edit },
new() { Name = "Delete", Image = BitIconName.Delete }
];
**IconOnly**:
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
}
private List iconCustoms =
[
new() { Name = "Add", Image = BitIconName.Add },
new() { Name = "Edit", Image = BitIconName.Edit },
new() { Name = "Delete", Image = BitIconName.Delete }
];
private List onlyIconCustoms =
[
new() { Name = "Add", Image = BitIconName.Add },
new() { Image = BitIconName.Edit },
new() { Name = "Delete", Image = BitIconName.Delete }
];
**ReversedIcon**:
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
public bool ReversedIcon { get; set; }
}
private List reversedIconCustoms =
[
new() { Name = "Add", Image = BitIconName.Add, ReversedIcon = true },
new() { Name = "Edit", Image = BitIconName.Edit, ReversedIcon = true },
new() { Name = "Delete", Image = BitIconName.Delete, ReversedIcon = true }
];
**Toggle**:
Toggle key: @toggleKey
Forward
Changed toggle: @onChangeToggleCustom?.Id , @onChangeToggleCustom?.IsSelected
public class Operation
{
public string? Id { get; set; }
public string? OnImage { get; set; }
public string? OffImage { get; set; }
public string? OnName { get; set; }
public string? OffName { get; set; }
public string? OnTitle { get; set; }
public string? OffTitle { get; set; }
public bool ReversedIcon { get; set; }
public bool IsSelected { get; set; }
}
private BitButtonGroupNameSelectors toggledNameSelectors = new()
{
Key = { Selector = i => i.Id },
OnText = { Selector = i => i.OnName },
OffText = { Selector = i => i.OffName },
OnTitle = { Selector = i => i.OnTitle },
OffTitle = { Selector = i => i.OffTitle },
OnIconName = { Selector = i => i.OnImage },
OffIconName = { Selector = i => i.OffImage },
ReversedIcon = { Selector = i => i.ReversedIcon },
IsToggled = { Name = nameof(Operation.IsSelected) }
};
private string? toggleKey = "play";
private List toggledCustoms =
[
new() { Id = "back", OnName = "Back (2X)", OffName = "Back (1X)", OnImage = BitIconName.RewindTwoX, OffImage = BitIconName.Rewind },
new() { Id = "play", OnName = "Resume", OffName = "Play", OnImage = BitIconName.PlayResume, OffImage = BitIconName.Play },
new() { Id = "forward", OnName = "Forward (2X)", OffName = "Forward (1X)", OnImage = BitIconName.FastForwardTwoX, OffImage = BitIconName.FastForward, ReversedIcon = true }
];
private Operation? onChangeToggleCustom;
private List changeToggledCustoms =
[
new() { Id = "back", OnName = "Back (2X)", OffName = "Back (1X)", OnImage = BitIconName.RewindTwoX, OffImage = BitIconName.Rewind },
new() { Id = "play", OnName = "Resume", OffName = "Play", OnImage = BitIconName.PlayResume, OffImage = BitIconName.Play },
new() { Id = "forward", OnName = "Forward (2X)", OffName = "Forward (1X)", OnImage = BitIconName.FastForwardTwoX, OffImage = BitIconName.FastForward, ReversedIcon = true }
];
**Vertical**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
**Events**:
Clicked item: @clickedCustom
Click count: @clickCounter
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
public Action? Clicked { get; set; }
}
private int clickCounter;
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
private List eventsCustoms =
[
new() { Name = "Increase", Image = BitIconName.Add },
new() { Name = "Reset", Image = BitIconName.Reset },
new() { Name = "Decrease", Image = BitIconName.Remove }
];
protected override void OnInitialized()
{
eventsCustoms[0].Clicked = _ => { clickCounter++; StateHasChanged(); };
eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); };
eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); };
}
**Size**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
**FullWidth**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
**Color**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
**External Icons**:
public class Operation
{
public string? Name { get; set; }
public BitIconInfo? IconInfo { get; set; }
}
private List externalIconCustoms =
[
new() { Name = "Add", IconInfo = "fa-solid fa-plus" },
new() { Name = "Edit", IconInfo = BitIconInfo.Css("fa-solid fa-pen") },
new() { Name = "Delete", IconInfo = BitIconInfo.Fa("solid trash") }
];
**Style & Class**:
private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } };
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
public string? Class { get; set; }
public string? Style { get; set; }
}
private List basicCustoms =
[
new() { Name = "Add" }, new() { Name = "Edit" }, new() { Name = "Delete" }
];
private List styleClassCustoms =
[
new()
{
Name = "Styled",
Style = "color: tomato; border-color: brown; background-color: peachpuff;",
Image = BitIconName.Brush,
},
new()
{
Name = "Classed",
Class = "custom-item",
Image = BitIconName.FormatPainter,
}
];
**RTL**:
public class Operation
{
public string? Name { get; set; }
public string? Image { get; set; }
}
private List rtlCustoms =
[
new() { Name = "اضافه کردن", Image = BitIconName.Add },
new() { Name = "ویرایش", Image = BitIconName.Edit },
new() { Name = "حذف", Image = BitIconName.Delete }
];**Basic**:
**Variant**:
**Icon**:
**IconOnly**:
**ReversedIcon**:
**Toggle**:
Toggle key: @toggleKey
Forward
Changed toggle: @onChangeToggleOption?.Key , @onChangeToggleOption?.IsToggled
private string? toggleKey = "play";
private BitButtonGroupOption? onChangeToggleOption;
**Vertical**:
**Events**:
Clicked item: @clickedOption
Click count: @clickCounter
private int clickCounter;
private string? clickedOption;
**Size**:
**FullWidth**:
**Color**:
**External Icons**:
**Style & Class**:
**RTL**: