DxToolbarItem.RenderStyleMode Property

Specifies the item's color fill modes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

[DefaultValue(ToolbarItemRenderStyleMode.Auto)]
[Parameter]
public ToolbarItemRenderStyleMode RenderStyleMode { get; set; }

Property Value

Type Default Description
ToolbarItemRenderStyleMode

Auto

One of the ToolbarItemRenderStyleMode values.

Remarks

Use this property to specify the Toolbar item's style mode.

Auto Mode

When an item's style mode is Auto, the common color filling type is applied to the item.

<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained">
    <DxToolbarItem Text="Info" 
                   RenderStyle="ButtonRenderStyle.Info" 
                   RenderStyleMode="ToolbarItemRenderStyleMode.Auto"/>
    <DxToolbarItem Text="Success" 
                   RenderStyle="ButtonRenderStyle.Success"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Auto" />
    ...
</DxToolbar>

Contained Mode

When the RenderStyleMode property is set to ToolbarItemRenderStyleMode.Contained, an item is filled with the color specified by the RenderStyle property.

<DxToolbar>
    <DxToolbarItem Text="Info" 
                   RenderStyle="ButtonRenderStyle.Info" 
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained"/>
    <DxToolbarItem Text="Success" 
                   RenderStyle="ButtonRenderStyle.Success"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    <DxToolbarItem IconCssClass="oi oi-warning" 
                   BeginGroup="true" 
                   RenderStyle="ButtonRenderStyle.Danger" 
                   Text="Danger"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    <DxToolbarItem IconCssClass="oi oi-warning" 
                   Text="Auto"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    <DxToolbarItem IconCssClass="oi oi-warning" 
                   RenderStyle="ButtonRenderStyle.Warning" 
                   Text="Warning"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
</DxToolbar>

Toolbar Item Render Style

Note that the RenderStyleMode property overrides the ItemRenderStyleMode property’s value. The code below demonstrates when the common fill mode is Plain, but the fill mode for the Info and Success items is Contained.

<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
    <DxToolbarItem Text="Info"
                   RenderStyle="ButtonRenderStyle.Info"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    <DxToolbarItem Text="Success"
                   RenderStyle="ButtonRenderStyle.Success"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    <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>

Toolbar Item Render Style

Plain Mode

When the RenderStyleMode property is set to ToolbarItemRenderStyleMode.Plain, 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.

<DxToolbar>
    <DxToolbarItem Text="Info" 
                   RenderStyle="ButtonRenderStyle.Info" 
                   RenderStyleMode="ToolbarItemRenderStyleMode.Plain"/>
    <DxToolbarItem Text="Success" 
                   RenderStyle="ButtonRenderStyle.Success"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
    ...
</DxToolbar>

Toolbar Item Render Style

Note that the RenderStyleMode property overrides the ItemRenderStyleMode property’s value. The code below demonstrates when the common fill mode is Contained, but the fill mode for the Info and Success items is Plain.

<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained">
    <DxToolbarItem Text="Info"
                   RenderStyle="ButtonRenderStyle.Info"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
    <DxToolbarItem Text="Success"
                   RenderStyle="ButtonRenderStyle.Success"
                   RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
    <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>

Toolbar Item Render Style

NOTE

Online Demo: Toolbar - Render Style

See Also