diff --git a/components/popup/overview.md b/components/popup/overview.md index 926d9d19a..f044126e6 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -15,20 +15,32 @@ The Blazor P ## Creating Blazor Popup 1. Add the `` tag to a Razor file. -1. Obtain the component reference through `@ref`. -1. Use the [Show](#popup-reference-and-methods) method to display the ``. +1. Set the `AnchorSelector` parameter to a CSS selector, which points to the HTML element that the Popup will align with. +1. [Obtain the component reference to show and hide the Popover programmatically](#popup-reference-and-methods). +1. (optional) Set the Popup `Width` and `Height`, or configure animations. >caption Basic configuration of the Telerik Popup for Blazor ````CSHTML - - I am a Telerik Popup. + +
+

Telerik Popup for Blazor

+ Close +
+
-Show the Popup +Show Popup @code { - private TelerikPopup PopupRef { get; set; } + private TelerikPopup? PopupRef { get; set; } } ```` @@ -68,7 +80,7 @@ The following parameters enable you to customize the appearance of the Blazor Po | --- | --- | --- | | `Class` | `string` | The custom CSS class to be rendered on the `
` element, which wraps the component `ChildContent`. Use for [styling customizations]({%slug themes-override%}). | | `Height` | `string` | The height of the Popup. | -| `Width` | `string` | The width of the Popup. | +| `Width` | `string` | The width of the Popup. If not set, the component width will match the anchor width. | ## Popup Reference and Methods @@ -76,23 +88,36 @@ To execute Popup methods, obtain a reference to the component instance with `@re | 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. | +| `Refresh` | Re-renders the Popup.
The Popup renders 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 ensures that the Popup content is up-to-date. | +| `Show` | Displays the Popup. | +| `Hide` | Closes the Popup. | ````CSHTML -Show the Popup +Toggle Popup - - I am a Telerik Popup! + + Telerik Popup for Blazor @code { - private TelerikPopup PopupRef { get; set; } + private TelerikPopup? PopupRef { get; set; } + + private bool PopupVisible { get; set; } - private void ShowPopup() + private void TogglePopup() { - PopupRef.Show(); + if (!PopupVisible) + { + PopupVisible = true; + PopupRef?.Show(); + } + else + { + PopupVisible = false; + PopupRef?.Hide(); + } } } ````