Back to Devexpress

DxButtonGroup.Items Property

blazor-devexpress-dot-blazor-dot-dxbuttongroup.md

latest2.3 KB
Original Source

DxButtonGroup.Items Property

Specifies the component’s item collection.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(null)]
[Parameter]
public RenderFragment Items { get; set; }

Property Value

TypeDefaultDescription
RenderFragmentnull

A collection of items (UI fragments).

|

Remarks

Populate the component’s <Items>...</Items> tag with DxButtonGroupItem objects to create a collection of button group items:

razor
<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary">
    <Items>
        <DxButtonGroupItem Text="Add Task"
                           IconCssClass="icon icon-plus" />
        <DxButtonGroupItem Text="Edit Task"
                           IconCssClass="icon icon-edit" />
        <DxButtonGroupItem Text="Assign Task"
                           IconCssClass="icon icon-user-profile" />
        <DxButtonGroupItem Text="Complete Task"
                           IconCssClass="icon icon-check" />
        <DxButtonGroupItem Text="Archive Task"
                           IconCssClass="icon icon-delete" />
    </Items>
</DxButtonGroup>
css
.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}

See Also

DxButtonGroup Class

DxButtonGroup Members

DevExpress.Blazor Namespace