ContextQMD
Back to Devexpress

ToolbarItemRenderStyleMode Enum

blazor-devexpress-dot-blazor-88305981.md

latest3.4 KB
Original Source

ToolbarItemRenderStyleMode Enum

Lists the Toolbar item’s render style modes.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public enum ToolbarItemRenderStyleMode

Members

NameDescription
Auto

Applies the DxToolbar.ItemRenderStyleMode property value to the item.

| | Contained |

The item is always filled with color and has all borders.

| | Plain |

The item is filled with color on hover or click and does not have borders between items.

|

The following properties accept/return ToolbarItemRenderStyleMode values:

Remarks

The ToolbarItemRenderStyleMode enumeration values specify how the Toolbar component renders its items. Note that the DxToolbarItem.RenderStyleMode property overrides the DxToolbar.ItemRenderStyleMode property value.

Auto Mode

When the style mode is set to Auto, items’ render style is specified by the DxToolbar.ItemRenderStyleMode property:

razor
<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Contained">
    @* The Info item's render style is Contained *@
    <DxToolbarItem Text="Info" 
                   RenderStyle="ButtonRenderStyle.Info" 
                   RenderStyleMode="ToolbarItemRenderStyleMode.Auto" />
</DxToolbar>

Contained Mode

In this mode, an item is filled with the color specified by the RenderStyle property and has borders:

razor
<div class="card p-2">
    <DxToolbar>
        <DxToolbarItem Text="Info"
                       RenderStyle="ButtonRenderStyle.Info"
                       RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
        <DxToolbarItem Text="Success"
                       RenderStyle="ButtonRenderStyle.Success"
                       RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    </DxToolbar>
</div>

Plain Mode

In this mode, an item is filled with the toolbar’s background color but does not have borders between two items. The color specified by the RenderStyle property is applied on hover or click:

razor
<div class="card p-2">
    <DxToolbar>
        <DxToolbarItem Text="Info"
                       RenderStyle="ButtonRenderStyle.Info"
                       RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
        <DxToolbarItem Text="Success"
                       RenderStyle="ButtonRenderStyle.Success"
                       RenderStyleMode="ToolbarItemRenderStyleMode.Contained" />
    </DxToolbar>
</div>

Run Demo: Toolbar - Render Style

See Also

DevExpress.Blazor Namespace