From 16b4dacca1bd80ecc60b6c806188fde1ca2b4260 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 14:07:16 +0200 Subject: [PATCH 01/16] docs(popover): documentation --- components/popover/animation.md | 117 ++++++++++++++++++++ components/popover/overview.md | 135 +++++++++++++++++++++++ components/popover/position-collision.md | 95 ++++++++++++++++ 3 files changed, 347 insertions(+) create mode 100644 components/popover/animation.md create mode 100644 components/popover/overview.md create mode 100644 components/popover/position-collision.md diff --git a/components/popover/animation.md b/components/popover/animation.md new file mode 100644 index 0000000000..4f262232d9 --- /dev/null +++ b/components/popover/animation.md @@ -0,0 +1,117 @@ +--- +title: Animation +page_title: Popover Animation +description: Explore the animation settings of the Popover for Blazor. Discover how to adjust the way the Popover appears and disappears on the screen. +slug: popover-animation +tags: telerik,blazor,popover,animation +published: True +position: 35 +--- + +# Popover Animation Settings + +This article outlines the available settings that allow you to customize the animations when the Popover displays and hides. + +## Type + +You can change the way the Popover component flows in and out of the screen by setting the `AnimationType` parameter to a member of the `AnimationType` enum: + +* `None` +* `Fade` +* `PushUp` +* `PushDown` +* `PushLeft` +* `PushRight` +* `RevealVertical` +* `SlideUp` +* `SlideIn` +* `SlideDown` (default) +* `SlideRight` +* `SlideLeft` +* `ZoomIn` +* `ZoomOut` + +See the [example](#example) below to customize the available parameters and see how they affect the Popover component. + +## Duration + +Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed. + +See the [example](#example) below to customize the available parameters and see how they affect the Popover component. + +## Example + +The following example lets you experiment with the available settings that control the animation in the Popover. It starts with the default component behavior. + +````CSHTML + + + +Show Popover +Hide Popover + + + + Telerik Blazor Popover + + + +
+
+ +@code { + private TelerikPopover PopoverReference { get; set; } + + private List AnimationTypes { get; set; } + + private AnimationType SelectedAnimationType { get; set; } = AnimationType.SlideDown; + + private int SelectedAnimationDuration { get; set; } = 300; + + private void OnDropDownValueChanged(AnimationType newAnimationType) + { + PopoverReference.Hide(); + + SelectedAnimationType = newAnimationType; + + PopoverReference.Show(); + } + + protected override void OnInitialized() + { + AnimationTypes = new List(); + + foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType))) + { + AnimationTypes.Add(animation); + } + + base.OnInitialized(); + } +} + + +```` \ No newline at end of file diff --git a/components/popover/overview.md b/components/popover/overview.md new file mode 100644 index 0000000000..2aacda8d3c --- /dev/null +++ b/components/popover/overview.md @@ -0,0 +1,135 @@ +--- +title: Overview +page_title: Popover Overview +description: Discover the Blazor Popover. Learn how to add the component to your app and explore its features like adding content, execute actions, positioning and collision, and animation customization. +slug: popover-overview +tags: telerik,blazor,popover,pop,over +published: True +position: 0 +--- + +# Blazor Popover Overview + +The Blazor Popover component helps you to easily display additional information to your users with a tooltip-like behavior. This article explains how to start using the component and describes its features. + +## Creating Blazor Popover + +1. Add the `` tag to a Razor file. +1. Obtain a `@ref` of the component. +1. Add the content to the `` child tag. +1. Use the [Show](#popover-reference-and-methods) method to display the ``. +1. (optional) Add a title inside a `PopoverHeader` tag. HTML markup and child components are supported, too. + +>caption Basic configuration of the Telerik Popover for Blazor + +````CSHTML + + + I am a Telerik Popover + + + Close + + + +
+ Popover target. Click in the element to show the Popover. +
+ +@code{ + private TelerikPopover PopoverReference { get; set; } +} + + +```` + +## Popover Positioning and Collision + +Use the available positioning and collision settings to customize how the Popover positions and reacts to insufficient space in the viewport. [Read more about the Blazor Popover Positioning and Collision...]({%slug popover-position-collision%}) + +## Popover Animations + +Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popover animations...]({%slug popover-animation%}) + +## Popover Parameters + +The Blazor Popover provides parameters to configure the component. Also check the [Popover API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopover) for a full list of properties. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | ----------- | +| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum
(`Stretch`) | Defines the positioning of the elements in the `` child tag. The other possible values for are `Start`, `Center`, and `End`. | +| `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popover uses as an anchor. | +| `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) | +| `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) | +| `Collision` | `PopoverCollision` enum
(`Fit`) | Sets the behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) | +| `Offset` | `double ` | Sets the space between the Popover and its anchor in `pixels`. | +| `Position` | `PopoverPosition ` enum
(`Top`) | Defines the position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) | +| `ShowCallout` | `bool`
(`true`) | Defines if the callout is rendered. | +| `ShowOn` | `PopoverShowEvent` enum
(`Click`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the ShowOn parameter to Click, the Popover will hide when the user clicks outside the component. If the parameter value is MouseEnter, the Popover will hide when the mouse pointer leaves. | + +### Styling and Appearance + +The following parameters enable you to customize the appearance of the Blazor Popover: + +| Parameter | Type | Description | +| --- | --- | --- | +| `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 Popover. | +| `Width` | `string` | The width of the Popover. | + +## Popover Reference and Methods + +To execute Popover methods, obtain a reference to the component instance with `@ref`. + +| Method | Description | +|---------|-------------| +| `Refresh` | Use this method to programmatically re-render the Popover. | +| `Show` | Use this method to display the Popover. | +| `Hide` | Use this method to close the Popover. | + +````CSHTML + + + I am a Telerik Popover + + + Close + + + +
+ Popover target. Click in the element to show the Popover. +
+ +@code{ + private TelerikPopover PopoverReference { get; set; } +} + + +```` + +## Next Steps + +* [Explore the Popover Positioning and Collision Settings]({%slug popover-position-collision%}) +* [Customize the Popover Animations]({%slug popover-animation%}) + +## See Also + +* [Live Popover Demos](https://demos.telerik.com/blazor-ui/popover/overview) +* [Popover API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopover) diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md new file mode 100644 index 0000000000..e5eb253da3 --- /dev/null +++ b/components/popover/position-collision.md @@ -0,0 +1,95 @@ +--- +title: Position and Collision +page_title: Popover Position and Collision +description: Discover the placement settings of the Popover for Blazor. Learn how to configure the Popover position and handle collisions. +slug: popover-position-collision +tags: telerik,blazor,popover,popover,align,position,collision +published: True +position: 10 +--- + +# Popover Position and Collision Settings + +This article outlines the available settings which enable you to control the position of the Popover based on its anchor and dictate how the component responds to insufficient screen space. + +## Position + +To customize how the popover aligns with its anchor element use the `Position` parameter and set its value to a member of the `PopoverPosition` enum: + +* `Top` (default value) +* `Bottom` +* `Left` +* `Right` + +See the [example](#example) below to customize the available parameters and see how they affect the Popover component. + +## Collision + +To define how the Popover reacts to insufficient screen space, set the `Collision` parameter to a member of the `PopoverCollision` enum: + +* `Fit`—The Popover will be shifted until it is fully visible on the screen. +* `Flip`—The Popover will render on the other side of the anchor. + +## Example + +The following example lets you experiment with the available settings that control the position and collision behavior of the Popover. It starts with the default component behavior. + +````CSHTML +
+ +
+
+ +
+ + + + I am a Telerik Popover + + + Close + + + +
+ Popover target. Click in the element to show the Popover. +
+ +@code{ + private TelerikPopover PopoverReference { get; set; } + private PopoverCollision PopoverCollisionType { get; set; } = PopoverCollision.Fit; + private PopoverPosition PopoverPositionType { get; set; } = PopoverPosition.Top; + + private List PopoverPositions { get; set; } = new List() + { + PopoverPosition.Top, + PopoverPosition.Left, + PopoverPosition.Right, + PopoverPosition.Bottom, + }; + + private List PopoverCollisionTypes { get; set; } = new List() + { + PopoverCollision.Fit, + PopoverCollision.Flip + }; +} + + +```` \ No newline at end of file From 23e2bb29d72702b9c564a44017a59252f246194e Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:50:47 +0200 Subject: [PATCH 02/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index 2aacda8d3c..4f6cf6723e 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -10,7 +10,7 @@ position: 0 # Blazor Popover Overview -The Blazor Popover component helps you to easily display additional information to your users with a tooltip-like behavior. This article explains how to start using the component and describes its features. +The Blazor Popover component behaves much as a tooltip and helps you to easily display additional information to your users. This article explains how to start using the component and describes its features. ## Creating Blazor Popover From 3df74a907f5798bf8dda481d2a19b5fe105666d5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:50:55 +0200 Subject: [PATCH 03/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index 4f6cf6723e..c5120bac84 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -17,7 +17,7 @@ The Blazor 1. Add the `` tag to a Razor file. 1. Obtain a `@ref` of the component. 1. Add the content to the `` child tag. -1. Use the [Show](#popover-reference-and-methods) method to display the ``. +1. Use the [`Show`](#popover-reference-and-methods) method to display the ``. 1. (optional) Add a title inside a `PopoverHeader` tag. HTML markup and child components are supported, too. >caption Basic configuration of the Telerik Popover for Blazor From 091ae801d223d26023c9e91d44d163b32dec0f22 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:00 +0200 Subject: [PATCH 04/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index c5120bac84..95a3c3198e 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -18,7 +18,7 @@ The Blazor 1. Obtain a `@ref` of the component. 1. Add the content to the `` child tag. 1. Use the [`Show`](#popover-reference-and-methods) method to display the ``. -1. (optional) Add a title inside a `PopoverHeader` tag. HTML markup and child components are supported, too. +1. (optional) Add a title inside a `` tag. HTML markup and child components are supported, too. >caption Basic configuration of the Telerik Popover for Blazor From b5b9048ed2c4ec37db32f6f23113b1988e4c68b3 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:06 +0200 Subject: [PATCH 05/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index 95a3c3198e..e23f88b26c 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -52,7 +52,7 @@ The Blazor ## Popover Positioning and Collision -Use the available positioning and collision settings to customize how the Popover positions and reacts to insufficient space in the viewport. [Read more about the Blazor Popover Positioning and Collision...]({%slug popover-position-collision%}) +Use the available positioning and collision settings to customize how the Popover positions itself and reacts to insufficient space in the viewport. [Read more about the Blazor Popover Positioning and Collision...]({%slug popover-position-collision%}) ## Popover Animations From 71b9c0bdd434a078036dac93d6e4bc5a6b6046ae Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:14 +0200 Subject: [PATCH 06/16] Update components/popover/animation.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/animation.md b/components/popover/animation.md index 4f262232d9..4c3626895b 100644 --- a/components/popover/animation.md +++ b/components/popover/animation.md @@ -37,7 +37,7 @@ See the [example](#example) below to customize the available parameters and see Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed. -See the [example](#example) below to customize the available parameters and see how they affect the Popover component. +The [example](#example) below lets you customize the available `AnimationDuration` parameter and see how it affects the Popover component. ## Example From b22468ece0f4a83d26346faf942aa4a2fe7cc797 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:18 +0200 Subject: [PATCH 07/16] Update components/popover/animation.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/animation.md b/components/popover/animation.md index 4c3626895b..d8f626a18a 100644 --- a/components/popover/animation.md +++ b/components/popover/animation.md @@ -31,7 +31,7 @@ You can change the way the Popover component flows in and out of the screen by s * `ZoomIn` * `ZoomOut` -See the [example](#example) below to customize the available parameters and see how they affect the Popover component. +The [example](#example) below lets you customize the available `AnimationType` parameters and see how they affect the Popover component. ## Duration From dad25453442c16daf6a52ac0a6899e046910ecce Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:23 +0200 Subject: [PATCH 08/16] Update components/popover/position-collision.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md index e5eb253da3..f500fb41fc 100644 --- a/components/popover/position-collision.md +++ b/components/popover/position-collision.md @@ -27,7 +27,7 @@ See the [example](#example) below to customize the available parameters and see To define how the Popover reacts to insufficient screen space, set the `Collision` parameter to a member of the `PopoverCollision` enum: -* `Fit`—The Popover will be shifted until it is fully visible on the screen. +* `Fit`—The Popover will shift until it is fully visible on the screen. * `Flip`—The Popover will render on the other side of the anchor. ## Example From 4eb5f404a10b9af59fe01d9ec9e9d17b7aecfbc7 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:29 +0200 Subject: [PATCH 09/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index e23f88b26c..a233a8081a 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -56,7 +56,7 @@ Use the available positioning and collision settings to customize how the Popove ## Popover Animations -Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popover animations...]({%slug popover-animation%}) +Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popover Animations...]({%slug popover-animation%}) ## Popover Parameters From 556573e3c45ad4ebca9391efed282a01eac352bb Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:34 +0200 Subject: [PATCH 10/16] Update components/popover/position-collision.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md index f500fb41fc..a42d1ae768 100644 --- a/components/popover/position-collision.md +++ b/components/popover/position-collision.md @@ -14,7 +14,7 @@ This article outlines the available settings which enable you to control the pos ## Position -To customize how the popover aligns with its anchor element use the `Position` parameter and set its value to a member of the `PopoverPosition` enum: +To customize how the popover aligns with its anchor element, use the `Position` parameter and set its value to a member of the `PopoverPosition` enum: * `Top` (default value) * `Bottom` From 45f707915cd67656c20af55e3b336bb111e4cb0c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:51:38 +0200 Subject: [PATCH 11/16] Update components/popover/position-collision.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md index a42d1ae768..b70bbd1a6b 100644 --- a/components/popover/position-collision.md +++ b/components/popover/position-collision.md @@ -21,7 +21,7 @@ To customize how the popover aligns with its anchor element, use the `Position` * `Left` * `Right` -See the [example](#example) below to customize the available parameters and see how they affect the Popover component. +The [example](#example) below lets you customize the available `Position` parameters and see how they affect the Popover component. ## Collision From 95424aee113887682fd13dd1ba31a84d88719db5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:56:16 +0200 Subject: [PATCH 12/16] chore(popover): remove custom html and use our button instead and add better refresh description --- components/popover/overview.md | 26 +++----------------------- 1 file changed, 3 insertions(+), 23 deletions(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index a233a8081a..4718f7f539 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -33,21 +33,11 @@ The Blazor -
- Popover target. Click in the element to show the Popover. -
+Show the Popover @code{ private TelerikPopover PopoverReference { get; set; } } - - ```` ## Popover Positioning and Collision @@ -92,7 +82,7 @@ To execute Popover methods, obtain a reference to the component instance with `@ | Method | Description | |---------|-------------| -| `Refresh` | Use this method to programmatically re-render the Popover. | +| `Refresh` | Use this method to programmatically re-render the Popover.
The Popover 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 Popover content is up-to-date. | | `Show` | Use this method to display the Popover. | | `Hide` | Use this method to close the Popover. | @@ -107,21 +97,11 @@ To execute Popover methods, obtain a reference to the component instance with `@ -
- Popover target. Click in the element to show the Popover. -
+Show the Popover @code{ private TelerikPopover PopoverReference { get; set; } } - - ```` ## Next Steps From 532e777d52ee842e100d333e70407190aa591c13 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:58:52 +0200 Subject: [PATCH 13/16] chore(popover): add the popover to config file --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_config.yml b/_config.yml index f992aa6ecc..7899259320 100644 --- a/_config.yml +++ b/_config.yml @@ -394,6 +394,8 @@ navigation: title: "Notification" "*popup": title: "Popup" + "*popover": + title: "Popover" "*numerictextbox": title: "NumericTextBox" "*pdfviewer": @@ -626,6 +628,7 @@ intro_columns: "Notification": "notification-overview" "Progress Bar": "progressbar-overview" "Chunk Progress Bar": "chunkprogressbar-overview" + "Popover": "popover-overview" "Tooltip": "tooltip-overview" - title: "Documents" From 3483f7cedc69b7a4ec6b87e6de987800b002f403 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 15:15:46 +0200 Subject: [PATCH 14/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index 4718f7f539..a0bcb8ea1c 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -64,7 +64,7 @@ The Blazor Popover provides parameters to configure the component. Also check th | `Offset` | `double ` | Sets the space between the Popover and its anchor in `pixels`. | | `Position` | `PopoverPosition ` enum
(`Top`) | Defines the position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) | | `ShowCallout` | `bool`
(`true`) | Defines if the callout is rendered. | -| `ShowOn` | `PopoverShowEvent` enum
(`Click`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the ShowOn parameter to Click, the Popover will hide when the user clicks outside the component. If the parameter value is MouseEnter, the Popover will hide when the mouse pointer leaves. | +| `ShowOn` | `PopoverShowEvent` enum
(`Click`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter's value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. | ### Styling and Appearance From 6470e379b594b4209afc973b3b7e3c8198eac793 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 15:16:17 +0200 Subject: [PATCH 15/16] Update components/popover/overview.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- components/popover/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popover/overview.md b/components/popover/overview.md index a0bcb8ea1c..e200e647c6 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -56,7 +56,7 @@ The Blazor Popover provides parameters to configure the component. Also check th | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum
(`Stretch`) | Defines the positioning of the elements in the `` child tag. The other possible values for are `Start`, `Center`, and `End`. | +| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum
(`Stretch`) | Defines the positioning of the elements in the `` child tag. The possible values are `Stretch`, `Start`, `Center`, and `End`. | | `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popover uses as an anchor. | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) | From b2b8cceba4e5ab43b6da424fc042a2ff239eceb1 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 15:32:01 +0200 Subject: [PATCH 16/16] docs(popover): polising --- components/popover/animation.md | 14 +++++------ components/popover/overview.md | 32 ++++++++++++------------ components/popover/position-collision.md | 10 ++++---- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/components/popover/animation.md b/components/popover/animation.md index d8f626a18a..9413a3d523 100644 --- a/components/popover/animation.md +++ b/components/popover/animation.md @@ -59,10 +59,10 @@ The following example lets you experiment with the available settings that contr Width="100px" /> -Show Popover -Hide Popover +Show Popover +Hide Popover - @code { - private TelerikPopover PopoverReference { get; set; } + private TelerikPopover PopoverRef { get; set; } private List AnimationTypes { get; set; } @@ -86,11 +86,11 @@ The following example lets you experiment with the available settings that contr private void OnDropDownValueChanged(AnimationType newAnimationType) { - PopoverReference.Hide(); + PopoverRef.Hide(); SelectedAnimationType = newAnimationType; - PopoverReference.Show(); + PopoverRef.Show(); } protected override void OnInitialized() @@ -114,4 +114,4 @@ The following example lets you experiment with the available settings that contr margin-top: 20px; } -```` \ No newline at end of file +```` diff --git a/components/popover/overview.md b/components/popover/overview.md index e200e647c6..fcb836fda6 100644 --- a/components/popover/overview.md +++ b/components/popover/overview.md @@ -10,7 +10,7 @@ position: 0 # Blazor Popover Overview -The Blazor Popover component behaves much as a tooltip and helps you to easily display additional information to your users. This article explains how to start using the component and describes its features. +The Blazor Popover component behaves much like a tooltip, as it helps you display additional information in a container that shows on top of the other page content. The major differences between the Popover and the [Tooltip]({%slug tooltip-overview%}) components is that the Popover has built-in support for action buttons and provides more configuration options about its animation and placement on the screen. This article explains how to start using the component and describes its features. ## Creating Blazor Popover @@ -23,20 +23,20 @@ The Blazor >caption Basic configuration of the Telerik Popover for Blazor ````CSHTML - I am a Telerik Popover - Close + Close -Show the Popover +Show the Popover @code{ - private TelerikPopover PopoverReference { get; set; } + private TelerikPopover PopoverRef { get; set; } } ```` @@ -56,13 +56,13 @@ The Blazor Popover provides parameters to configure the component. Also check th | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum
(`Stretch`) | Defines the positioning of the elements in the `` child tag. The possible values are `Stretch`, `Start`, `Center`, and `End`. | -| `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popover uses as an anchor. | -| `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) | -| `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) | -| `Collision` | `PopoverCollision` enum
(`Fit`) | Sets the behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) | -| `Offset` | `double ` | Sets the space between the Popover and its anchor in `pixels`. | -| `Position` | `PopoverPosition ` enum
(`Top`) | Defines the position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) | +| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum
(`Stretch`) | The positioning of the elements in the `` child tag. The possible values are `Stretch`, `Start`, `Center`, and `End`. | +| `AnchorSelector` | `string` | The CSS selector targeting the element that the Popover uses as an anchor. | +| `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) | +| `AnimationType` | `AnimationType` enum
(`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) | +| `Collision` | `PopoverCollision` enum
(`Fit`) | The behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) | +| `Offset` | `double ` | The space between the Popover and its anchor in pixels. | +| `Position` | `PopoverPosition ` enum
(`Top`) | The position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) | | `ShowCallout` | `bool`
(`true`) | Defines if the callout is rendered. | | `ShowOn` | `PopoverShowEvent` enum
(`Click`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter's value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. | @@ -87,20 +87,20 @@ To execute Popover methods, obtain a reference to the component instance with `@ | `Hide` | Use this method to close the Popover. | ````CSHTML - I am a Telerik Popover - Close + Close -Show the Popover +Show the Popover @code{ - private TelerikPopover PopoverReference { get; set; } + private TelerikPopover PopoverRef { get; set; } } ```` diff --git a/components/popover/position-collision.md b/components/popover/position-collision.md index b70bbd1a6b..ddda75b8df 100644 --- a/components/popover/position-collision.md +++ b/components/popover/position-collision.md @@ -48,7 +48,7 @@ The following example lets you experiment with the available settings that contr
- @@ -56,16 +56,16 @@ The following example lets you experiment with the available settings that contr I am a Telerik Popover - Close + Close -
+
Popover target. Click in the element to show the Popover.
@code{ - private TelerikPopover PopoverReference { get; set; } + private TelerikPopover PopoverRef { get; set; } private PopoverCollision PopoverCollisionType { get; set; } = PopoverCollision.Fit; private PopoverPosition PopoverPositionType { get; set; } = PopoverPosition.Top; @@ -92,4 +92,4 @@ The following example lets you experiment with the available settings that contr margin-top: 20px; } -```` \ No newline at end of file +````