DxToolbarItem.RenderStyleMode Property
Specifies the item’s color fill modes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v20.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(ToolbarItemRenderStyleMode.Auto)]
[Parameter]
public ToolbarItemRenderStyleMode RenderStyleMode { get; set; }
Property Value
Type | Default | Description |
---|---|---|
ToolbarItemRenderStyleMode | **Auto** | One of the ToolbarItemRenderStyleMode values. |
Available values:
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. |
Remarks
Use this property to specify a style mode for the root Toolbar item.
This property is not applied to drop-down items.
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>