DxToolbar.ItemRenderStyleMode Property

Specifies the common Toolbar item’s color filling type.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(ToolbarRenderStyleMode.Contained)]
[Parameter]
public ToolbarRenderStyleMode ItemRenderStyleMode { get; set; }

Property Value

Type	Default	Description
ToolbarRenderStyleMode	**Contained**	A ToolbarRenderStyleMode value.

Available values:

Name	Description
Contained	Toolbar items are filled with the style color.
Plain	Toolbar items are filled with the style color when you move the mouse pointer over them.

Remarks

Use the ItemRenderStyleMode property to specify the color filling mode for root Toolbar items.

Contained Mode

In this mode, an item is filled with the color specified by the RenderStyle property.

<div class="card w-75 p-2">
    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained">
        <DxToolbarItem Text="Info"
                       RenderStyle="ButtonRenderStyle.Info" />
        <DxToolbarItem Text="Success"
                       RenderStyle="ButtonRenderStyle.Success" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       BeginGroup="true"
                       RenderStyle="ButtonRenderStyle.Danger"
                       Text="Danger" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       Text="Auto" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       RenderStyle="ButtonRenderStyle.Warning"
                       Text="Warning" />
    </DxToolbar>
</div>

Plain Mode

In this mode, an item is filled with the toolbar’s background color. When a user hovers the mouse pointer over the item, it uses the color specified in the RenderStyle property.

<div class="card w-75 p-2">
    <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
        <DxToolbarItem Text="Info"
                       RenderStyle="ButtonRenderStyle.Info" />
        <DxToolbarItem Text="Success"
                       RenderStyle="ButtonRenderStyle.Success" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       BeginGroup="true"
                       RenderStyle="ButtonRenderStyle.Danger"
                       Text="Danger" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       Text="Auto" />
        <DxToolbarItem IconCssClass="oi oi-warning"
                       RenderStyle="ButtonRenderStyle.Warning"
                       Text="Warning" />
    </DxToolbar>
</div>

Run Demo: Toolbar - Render Style