Blazor Popup Overview
The Blazor Popup component helps you easily display a popup for a target element (anchor) in your application. You can use the Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features.
The Popup component is part of Telerik UI for Blazor, a
professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Creating Blazor Popup
- Add the
<TelerikPopup>tag to a Razor file. - Obtain the component reference through
@ref. - Use the Show method to display the
<TelerikPopup>.
Basic configuration of the Telerik Popup for Blazor
<TelerikPopup AnchorSelector=".popup-target" @ref="@PopupRef">
I am a Telerik Popup.
</TelerikPopup>
<TelerikButton OnClick="@(() => PopupRef.Show())" Class="popup-target">Show the Popup</TelerikButton>
@code {
private TelerikPopup PopupRef { get; set; }
}
Popup Positioning and Collision
Use the available positioning and collision settings to customize how the Popup positions and reacts to insufficient space in the viewport. Read more about the Blazor Popup Positioning and Collision...
Popup Animations
Use the available parameters to customize the animation type and its duration. Read more about the Blazor Popup animations....
Popup Parameters
The Blazor Popup provides parameters to configure the component. Also check the Popup API Reference for a full list of properties, methods and events.
| Parameter | Type | Description |
|---|---|---|
AnchorHorizontalAlign |
PopupAnchorHorizontalAlign enum ( Left) |
Defines how the anchor aligns with the Popup component on the horizontal plane. Read more about Popup Positioning. |
AnchorSelector |
string |
The CSS selector for the anchor element of the Popup. |
AnchorVerticalAlign |
PopupAnchorVerticalAlign enum ( Bottom) |
Defines how the anchor aligns with the Popup on the vertical plane. Read more about Popup Positioning.. |
AnimationDuration |
int |
The duration of the animation in milliseconds. Read more about Popup animations. |
AnimationType |
AnimationType enum ( SlideDown) |
The type of animation when the component displays and hides. Read more about Popup animations. |
HorizontalAlign |
PopupHorizontalAlign enum ( Left) |
Determines if the left or the right side of the Popup will touch its anchor. Read more about Popup Positioning. |
HorizontalCollision |
PopupCollision enum ( Fit) |
Sets the behavior of the Popup when it doesn't fit in the viewport based on the horizontal plane. Read more about Popup collision behavior. |
HorizontalOffset |
double |
The horizontal space between the Popup and its anchor in pixels. |
VerticalAlign |
PopupVerticalAlign enum ( Top) |
Determines if the Popup will touch the anchor with its top, bottom, or center. Read more about Popup Positioning. |
VerticalCollision |
PopupCollision enum ( Flip) |
Defines the behavior of the Popup when it doesn't fit in the viewport based on the vertical plane. Read more about Popup collision behavior. |
VerticalOffset |
double |
The vertical space between the Popup and its anchor in pixels. |
Styling and Appearance
The following parameters enable you to customize the appearance of the Blazor Popup:
| Parameter | Type | Description |
|---|---|---|
Class |
string |
The custom CSS class to be rendered on the <div> element, which wraps the component ChildContent. Use for styling customizations. |
Height |
string |
The height of the Popup. |
Width |
string |
The width of the Popup. |
Popup Reference and Methods
To execute Popup methods, obtain a reference to the component instance with @ref.
| Method | Description |
|---|---|
Refresh |
Use this method to programmatically re-render the Popup. The Popup is rendered as a child of the TelerikRootComponent, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the Refresh method comes in handy to ensure that the Popup content is up-to-date. |
Show |
Use this method to display the Popup. |
Hide |
Use this method to close the Popup. |
<TelerikButton OnClick="@ShowPopup" Class="popup-target">Show the Popup</TelerikButton>
<TelerikPopup AnchorSelector=".popup-target" @ref="@PopupRef">
I am a Telerik Popup!
</TelerikPopup>
@code {
private TelerikPopup PopupRef { get; set; }
private void ShowPopup()
{
PopupRef.Show();
}
}