ButtonGroup
The ButtonGroup control is designed to organize buttons into a cohesive group.
It can be single or multiple select, allowing multiple buttons to be selected simultaneously.
Cascade effect can be achieved by binding to parent controls, when the value of the parent is changed, the ButtonGroup will reload and the value of the parent will be sent its data function or url.
Cascade effect can be achieved by binding to parent controls, when the value of the parent is changed, the ButtonGroup will reload and the value of the parent will be sent its data function or url.
Basic usage
ButtonGroup/Index.cshtml
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
Name = "Cats",
Url = Url.Action("GetCategories", "Data"),
}))
Multiple select
ButtonGroup/Index.cshtml
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
Name = "Multi",
Url = Url.Action("GetMealsImgByCateg", "Data"),
Multiple = true
}
.Parameter("categories", Db.Categories[0].Id)))
Cascade
ButtonGroup/Index.cshtml
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
Name = "CatDd",
Url = Url.Action("GetCategories", "Data"),
Value = Db.Categories[2].Id,
//Multiple = true
}))
<br />
<br />
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
Name = "MealsDd",
AutoSelectFirst = true,
Url = Url.Action("GetMeals", "Data"),
}.Parent("CatDd", "categories")))
Awesome/DataController.cs
public IActionResult GetMeals(int[] categories)
{
categories = categories ?? new int[] { };
var items = Db.Meals.Where(o => categories.Contains(o.Category.Id))
.Select(o => new KeyContent(o.Id, o.Name));
return Json(items);
}
ButtonGroup with icons
ButtonGroup/Index.cshtml
@(Html.Awe().ButtonGroup(new ButtonGroupOpt
{
Name = "icosBtnGroup",
DataFunc = "getBtnGroupData",
Encode = false,
CssClass = "btngIcons",
FieldAttr = new { style = "width: 5em;" }
}))
<style>
.btngIcons .awe-btn {
padding: .2em .4em;
}
</style>
<script>
function getBtnGroupData(){
return [
{k: 1, c: `<svg width="100%" height="100%" viewBox="0 0 18 18" fit="" preserveAspectRatio="xMidYMid meet" focusable="false" sandboxuid="2"><path d="M3 7h3v9H3V7zm5-3h3v12H8V4zm5 6h3v6h-3v-6z" fill-rule="evenodd" sandboxuid="2"></path></svg>`},
{k: 2, c: `<svg width="100%" height="100%" viewBox="0 0 48 48" fit="" preserveAspectRatio="xMidYMid meet" focusable="false" sandboxuid="2"><path d="M7 36.99l12-12.03 8 8 17-19.12-2.82-2.83L27 26.96l-8-8L4 33.99z" fill-rule="evenodd" sandboxuid="2"></path></svg>`}
];
}
</script>
Comments