Skip to content

Commit 973e7fd

Browse files
svdimitryordan-mitevdimodi
authored
Popover docs (#1884)
* docs(popover): documentation * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/animation.md Co-authored-by: Yordan <[email protected]> * Update components/popover/animation.md Co-authored-by: Yordan <[email protected]> * Update components/popover/position-collision.md Co-authored-by: Yordan <[email protected]> * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/position-collision.md Co-authored-by: Yordan <[email protected]> * Update components/popover/position-collision.md Co-authored-by: Yordan <[email protected]> * chore(popover): remove custom html and use our button instead and add better refresh description * chore(popover): add the popover to config file * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * Update components/popover/overview.md Co-authored-by: Yordan <[email protected]> * docs(popover): polising --------- Co-authored-by: Yordan <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 046d779 commit 973e7fd

File tree

4 files changed

+330
-0
lines changed

4 files changed

+330
-0
lines changed

‎_config.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -401,6 +401,8 @@ navigation:
401401
title: "Notification"
402402
"*popup":
403403
title: "Popup"
404+
"*popover":
405+
title: "Popover"
404406
"*numerictextbox":
405407
title: "NumericTextBox"
406408
"*pdfviewer":
@@ -634,6 +636,7 @@ intro_columns:
634636
"Notification": "notification-overview"
635637
"Progress Bar": "progressbar-overview"
636638
"Chunk Progress Bar": "chunkprogressbar-overview"
639+
"Popover": "popover-overview"
637640
"Tooltip": "tooltip-overview"
638641
"Popup": "popup-overview"
639642
-

‎components/popover/animation.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
title: Animation
3+
page_title: Popover Animation
4+
description: Explore the animation settings of the Popover for Blazor. Discover how to adjust the way the Popover appears and disappears on the screen.
5+
slug: popover-animation
6+
tags: telerik,blazor,popover,animation
7+
published: True
8+
position: 35
9+
---
10+
11+
# Popover Animation Settings
12+
13+
This article outlines the available settings that allow you to customize the animations when the Popover displays and hides.
14+
15+
## Type
16+
17+
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:
18+
19+
* `None`
20+
* `Fade`
21+
* `PushUp`
22+
* `PushDown`
23+
* `PushLeft`
24+
* `PushRight`
25+
* `RevealVertical`
26+
* `SlideUp`
27+
* `SlideIn`
28+
* `SlideDown` (default)
29+
* `SlideRight`
30+
* `SlideLeft`
31+
* `ZoomIn`
32+
* `ZoomOut`
33+
34+
The [example](#example) below lets you customize the available `AnimationType` parameters and see how they affect the Popover component.
35+
36+
## Duration
37+
38+
Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed.
39+
40+
The [example](#example) below lets you customize the available `AnimationDuration` parameter and see how it affects the Popover component.
41+
42+
## Example
43+
44+
The following example lets you experiment with the available settings that control the animation in the Popover. It starts with the default component behavior.
45+
46+
````CSHTML
47+
<label>
48+
Animation Type:
49+
<TelerikDropDownList Data="@AnimationTypes"
50+
Value="@SelectedAnimationType"
51+
ValueChanged="@( (AnimationType newValue) => OnDropDownValueChanged(newValue) )"
52+
Width="160px" />
53+
</label>
54+
<label>
55+
Animation Duration:
56+
<TelerikNumericTextBox @bind-Value="@SelectedAnimationDuration"
57+
Min="0"
58+
Max="7000"
59+
Width="100px" />
60+
</label>
61+
62+
<TelerikButton OnClick="@(() => PopoverRef.Show())">Show Popover</TelerikButton>
63+
<TelerikButton OnClick="@(() => PopoverRef.Hide())">Hide Popover</TelerikButton>
64+
65+
<TelerikPopover @ref="@PopoverRef"
66+
AnchorSelector=".popover-target"
67+
AnimationType="@SelectedAnimationType"
68+
AnimationDuration="@SelectedAnimationDuration"
69+
Width="300px">
70+
<PopoverContent>
71+
Telerik Blazor Popover
72+
</PopoverContent>
73+
</TelerikPopover>
74+
75+
<div class="popover-target styled-container">
76+
</div>
77+
78+
@code {
79+
private TelerikPopover PopoverRef { get; set; }
80+
81+
private List<AnimationType> AnimationTypes { get; set; }
82+
83+
private AnimationType SelectedAnimationType { get; set; } = AnimationType.SlideDown;
84+
85+
private int SelectedAnimationDuration { get; set; } = 300;
86+
87+
private void OnDropDownValueChanged(AnimationType newAnimationType)
88+
{
89+
PopoverRef.Hide();
90+
91+
SelectedAnimationType = newAnimationType;
92+
93+
PopoverRef.Show();
94+
}
95+
96+
protected override void OnInitialized()
97+
{
98+
AnimationTypes = new List<AnimationType>();
99+
100+
foreach (AnimationType animation in Enum.GetValues(typeof(AnimationType)))
101+
{
102+
AnimationTypes.Add(animation);
103+
}
104+
105+
base.OnInitialized();
106+
}
107+
}
108+
109+
<style>
110+
.styled-container {
111+
width: 200px;
112+
height: 30px;
113+
background-color: yellowgreen;
114+
margin-top: 20px;
115+
}
116+
</style>
117+
````

‎components/popover/overview.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Overview
3+
page_title: Popover Overview
4+
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.
5+
slug: popover-overview
6+
tags: telerik,blazor,popover,pop,over
7+
published: True
8+
position: 0
9+
---
10+
11+
# Blazor Popover Overview
12+
13+
The <a href = "https://www.telerik.com/blazor-ui/popover" target="_blank">Blazor Popover component</a> 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.
14+
15+
## Creating Blazor Popover
16+
17+
1. Add the `<TelerikPopover>` tag to a Razor file.
18+
1. Obtain a `@ref` of the component.
19+
1. Add the content to the `<PopoverContent>` child tag.
20+
1. Use the [`Show`](#popover-reference-and-methods) method to display the `<TelerikPopover>`.
21+
1. (optional) Add a title inside a `<PopoverHeader>` tag. HTML markup and child components are supported, too.
22+
23+
>caption Basic configuration of the Telerik Popover for Blazor
24+
25+
````CSHTML
26+
<TelerikPopover @ref="@PopoverRef"
27+
AnchorSelector=".popover-target">
28+
<PopoverContent>
29+
I am a Telerik Popover
30+
</PopoverContent>
31+
<PopoverActions>
32+
<TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
33+
</PopoverActions>
34+
</TelerikPopover>
35+
36+
<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
37+
38+
@code{
39+
private TelerikPopover PopoverRef { get; set; }
40+
}
41+
````
42+
43+
## Popover Positioning and Collision
44+
45+
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%})
46+
47+
## Popover Animations
48+
49+
Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popover Animations...]({%slug popover-animation%})
50+
51+
## Popover Parameters
52+
53+
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.
54+
55+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
56+
57+
| Parameter | Type | Description |
58+
| ----------- | ----------- | ----------- |
59+
| `ActionsLayout` | `PopoverActionsLayoutAlign ` enum <br /> (`Stretch`) | The positioning of the elements in the `<PopoverActions>` child tag. The possible values are `Stretch`, `Start`, `Center`, and `End`. |
60+
| `AnchorSelector` | `string` | The CSS selector targeting the element that the Popover uses as an anchor. |
61+
| `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) |
62+
| `AnimationType` | `AnimationType` enum <br /> (`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) |
63+
| `Collision` | `PopoverCollision` enum <br /> (`Fit`) | The behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) |
64+
| `Offset` | `double ` | The space between the Popover and its anchor in pixels. |
65+
| `Position` | `PopoverPosition ` enum <br /> (`Top`) | The position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) |
66+
| `ShowCallout` | `bool` <br /> (`true`) | Defines if the callout is rendered. |
67+
| `ShowOn` | `PopoverShowEvent` enum <br /> (`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. |
68+
69+
### Styling and Appearance
70+
71+
The following parameters enable you to customize the appearance of the Blazor Popover:
72+
73+
| Parameter | Type | Description |
74+
| --- | --- | --- |
75+
| `Class` | `string` | The custom CSS class to be rendered on the `<div>` element, which wraps the component `ChildContent`. Use for [styling customizations]({%slug themes-override%}). |
76+
| `Height` | `string` | The height of the Popover. |
77+
| `Width` | `string` | The width of the Popover. |
78+
79+
## Popover Reference and Methods
80+
81+
To execute Popover methods, obtain a reference to the component instance with `@ref`.
82+
83+
| Method | Description |
84+
|---------|-------------|
85+
| `Refresh` | Use this method to programmatically re-render the Popover. <br /> 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. |
86+
| `Show` | Use this method to display the Popover. |
87+
| `Hide` | Use this method to close the Popover. |
88+
89+
````CSHTML
90+
<TelerikPopover @ref="@PopoverRef"
91+
AnchorSelector=".popover-target">
92+
<PopoverContent>
93+
I am a Telerik Popover
94+
</PopoverContent>
95+
<PopoverActions>
96+
<TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
97+
</PopoverActions>
98+
</TelerikPopover>
99+
100+
<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
101+
102+
@code{
103+
private TelerikPopover PopoverRef { get; set; }
104+
}
105+
````
106+
107+
## Next Steps
108+
109+
* [Explore the Popover Positioning and Collision Settings]({%slug popover-position-collision%})
110+
* [Customize the Popover Animations]({%slug popover-animation%})
111+
112+
## See Also
113+
114+
* [Live Popover Demos](https://demos.telerik.com/blazor-ui/popover/overview)
115+
* [Popover API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopover)

‎components/popover/position-collision.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Position and Collision
3+
page_title: Popover Position and Collision
4+
description: Discover the placement settings of the Popover for Blazor. Learn how to configure the Popover position and handle collisions.
5+
slug: popover-position-collision
6+
tags: telerik,blazor,popover,popover,align,position,collision
7+
published: True
8+
position: 10
9+
---
10+
11+
# Popover Position and Collision Settings
12+
13+
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.
14+
15+
## Position
16+
17+
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:
18+
19+
* `Top` (default value)
20+
* `Bottom`
21+
* `Left`
22+
* `Right`
23+
24+
The [example](#example) below lets you customize the available `Position` parameters and see how they affect the Popover component.
25+
26+
## Collision
27+
28+
To define how the Popover reacts to insufficient screen space, set the `Collision` parameter to a member of the `PopoverCollision` enum:
29+
30+
* `Fit`&mdash;The Popover will shift until it is fully visible on the screen.
31+
* `Flip`&mdash;The Popover will render on the other side of the anchor.
32+
33+
## Example
34+
35+
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.
36+
37+
````CSHTML
38+
<div>
39+
<label>
40+
Popover Position
41+
<TelerikDropDownList @bind-Value="@PopoverPositionType" Data="@PopoverPositions" Width="200px" />
42+
</label>
43+
</div>
44+
<div>
45+
<label>
46+
Popover Collision Type
47+
<TelerikDropDownList @bind-Value="@PopoverCollisionType" Data="@PopoverCollisionTypes" Width="200px" />
48+
</label>
49+
</div>
50+
51+
<TelerikPopover @ref="@PopoverRef"
52+
AnchorSelector=".popover-target"
53+
Collision="@PopoverCollisionType"
54+
Position="@PopoverPositionType">
55+
<PopoverContent>
56+
I am a Telerik Popover
57+
</PopoverContent>
58+
<PopoverActions>
59+
<TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
60+
</PopoverActions>
61+
</TelerikPopover>
62+
63+
<div class="popover-target styled-container" @onclick="@(_ => PopoverRef.Show())">
64+
Popover target. Click in the element to show the Popover.
65+
</div>
66+
67+
@code{
68+
private TelerikPopover PopoverRef { get; set; }
69+
private PopoverCollision PopoverCollisionType { get; set; } = PopoverCollision.Fit;
70+
private PopoverPosition PopoverPositionType { get; set; } = PopoverPosition.Top;
71+
72+
private List<PopoverPosition> PopoverPositions { get; set; } = new List<PopoverPosition>()
73+
{
74+
PopoverPosition.Top,
75+
PopoverPosition.Left,
76+
PopoverPosition.Right,
77+
PopoverPosition.Bottom,
78+
};
79+
80+
private List<PopoverCollision> PopoverCollisionTypes { get; set; } = new List<PopoverCollision>()
81+
{
82+
PopoverCollision.Fit,
83+
PopoverCollision.Flip
84+
};
85+
}
86+
87+
<style>
88+
.styled-container {
89+
width: 300px;
90+
height: 50px;
91+
background-color: yellowgreen;
92+
margin-top: 20px;
93+
}
94+
</style>
95+
````

0 commit comments

Comments
 (0)