Back to Devexpress

DxDrawer.Position Property

blazor-devexpress-dot-blazor-dot-dxdrawer-939efe68.md

latest2.4 KB
Original Source

DxDrawer.Position Property

Specifies where the drawer panel is displayed – to the left or right of the target content.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(DrawerPosition.Left)]
[Parameter]
public DrawerPosition Position { get; set; }

Property Value

TypeDefaultDescription
DrawerPositionLeft

The drawer panel position.

|

Available values:

NameDescriptionImage
Left

Displays the drawer panel at the left edge of the target content area.

|

| | Right |

Displays the drawer panel at the right edge of the target content area.

|

|

Remarks

The DxDrawer component can display its panel to the left or right of the target content. Use the Position property to specify the drawer panel position.

Run Demo: Drawer Position and Mode

razor
<DxDrawer IsOpen="IsOpen" Position="DrawerPosition.Right" PanelWidth="20%">
    <BodyTemplate>
        <DxMenu Orientation="Orientation.Vertical">
            <Items>
                <DxMenuItem Text="Home" IconCssClass="menu-icon-home menu-icon" />
                <DxMenuItem Text="Components" IconCssClass="menu-icon-products menu-icon" />
                <DxMenuItem Text="Support" IconCssClass="menu-icon-support menu-icon" />
                <DxMenuItem Text="Contacts" IconCssClass="menu-icon-contacts menu-icon" />
                <DxMenuItem Text="About" IconCssClass="menu-icon-about menu-icon" />
            </Items>
        </DxMenu>
    </BodyTemplate>
    <TargetContent>
        @* Lorem ipsum dolor sit amet, consectetur adipiscing elit ... *@
    </TargetContent>
</DxDrawer>

See Also

DxDrawer Class

DxDrawer Members

DevExpress.Blazor Namespace