ToolbarItemRenderStyleMode Enum
Lists the Toolbar item’s color fill modes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v20.2.dll
NuGet Package: DevExpress.Blazor
Declaration
public enum ToolbarItemRenderStyleMode
Members
Name | Description |
---|---|
Auto
|
Applies the common Toolbar’s render style to the item. |
Contained
|
The item is filled with the style color. |
Plain
|
The item is filled with the style color when the mouse is over it. |
Related API Members
The following properties accept/return ToolbarItemRenderStyleMode values:
Remarks
The ToolbarItemRenderStyleMode enumeration values specify the Toolbar item‘s color fill modes.
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.
<div class="card w-75 p-2">
<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>
</div>
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
.
<div class="card w-75 p-2">
<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>
</div>
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.
<div class="card w-75 p-2">
<DxToolbar>
<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"
RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
<DxToolbarItem IconCssClass="oi oi-warning"
Text="Auto"
RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
<DxToolbarItem IconCssClass="oi oi-warning"
RenderStyle="ButtonRenderStyle.Warning"
Text="Warning"
RenderStyleMode="ToolbarItemRenderStyleMode.Plain" />
</DxToolbar>
</div>
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
.
<div class="card w-75 p-2">
<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>
</div>