Skip to main content
All docs
V25.1
  • DxDrawer.BodyTemplate Property

    Specifies a template for the drawer panel’s body.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public RenderFragment BodyTemplate { get; set; }

    Property Value

    Type Description
    RenderFragment

    The body template.

    Remarks

    The drawer panel can include header, body, and footer. If a header or footer is not specified, the body occupies the free space.

    Use the BodyTemplate property to display any UI render fragment in the drawer panel’s body.

    Run Demo: Drawer Overview

    <DxToolbar ItemClick="OnToolbarItemClick">
        <Items>
            <DxToolbarItem Alignment="ToolbarItemAlignment.Right" 
                           IconCssClass="tb-icon tb-icon-info"
                           Name="Info" Text="Info" />
        </Items>
    </DxToolbar>
    <DxDrawer IsOpen="IsInfoOpen" Mode="DrawerMode.Overlap" Position="DrawerPosition.Right" PanelWidth="250px">
        <HeaderTemplate>
            Header
            <DxButton IconCssClass="tb-icon icon-close" RenderStyle="ButtonRenderStyle.Link" Click="CloseInfo"/>
        </HeaderTemplate>
        <BodyTemplate>
            <p>Donec eu nibh fermentum, commodo magna dictum, rhoncus orci. Suspendisse convallis malesuada 
            tortor eget luctus. Donec lobortis porta blandit. In venenatis massa id consectetur ornare. 
            Mauris et sem sem. Etiam at urna id nulla ornare finibus.</p>
        </BodyTemplate>
        <TargetContent>
            @* Lorem ipsum dolor sit amet, consectetur adipiscing elit ... *@
        </TargetContent>
        <FooterTemplate>
            <DxButton Click="CloseInfo" Text="OK"/>
        </FooterTemplate>
    </DxDrawer>
    
    @code {
        bool IsInfoOpen { get; set; } = true;
        void OnToolbarItemClick(ToolbarItemClickEventArgs args) {
            if(args.ItemName == "Info")
                IsInfoOpen = !IsInfoOpen;
        }
        void CloseInfo() {
            IsInfoOpen = false;
        }
    }
    

    Drawer layout

    See Also