DxToolbar.DropDownDisplayMode Property
Specifies how the toolbar’s drop-down items display menus.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v20.2.dll
NuGet Package: DevExpress.Blazor
Declaration
[DefaultValue(DropDownDisplayMode.Auto)]
[Parameter]
public DropDownDisplayMode DropDownDisplayMode { get; set; }
Property Value
Type | Default | Description |
---|---|---|
DropDownDisplayMode | **Auto** | A DropDownDisplayMode enumeration value. |
Available values:
Name | Description |
---|---|
Auto | Mobile and tablet devices show the menu in a modal bottom sheet. |
DropDown | The menu is shown as a drop-down list. |
ModalDialog | The menu is shown in a modal dialog. |
ModalBottomSheet | The menu is shown in a modal bottom sheet. |
Remarks
Use the DropDownDisplayMode
property to specify display mode for all menus in the toolbar. When the property is set to Auto
, the menus adapt to the device type.
Note
You can also specify display mode for an individual toolbar item. Refer to the DxToolbarItem.DropDownDisplayMode property description. If you set this property to the value different from Auto
, this value overrides the DxToolbar.DropDownDisplayMode
property’s value.
<DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
<Items>
<DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
<DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
<DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-right" />
<DxToolbarItem Text="Format" BeginGroup="true">
<Items>
<DxToolbarItem Text="Times New Roman" />
<DxToolbarItem Text="Tahoma" />
<DxToolbarItem Text="Verdana" />
</Items>
</DxToolbarItem>
<DxToolbarItem Text="Size" DropDownDisplayMode="DropDownDisplayMode.ModalDialog">
<Items>
<DxToolbarItem Text="8pt" />
<DxToolbarItem Text="10pt" />
<DxToolbarItem Text="12pt" />
</Items>
</DxToolbarItem>
<DxToolbarItem Text="Style" DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
<Items>
<DxToolbarItem IconCssClass="tb-icon tb-icon-bold" Text="Bold" />
<DxToolbarItem IconCssClass="tb-icon tb-icon-italic" Text="Italic" />
<DxToolbarItem IconCssClass="tb-icon tb-icon-underline" Text="Underline" />
</Items>
</DxToolbarItem>
</Items>
</DxToolbar>