DxPopup.HeaderTemplate Property

Specifies a template for a pop-up window’s header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment	A template for a pop-up window’s header.

Remarks

Use the HeaderTemplate property to customize the pop-up window’s header.

<DxPopup CssClass="custom-popup">
    <HeaderTemplate>
        <div class="custom-header bg-primary text-white w-100">
            <span class="demo-icon-info bg-white"></span>
            Information
            <a class="close-button oi oi-x text-white" href="javascript:;" aria-hidden="true" role="button" aria-label="Close popup" @onclick="@(() => PopupVisible = false)"></a>
        </div>
    </HeaderTemplate>
    <Content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel nisi blandit tincidunt vel efficitur purus. 
        Nunc nec turpis tempus, accumsan orci auctor, imperdiet mauris. Fusce id purus magna.</p>
    </Content>
</DxPopup>

To hide the header, set the ShowHeader property to false.

Run Demo: Popup - Header Customization