DxPopupBase.ShowCloseButton Property

Specifies whether the header displays the Close button.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool ShowCloseButton { get; set; }

Property Value

Type	Default	Description
Boolean	true	true to display the Close button; otherwise, false.

Remarks

Users can close the Popup in the following ways:

• Click the Close button in the header.
• Click outside the Popup’s boundaries.
• Press Escape.

Set the ShowCloseButton property to false to hide the close button. The CloseOnOutsideClick and CloseOnEscape properties allow you to disable other user capabilities.

<div @onclick="@(() => PopupVisible = true)">
    <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="Header"
         BodyText="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."
         ShowCloseButton="false"/>

@code {
    bool PopupVisible { get; set; } = false;
}

You can also use the templates listed below to implement a custom close action. In the template, use the context parameter’s CloseCallback property.

• HeaderContentTemplate / BodyContentTemplate / FooterContentTemplate
• HeaderTemplate / BodyTemplate / FooterTemplate