From 85676cc8efa1f06ec75a7fbf509cd3dc46d5f1f7 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Tue, 28 Nov 2023 14:58:42 +0200 Subject: [PATCH 01/53] docs(popup): first commit --- components/popup/appearance.md | 86 ++++++++++++++++++++++ components/popup/overview.md | 129 +++++++++++++++++++++++++++++++++ 2 files changed, 215 insertions(+) create mode 100644 components/popup/appearance.md create mode 100644 components/popup/overview.md diff --git a/components/popup/appearance.md b/components/popup/appearance.md new file mode 100644 index 0000000000..f1083cdaea --- /dev/null +++ b/components/popup/appearance.md @@ -0,0 +1,86 @@ +--- +title: Appearance +page_title: AppBar Appearance +description: Appearance settings of the AppBar for Blazor. +slug: appbar-appearance +tags: telerik,blazor,appbar,navbar,appearance +published: True +position: 35 +--- + +# Appearance Settings + +This article outlines the available AppBar parameters, which control its appearance. + +## ThemeColor + +You can change the color of the AppBar by setting the `ThemeColor` parameter to a member of the `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Base` | `base` | +| `Primary` | `primary`| +| `Secondary` | `secondary`| +| `Tertiary` | `tertiary`| +| `Info` | `info` | +| `Success` | `success`| +| `Warning` | `warning`| +| `Error` | `error` | +| `Dark` | `dark` | +| `Light` | `light` | +| `Inverse` | `inverse`| + +>caption The built-in AppBar colors + +````CSHTML + + + + + Our Logo + + + + + + Our Products + + + + + + Our Mission + + + + + + + + + + + + + + + +@code { + private string SelectedColor { get; set; } = "base"; + + private List ThemeColors { get; set; } = new List() + { + "base", + "primary", + "secondary", + "tertiary", + "info", + "success", + "warning", + "error", + "dark", + "light", + "inverse" + }; +} +```` \ No newline at end of file diff --git a/components/popup/overview.md b/components/popup/overview.md new file mode 100644 index 0000000000..211ba6dae4 --- /dev/null +++ b/components/popup/overview.md @@ -0,0 +1,129 @@ +--- +title: Overview +page_title: Popup Overview +description: Discover the Telerik Popup component for Blazor. Learn how to add the component to your app and explore its features like positioning, alignment, alignment, and animation customization. +slug: popup-overview +tags: telerik,blazor,popup +published: True +position: 0 +--- + +# Blazor Popup Overview + +The Blazor Popup component helps you to easily add popups to an element in your application. You can use to Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features. + +## Creating Blazor AppBar + +1. Add the `` tag to a Razor file. + +>caption Basic configuration of the Telerik AppBar + +````CSHTML + + + Company Logo + + + + + + Our Products + + + + + + Our Mission + + + + + + Contact Us + + + + + + + + + + + + + + +```` + +## AppBar Sections + +Use the AppBar Sections to render arbitrary HTML content to match the UI and UX needs of your application. [Read more about the Blazor AppBar sections...]({%slug appbar-sections%}) + +## Content Dividers + +The AppBar features separators and spacers that can visually divide the component items. [Read more about the Blazor AppBar separators and spacers.]({%slug appbar-separators%}). + +## Positioning + +You can control the position of the AppBar and how the component behaves according to the flow of the page. [Read more about the Blazor AppBar positioning.]({%slug appbar-position%}). + +## AppBar Parameters + +The Blazor AppBar provides parameters to configure the component. Also check the [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) for a full list of properties. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | ----------- | +| `Position` | `AppBarPosition`
(`None`) | The position of the AppBar on the page. [Read more about AppBar positioning.]({%slug appbar-position%}) | +| `PositionMode` | `AppBarPosition`
(`Static`) | Sets how the AppBar is positioned according to the flow of the document. [Read more about AppBar positioning.]({%slug appbar-position%}) | + +### Styling and Appearance + +The following parameters enable you to customize the appearance of the Blazor AppBar: + +| Parameter | Type | Description | +| --- | --- | --- | +| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the AppBar component, which is `
`. Use for [styling customizations]({%slug themes-override%}). | +| `Height` | `string` | The height of the AppBar. | +| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar | +| `Width` | `string` | The width of the AppBar. | + +You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}). + +## AppBar Reference and Methods + +To execute AppBar methods, obtain reference to the component instance with `@ref`. + +| Method | Description | +|---------|-------------| +| `Refresh` | Use the method to programmatically re-render the AppBar. | + +
+ +````CSHTML +Refresh AppBar + + + +@code { + private TelerikAppBar AppBarRef { get; set; } + + private void RefreshAppBar() + { + AppBarRef.Refresh(); + } +} +```` + +## Next Steps + +* [Explore the AppBar Sections]({%slug appbar-sections%}) +* [Use the AppBar Sections]({%slug appbar-separators%}) +* [Customize the AppBar position]({%slug appbar-position%}) + +## See Also + +* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview) +* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) From 7fb3d9920c62027269e94ede3cc0154e996c1ff8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 15 Jan 2024 13:58:50 +0200 Subject: [PATCH 02/53] chore(popup): finalize overview --- components/popup/overview.md | 141 ++++++++++++++++++----------------- 1 file changed, 71 insertions(+), 70 deletions(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 211ba6dae4..9d521225ed 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -1,7 +1,7 @@ --- title: Overview page_title: Popup Overview -description: Discover the Telerik Popup component for Blazor. Learn how to add the component to your app and explore its features like positioning, alignment, alignment, and animation customization. +description: Discover the Telerik Popup component for Blazor. Learn how to add the component to your app and explore its features like positioning, alignment, and animation customization. slug: popup-overview tags: telerik,blazor,popup published: True @@ -12,72 +12,63 @@ position: 0 The Blazor Popup component helps you to easily add popups to an element in your application. You can use to Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features. -## Creating Blazor AppBar +## Creating Blazor Popup 1. Add the `` tag to a Razor file. +1. Obtain a `@ref` of the component +1. Use the [Show](#popup-reference-and-methods) method to display the `` ->caption Basic configuration of the Telerik AppBar +>caption Basic configuration of the Telerik Popup ````CSHTML - - - Company Logo - + + I am a Telerik Popup. + - + - - Our Products - - - - - - Our Mission - - - - - - Contact Us - - - - - - - - - +@code { + private TelerikPopup PopupRef { get; set; } +} - - - - + ```` -## AppBar Sections - -Use the AppBar Sections to render arbitrary HTML content to match the UI and UX needs of your application. [Read more about the Blazor AppBar sections...]({%slug appbar-sections%}) +## Popup Positioning and Collision -## Content Dividers +Use the available positioning and collision settings to customize how the Popup positions and reacts to unsufficient space in the viewport. [Read more about the Blazor Popup Positioning and Collision...]({%slug popup-position-collision%}) -The AppBar features separators and spacers that can visually divide the component items. [Read more about the Blazor AppBar separators and spacers.]({%slug appbar-separators%}). +## Popup Animations -## Positioning +Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popup animations...]({%slug popup-amination%}). -You can control the position of the AppBar and how the component behaves according to the flow of the page. [Read more about the Blazor AppBar positioning.]({%slug appbar-position%}). +## Popup Parameters -## AppBar Parameters - -The Blazor AppBar provides parameters to configure the component. Also check the [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) for a full list of properties. +The Blazor Popup provides parameters to configure the component. Also check the [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) for a full list of properties. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `Position` | `AppBarPosition`
(`None`) | The position of the AppBar on the page. [Read more about AppBar positioning.]({%slug appbar-position%}) | -| `PositionMode` | `AppBarPosition`
(`Static`) | Sets how the AppBar is positioned according to the flow of the document. [Read more about AppBar positioning.]({%slug appbar-position%}) | +| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Define how the popup aligns with the anchor element on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| +| `AnchorSelector` | `string` | The CSS selector that targets the element that the popup uses as an anchor. | +| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the popup aligns with the anchor element on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | +| `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | +| `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | +| `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the popup will touch it's anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | +| `HorizontalCollision` | `PopupCollision ` enum
(`Fit`) | Sets the behavior of the popup when it does fit in the viewport based on the horizontal plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | +| `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | +| `VerticalAlign` | `PopupVerticalAlign ` enum
(`Left`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | +| `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | +| `VerticalOffset` | `double` | Sets vertical space between the popup and it's anchor in `pixels`. | ### Styling and Appearance @@ -85,45 +76,55 @@ The following parameters enable you to customize the appearance of the Blazor Ap | Parameter | Type | Description | | --- | --- | --- | -| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the AppBar component, which is `
`. Use for [styling customizations]({%slug themes-override%}). | -| `Height` | `string` | The height of the AppBar. | -| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar | -| `Width` | `string` | The width of the AppBar. | - -You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}). +| `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. | -## AppBar Reference and Methods +## Popup Reference and Methods -To execute AppBar methods, obtain reference to the component instance with `@ref`. +To execute Popup methods, obtain reference to the component instance with `@ref`. | Method | Description | |---------|-------------| -| `Refresh` | Use the method to programmatically re-render the AppBar. | - -
+| `Refresh` | Use this method to programmatically re-render the Popup. | +| `Show` | Use this method to display the Popup. | +| `Hide` | Use this method to close the Popup. | ````CSHTML -Refresh AppBar +Show the Popup + + + I am a Telerik Popup! + - + @code { - private TelerikAppBar AppBarRef { get; set; } + private TelerikPopup PopupRef { get; set; } - private void RefreshAppBar() - { - AppBarRef.Refresh(); - } + private void ShowPopup() + { + PopupRef.Show(); + } } + + ```` ## Next Steps -* [Explore the AppBar Sections]({%slug appbar-sections%}) -* [Use the AppBar Sections]({%slug appbar-separators%}) -* [Customize the AppBar position]({%slug appbar-position%}) +* [Explore the Popup Positioning and Collision settings]({%slug popup-position-collision%}) +* [Customize the Popup Animations]({%slug popup-animation%}) ## See Also -* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview) -* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) +* [Live Popup Demos](https://demos.telerik.com/blazor-ui/popup/overview) +* [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) From 82553cc88c8f57266aeac47b5c47703c48d09fe8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Mon, 15 Jan 2024 16:09:20 +0200 Subject: [PATCH 03/53] chore(popup): add animations article --- components/popup/animation.md | 118 +++++++++++++++++++++++++++++++++ components/popup/appearance.md | 86 ------------------------ components/popup/overview.md | 4 +- 3 files changed, 120 insertions(+), 88 deletions(-) create mode 100644 components/popup/animation.md delete mode 100644 components/popup/appearance.md diff --git a/components/popup/animation.md b/components/popup/animation.md new file mode 100644 index 0000000000..c8adde4915 --- /dev/null +++ b/components/popup/animation.md @@ -0,0 +1,118 @@ +--- +title: Animation +page_title: Popup Animation +description: Animation settings of the Popup for Blazor. +slug: popup-animation +tags: telerik,blazor,popup,animation +published: True +position: 35 +--- + +# Animation Settings + +This article outlines the available settings that allow you to customize the animations when the Popup displays and hides. + +## AnimationType + +You can change the way the Popup 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 reflect the Popup component. + +## AnimationDuration + +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 reflect the Popup component. + +## Example + +The following example lets you experiment with the available settings that control the animation in the Popup. It starts with the default component behavior. + +````CSHTML + + + +Show Popup +Hide Popup + + +
+ Telerik Blazor Animation Container +
+
+ + + +@code { + private TelerikPopup PopupRef { 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) + { + PopupRef.Hide(); + + SelectedAnimationType = newAnimationType; + + PopupRef.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/popup/appearance.md b/components/popup/appearance.md deleted file mode 100644 index f1083cdaea..0000000000 --- a/components/popup/appearance.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Appearance -page_title: AppBar Appearance -description: Appearance settings of the AppBar for Blazor. -slug: appbar-appearance -tags: telerik,blazor,appbar,navbar,appearance -published: True -position: 35 ---- - -# Appearance Settings - -This article outlines the available AppBar parameters, which control its appearance. - -## ThemeColor - -You can change the color of the AppBar by setting the `ThemeColor` parameter to a member of the `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` class: - -| Class members | Manual declarations | -|---------------|--------| -| `Base` | `base` | -| `Primary` | `primary`| -| `Secondary` | `secondary`| -| `Tertiary` | `tertiary`| -| `Info` | `info` | -| `Success` | `success`| -| `Warning` | `warning`| -| `Error` | `error` | -| `Dark` | `dark` | -| `Light` | `light` | -| `Inverse` | `inverse`| - ->caption The built-in AppBar colors - -````CSHTML - - - - - Our Logo - - - - - - Our Products - - - - - - Our Mission - - - - - - - - - - - - - - - -@code { - private string SelectedColor { get; set; } = "base"; - - private List ThemeColors { get; set; } = new List() - { - "base", - "primary", - "secondary", - "tertiary", - "info", - "success", - "warning", - "error", - "dark", - "light", - "inverse" - }; -} -```` \ No newline at end of file diff --git a/components/popup/overview.md b/components/popup/overview.md index 9d521225ed..a441ce360e 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -36,7 +36,7 @@ The Blazor P @@ -113,7 +113,7 @@ To execute Popup methods, obtain reference to the component instance with `@ref` From faa8a8d582fd0e12f4dbcb49fcc3970ce813c0ed Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:17:01 +0200 Subject: [PATCH 04/53] docs(popup): add position and collision: --- components/popup/overview.md | 6 +- components/popup/position-collision.md | 175 +++++++++++++++++++++++++ 2 files changed, 178 insertions(+), 3 deletions(-) create mode 100644 components/popup/position-collision.md diff --git a/components/popup/overview.md b/components/popup/overview.md index a441ce360e..c7358e4e21 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -58,15 +58,15 @@ The Blazor Popup provides parameters to configure the component. Also check the | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Define how the popup aligns with the anchor element on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| +| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Define how the anchor aligns with the Popup component on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| | `AnchorSelector` | `string` | The CSS selector that targets the element that the popup uses as an anchor. | -| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the popup aligns with the anchor element on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | +| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the popup will touch it's anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `HorizontalCollision` | `PopupCollision ` enum
(`Fit`) | Sets the behavior of the popup when it does fit in the viewport based on the horizontal plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | -| `VerticalAlign` | `PopupVerticalAlign ` enum
(`Left`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | +| `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `VerticalOffset` | `double` | Sets vertical space between the popup and it's anchor in `pixels`. | diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md new file mode 100644 index 0000000000..b3eef36b91 --- /dev/null +++ b/components/popup/position-collision.md @@ -0,0 +1,175 @@ +--- +title: Position and Collision +page_title: Popup Position and Collision +description: Animation settings of the Popup for Blazor. +slug: popup-position-collision +tags: telerik,blazor,popup,position,collision +published: True +position: 10 +--- + +# Placement Settings + +This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds in situations where there is insufficient screen space. + +## Position + +You can customize how the popup and it's anchor align with each other. You can use the available parameters to control the position of the component. + +### Anchor Alignment + +Use the available parameters to control which part of the popup touches the anchor. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Enum Members | +| ----------- | ----------- | ----------- | +| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` | `Center`
`Left` (default value)
`Right` | +| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` | `Bottom` (default value)
`Center`
`Top` | + +See the [example](#example) below to customize the available parameters and see how they affect the Popup component. + +### Popup Alignment + +Use the available parameters to control which part of the anchor touches the popup. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Enum Members | +| ----------- | ----------- | ----------- | +| `HorizontalAlign` | `PopupHorizontalAlign` | `Center`
`Left` (default value)
`Right` | +| `VerticalAlign` | `PopupVerticalAlign` | `Bottom`
`Center`
`Top` (default value) | + +## Collision + +There are two collision modes available for the Popup component: + +* `Fit` - The Popup will be shifted until it is fully visible on the screen. +* `Flip` - The Popup will render on the other side of the anchor. + +Use the available parameters to control how the Popup behaves to insufficient screen space. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Enum Members | +| ----------- | ----------- | ----------- | +| `HorizontalCollision` | `PopupCollision ` | `Fit` (default value)
`Flip` | +| `VerticalCollision` | `PopupCollision ` | `Fit`
`Flip` (default value) | + +See the [example](#example) below to customize the available parameters and see how they affect the Popup component. + +## Example + +The following example lets you experiment with the available settings that control the position and collision behavior in the Popup. It starts with the default component behavior. + +````CSHTML +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +Show Popup +Hide Popup + + +
+ Telerik Blazor Animation Container +
+
+ + + +@code { + private TelerikPopup PopupRef { get; set; } + + private PopupAnchorHorizontalAlign PopupAnchorHorizontalAlign { get; set; } = PopupAnchorHorizontalAlign.Left; + private PopupAnchorVerticalAlign PopupAnchorVerticalAlign { get; set; } = PopupAnchorVerticalAlign.Bottom; + private PopupHorizontalAlign PopupHorizontalAlign { get; set; } = PopupHorizontalAlign.Left; + private PopupVerticalAlign PopupVerticalAlign { get; set; } = PopupVerticalAlign.Top; + private int PopupHorizontalOffset { get; set; } + private int PopupVertivalOffset { get; set; } + private PopupCollision PopupHorizontalCollision { get; set; } = PopupCollision.Flip; + private PopupCollision PopupVerticalCollision { get; set; } = PopupCollision.Flip; + + private readonly List PopupAnchorHorizontalAligns = new List() { + PopupAnchorHorizontalAlign.Left, + PopupAnchorHorizontalAlign.Center, + PopupAnchorHorizontalAlign.Right + }; + + private readonly List PopupAnchorVerticalAligns = new List() { + PopupAnchorVerticalAlign.Bottom, + PopupAnchorVerticalAlign.Center, + PopupAnchorVerticalAlign.Top + }; + + private readonly List PopupHorizontalAligns = new List() { + PopupHorizontalAlign.Left, + PopupHorizontalAlign.Center, + PopupHorizontalAlign.Right + }; + + private readonly List PopupVerticalAligns = new List() { + PopupVerticalAlign.Bottom, + PopupVerticalAlign.Center, + PopupVerticalAlign.Top + }; + + private readonly List PopupCollisions = new List() { + PopupCollision.Fit, + PopupCollision.Flip + }; +} + + +```` \ No newline at end of file From 717a79271e5568c3b3fff19c570e3bae6d10ab20 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Tue, 23 Jan 2024 19:36:25 +0200 Subject: [PATCH 05/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index c8adde4915..52a9f1b3f9 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -33,7 +33,7 @@ You can change the way the Popup component flows in and out of the screen by set See the [example](#example) below to customize the available parameters and see how they reflect the Popup component. -## AnimationDuration +## Duration Set the `AnimationDuration` parameter in milliseconds as `int` to control how long the animation will take until the component is fully displayed. From 3c6e057b8e3962c89c7adff46a8243f7a28c45e2 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:15:03 +0200 Subject: [PATCH 06/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 52a9f1b3f9..144a3727de 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -12,7 +12,7 @@ position: 35 This article outlines the available settings that allow you to customize the animations when the Popup displays and hides. -## AnimationType +## Type You can change the way the Popup component flows in and out of the screen by setting the `AnimationType` parameter to a member of the `AnimationType` enum: From 1726f190810c6552a4830b1661444c03ee7071b7 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:16:13 +0200 Subject: [PATCH 07/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index c7358e4e21..3b0b438238 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -48,7 +48,7 @@ Use the available positioning and collision settings to customize how the Popup ## Popup Animations -Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popup animations...]({%slug popup-amination%}). +Use the available parameters to customize the animation type and its duration. [Read more about the Blazor Popup animations...]({%slug popup-animation%}). ## Popup Parameters From a05406f776a3505fbc8804e554244215fce2bd29 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:16:24 +0200 Subject: [PATCH 08/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 3b0b438238..9c7e0a1933 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -1,7 +1,7 @@ --- title: Overview page_title: Popup Overview -description: Discover the Telerik Popup component for Blazor. Learn how to add the component to your app and explore its features like positioning, alignment, and animation customization. +description: Discover the Blazor Popup. Learn how to add the component to your app and explore its features like positioning, alignment, and animation customization. slug: popup-overview tags: telerik,blazor,popup published: True From d80133ef451e51908664fe2c82c5aafa884c09a8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:16:32 +0200 Subject: [PATCH 09/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 9c7e0a1933..a0c0fc2cfc 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -15,7 +15,7 @@ The
Blazor P ## Creating Blazor Popup 1. Add the `` tag to a Razor file. -1. Obtain a `@ref` of the component +1. Obtain a `@ref` of the component. 1. Use the [Show](#popup-reference-and-methods) method to display the `` >caption Basic configuration of the Telerik Popup From c78f7956dcf99ee38b5a12e3fde92c74b1f7428b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:16:39 +0200 Subject: [PATCH 10/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index a0c0fc2cfc..025c1c134b 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -16,7 +16,7 @@ The Blazor P 1. Add the `` tag to a Razor file. 1. Obtain a `@ref` of the component. -1. Use the [Show](#popup-reference-and-methods) method to display the `` +1. Use the [Show](#popup-reference-and-methods) method to display the ``. >caption Basic configuration of the Telerik Popup From 3cda44568bdb273a400d3f7fc6efe83a14617e95 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:17:36 +0200 Subject: [PATCH 11/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 144a3727de..7b11156873 100644 --- a/components/popup/animation.md +++ b/components/popup/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 reflect the Popup component. +See the [example](#example) below to customize the available parameters and see how they affect the Popup component. ## Example From 1518e204505a57e6661145707f01fe772826a870 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:18:13 +0200 Subject: [PATCH 12/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 025c1c134b..ef50889a40 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -18,7 +18,7 @@ The Blazor P 1. Obtain a `@ref` of the component. 1. Use the [Show](#popup-reference-and-methods) method to display the ``. ->caption Basic configuration of the Telerik Popup +>caption Basic configuration of the Telerik Popup for Blazor ````CSHTML From feb60348e491aa565939620bc63ebf6898ec40f5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:19:21 +0200 Subject: [PATCH 13/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index ef50889a40..c7344dea6f 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -44,7 +44,7 @@ The Blazor P ## Popup Positioning and Collision -Use the available positioning and collision settings to customize how the Popup positions and reacts to unsufficient space in the viewport. [Read more about the Blazor Popup Positioning and Collision...]({%slug popup-position-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...]({%slug popup-position-collision%}) ## Popup Animations From ade94b7e9538b2e02e00b4a135cb4f540a687ed2 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:20:56 +0200 Subject: [PATCH 14/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index c7344dea6f..c6f0d1a1e2 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -58,7 +58,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Define how the anchor aligns with the Popup component on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| +| `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Defines how the anchor aligns with the Popup component on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| | `AnchorSelector` | `string` | The CSS selector that targets the element that the popup uses as an anchor. | | `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | From c2acab7e274ab36c1f029009bb95f3ecbbfd87a8 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:21:18 +0200 Subject: [PATCH 15/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index c6f0d1a1e2..4c2bdafd03 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -59,7 +59,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | 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.]({%slug popup-position-collision%})| -| `AnchorSelector` | `string` | The CSS selector that targets the element that the popup uses as an anchor. | +| `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popup uses as an anchor. | | `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | From b0c8afdbf6348bf13265636c96ad6cec20e2b2d6 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:23:07 +0200 Subject: [PATCH 16/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 4c2bdafd03..8f711e8942 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -60,7 +60,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | ----------- | ----------- | ----------- | | `AnchorHorizontalAlign` | `PopupAnchorHorizontalAlign` enum
(`Left`) | Defines how the anchor aligns with the Popup component on the horizontal plane. [Read more about Popup Positioning.]({%slug popup-position-collision%})| | `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popup uses as an anchor. | -| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Define how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | +| `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Defines how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the popup will touch it's anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | From 06d9bde65af41c711873f03eb55e3be1ae1bba7b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:46:29 +0200 Subject: [PATCH 17/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 8f711e8942..6dc91600c9 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -63,7 +63,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `AnchorVerticalAlign` | `PopupAnchorVerticalAlign` enum
(`Bottom`) | Defines how the anchor aligns with the Popup on the vertical plane. [Read more about Popup Positioning.]({%slug popup-position-collision%}). | | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | -| `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the popup will touch it's anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | +| `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `HorizontalCollision` | `PopupCollision ` enum
(`Fit`) | Sets the behavior of the popup when it does fit in the viewport based on the horizontal plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | | `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | From 2f2bb256901ffd9011c4ae35a23669bafd326180 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:48:12 +0200 Subject: [PATCH 18/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 6dc91600c9..72b9dfac3b 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -64,7 +64,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | -| `HorizontalCollision` | `PopupCollision ` enum
(`Fit`) | Sets the behavior of the popup when it does fit in the viewport based on the horizontal plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | +| `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.]({%slug popup-position-collision%}) | | `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | | `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | From fc7f55b99cce19bc97460b17ad5c77c2ae77b0a5 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:52:47 +0200 Subject: [PATCH 19/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 72b9dfac3b..70d6aa3842 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -68,7 +68,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | | `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | -| `VerticalOffset` | `double` | Sets vertical space between the popup and it's anchor in `pixels`. | +| `VerticalOffset` | `double` | Sets the vertical space between the Popup and its anchor in `pixels`. | ### Styling and Appearance From 9e7a299025126e792b46ce1353944c19c3fbbd9d Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Wed, 24 Jan 2024 08:53:45 +0200 Subject: [PATCH 20/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 70d6aa3842..f6b68e2378 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -72,7 +72,7 @@ The Blazor Popup provides parameters to configure the component. Also check the ### Styling and Appearance -The following parameters enable you to customize the appearance of the Blazor AppBar: +The following parameters enable you to customize the appearance of the Blazor Popup: | Parameter | Type | Description | | --- | --- | --- | From 1d6da3ca6750ef4a2e8c42081794d02dba367176 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:11:54 +0200 Subject: [PATCH 21/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index f6b68e2378..258e30957f 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -65,7 +65,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `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.]({%slug popup-position-collision%}) | -| `HorizontalOffset` | `double` | Sets horizontal space between the popup and it's anchor in `pixels`. | +| `HorizontalOffset` | `double` | Sets the horizontal space between the Popup and its anchor in `pixels`. | | `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `VerticalOffset` | `double` | Sets the vertical space between the Popup and its anchor in `pixels`. | From 347edca3633c261329e9314f0a3ab11a3b324e6f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:12:02 +0200 Subject: [PATCH 22/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 258e30957f..85b0cd4ef9 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -66,7 +66,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `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.]({%slug popup-position-collision%}) | | `HorizontalOffset` | `double` | Sets the horizontal space between the Popup and its anchor in `pixels`. | -| `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the popup will touch the anchor with it's top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | +| `VerticalAlign` | `PopupVerticalAlign ` enum
(`Top`) | Determines if the Popup will touch the anchor with its top, bottom, or center. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `VerticalOffset` | `double` | Sets the vertical space between the Popup and its anchor in `pixels`. | From 250abf1b9b455792df41d72ef6c97cc73201338f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:07 +0200 Subject: [PATCH 23/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 85b0cd4ef9..8b8a733703 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -67,7 +67,7 @@ The Blazor Popup provides parameters to configure the component. Also check the | `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.]({%slug popup-position-collision%}) | | `HorizontalOffset` | `double` | Sets 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.]({%slug popup-position-collision%}) | -| `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the popup when it does fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | +| `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the Popup when it doesn't fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | | `VerticalOffset` | `double` | Sets the vertical space between the Popup and its anchor in `pixels`. | ### Styling and Appearance From bda25ce3860068538b793db4aedd21ec9eda6020 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:14 +0200 Subject: [PATCH 24/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 8b8a733703..cf556ed924 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -82,7 +82,7 @@ The following parameters enable you to customize the appearance of the Blazor Po ## Popup Reference and Methods -To execute Popup methods, obtain reference to the component instance with `@ref`. +To execute Popup methods, obtain a reference to the component instance with `@ref`. | Method | Description | |---------|-------------| From 9de8c793f358303630b1e1bc51bb9ec3c8f2ea29 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:21 +0200 Subject: [PATCH 25/53] Update components/popup/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index cf556ed924..feb6b35e29 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -121,7 +121,7 @@ To execute Popup methods, obtain a reference to the component instance with `@re ## Next Steps -* [Explore the Popup Positioning and Collision settings]({%slug popup-position-collision%}) +* [Explore the Popup Positioning and Collision Settings]({%slug popup-position-collision%}) * [Customize the Popup Animations]({%slug popup-animation%}) ## See Also From 839d9fde5e77ab9cc28ff513bab52fba7edf9b90 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:30 +0200 Subject: [PATCH 26/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index b3eef36b91..948367a214 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -1,7 +1,7 @@ --- title: Position and Collision page_title: Popup Position and Collision -description: Animation settings of the Popup for Blazor. +description: Discover the placement settings of the Popup for Blazor. Learn how to configure the Popup position and handle collisions. slug: popup-position-collision tags: telerik,blazor,popup,position,collision published: True From b8fbff132440b01837d025c4c6b683b2fbd5d5a2 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:37 +0200 Subject: [PATCH 27/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 7b11156873..901e86cab9 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -8,7 +8,7 @@ published: True position: 35 --- -# Animation Settings +# Popup Animation Settings This article outlines the available settings that allow you to customize the animations when the Popup displays and hides. From 65267841757809b694516b850ea788c36b6da1ed Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:48 +0200 Subject: [PATCH 28/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 901e86cab9..a2ee72d3b8 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -31,7 +31,7 @@ You can change the way the Popup component flows in and out of the screen by set * `ZoomIn` * `ZoomOut` -See the [example](#example) below to customize the available parameters and see how they reflect the Popup component. +See the [example](#example) below to customize the available parameters and see how they affect the Popup component. ## Duration From 086d72a4fac5ac990127977266208dba15c6278d Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:13:57 +0200 Subject: [PATCH 29/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index a2ee72d3b8..75218bdcda 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -1,7 +1,7 @@ --- title: Animation page_title: Popup Animation -description: Animation settings of the Popup for Blazor. +description: Explore the animation settings of the Popup for Blazor. Discover how to adjust the way the Popup appears and disappears on the screen. slug: popup-animation tags: telerik,blazor,popup,animation published: True From 5b40465be681ee16e6408b6dbb040817c4dfb07c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:14:07 +0200 Subject: [PATCH 30/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 948367a214..6e5795296d 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -8,7 +8,7 @@ published: True position: 10 --- -# Placement Settings +# Popup Position and Collision Settings This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds in situations where there is insufficient screen space. From ebc264eeb0daa87faff0e593b9530149539c9e1f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:14:20 +0200 Subject: [PATCH 31/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 6e5795296d..195b4966f2 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -10,7 +10,7 @@ position: 10 # Popup Position and Collision Settings -This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds in situations where there is insufficient screen space. +This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space. ## Position From 9d99386963bdf9cb76541734464dae7273612daa Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:14:32 +0200 Subject: [PATCH 32/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 195b4966f2..7ee524cabf 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -14,7 +14,7 @@ This article outlines the available settings which enable you to control the pos ## Position -You can customize how the popup and it's anchor align with each other. You can use the available parameters to control the position of the component. +You can customize how the popup and its anchor align with each other. You can use the available parameters to control the position of the component. ### Anchor Alignment From aa53dc5a3f1dee724f54abdf7947090b7fedebe3 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:14:42 +0200 Subject: [PATCH 33/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 7ee524cabf..11a962ffaa 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -18,7 +18,7 @@ You can customize how the popup and its anchor align with each other. You can us ### Anchor Alignment -Use the available parameters to control which part of the popup touches the anchor. +Use the available parameters to control which part of the Popup touches the anchor. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From f312132f2bd1c83e92a7318c4a4f3bdf1e644f54 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:15:34 +0200 Subject: [PATCH 34/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 11a962ffaa..4ce5b1dbf9 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -31,7 +31,7 @@ See the [example](#example) below to customize the available parameters and see ### Popup Alignment -Use the available parameters to control which part of the anchor touches the popup. +Use the available parameters to control which side of the Popup is in contact with the anchor. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From dccf57ad7c4f3cb83d908e608e41c3afb72cca18 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:15:43 +0200 Subject: [PATCH 35/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 4ce5b1dbf9..8e96c0a284 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -44,7 +44,7 @@ Use the available parameters to control which side of the Popup is in contact wi There are two collision modes available for the Popup component: -* `Fit` - The Popup will be shifted until it is fully visible on the screen. +* `Fit`—The Popup will be shifted until it is fully visible on the screen. * `Flip` - The Popup will render on the other side of the anchor. Use the available parameters to control how the Popup behaves to insufficient screen space. From 4f7bad7961eb05d143bbf809441d216ccef62d23 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:15:56 +0200 Subject: [PATCH 36/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 8e96c0a284..7407232bfd 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -45,7 +45,7 @@ Use the available parameters to control which side of the Popup is in contact wi There are two collision modes available for the Popup component: * `Fit`—The Popup will be shifted until it is fully visible on the screen. -* `Flip` - The Popup will render on the other side of the anchor. +* `Flip`—The Popup will render on the other side of the anchor. Use the available parameters to control how the Popup behaves to insufficient screen space. From 8558c666cf5935f1decfa554f6b533089ae5e91c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:16:04 +0200 Subject: [PATCH 37/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 7407232bfd..45cab9299b 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -47,7 +47,7 @@ There are two collision modes available for the Popup component: * `Fit`—The Popup will be shifted until it is fully visible on the screen. * `Flip`—The Popup will render on the other side of the anchor. -Use the available parameters to control how the Popup behaves to insufficient screen space. +Use the available parameters to control how the Popup reacts to insufficient screen space. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From 35d922e21a51047c5e8009e74e808a0016b250a4 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Thu, 25 Jan 2024 11:17:21 +0200 Subject: [PATCH 38/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 45cab9299b..fcd3ad5bd4 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -60,7 +60,7 @@ See the [example](#example) below to customize the available parameters and see ## Example -The following example lets you experiment with the available settings that control the position and collision behavior in the Popup. It starts with the default component behavior. +The following example lets you experiment with the available settings that control the position and collision behavior of the Popup. It starts with the default component behavior. ````CSHTML
From fd0840c48913d26a08f7693e20f7e05fd9bf74ac Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:29:41 +0200 Subject: [PATCH 39/53] Update components/popup/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index feb6b35e29..1d3778cddb 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -10,7 +10,7 @@ position: 0 # Blazor Popup Overview -The Blazor Popup component helps you to easily add popups to an element in your application. You can use to Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features. +The Blazor Popup component helps you easily display a popup for a target element (anchor) in your application. You can use to Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features. ## Creating Blazor Popup From bf225b595e29ebb4b0e642fb1c602e9eeea0b020 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:29:46 +0200 Subject: [PATCH 40/53] Update components/popup/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 1d3778cddb..e9e5cf9644 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -15,7 +15,7 @@ The Blazor P ## Creating Blazor Popup 1. Add the `` tag to a Razor file. -1. Obtain a `@ref` of the component. +1. Obtain the component reference through `@ref`. 1. Use the [Show](#popup-reference-and-methods) method to display the ``. >caption Basic configuration of the Telerik Popup for Blazor From 500c5280d3f38eb3d85ceecc3fadd5c39b95c9de Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:29:54 +0200 Subject: [PATCH 41/53] Update components/popup/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index e9e5cf9644..65e8dc8f57 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -52,7 +52,7 @@ Use the available parameters to customize the animation type and its duration. [ ## Popup Parameters -The Blazor Popup provides parameters to configure the component. Also check the [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) for a full list of properties. +The Blazor Popup provides parameters to configure the component. Also check the [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) for a full list of properties, methods and events. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From a6d81db194ecb5bbb6790cd92a305f2312e62095 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:30:20 +0200 Subject: [PATCH 42/53] Update components/popup/position-collision.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index fcd3ad5bd4..a6dc3f98e5 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -18,7 +18,7 @@ You can customize how the popup and its anchor align with each other. You can us ### Anchor Alignment -Use the available parameters to control which part of the Popup touches the anchor. +Use the available parameters to control which part of the anchor touches the Popup. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) From a095fb5d723f8d81756ff2fe1567d9ab3d7afc71 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:30:24 +0200 Subject: [PATCH 43/53] Update components/popup/position-collision.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index a6dc3f98e5..2da58d2c37 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -44,7 +44,7 @@ Use the available parameters to control which side of the Popup is in contact wi There are two collision modes available for the Popup component: -* `Fit`—The Popup will be shifted until it is fully visible on the screen. +* `Fit`—The Popup will shift until it is fully visible on the screen. * `Flip`—The Popup will render on the other side of the anchor. Use the available parameters to control how the Popup reacts to insufficient screen space. From 92f2e6886defb13eb5da0094c61deecae456ce73 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:30:29 +0200 Subject: [PATCH 44/53] Update components/popup/animation.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 75218bdcda..b8aea9f2a8 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -14,7 +14,7 @@ This article outlines the available settings that allow you to customize the ani ## Type -You can change the way the Popup component flows in and out of the screen by setting the `AnimationType` parameter to a member of the `AnimationType` enum: +You can change the way the Popup component shows and hides by setting the `AnimationType` parameter to a member of the `AnimationType` enum: * `None` * `Fade` From a584cd74060cfe5d857dcb3815017b975d3323fe Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:30:35 +0200 Subject: [PATCH 45/53] Update components/popup/animation.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index b8aea9f2a8..584bed57b5 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -8,7 +8,7 @@ published: True position: 35 --- -# Popup Animation Settings +# Popup Animation This article outlines the available settings that allow you to customize the animations when the Popup displays and hides. From a95e3a5a955a47ca4c8358dc0dbedc222aa49306 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:41:39 +0200 Subject: [PATCH 46/53] Update components/popup/position-collision.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 2da58d2c37..c48dc80731 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -8,7 +8,7 @@ published: True position: 10 --- -# Popup Position and Collision Settings +# Popup Position and Collision This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space. From 9e362d12ff4e7647b5f813c556ea996baf9eb20b Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:46:06 +0200 Subject: [PATCH 47/53] chore(popup): remove standard html elements and use our components and enhance the refresh description --- components/popup/overview.md | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 65e8dc8f57..81ef4d8ce5 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -25,21 +25,11 @@ The Blazor P I am a Telerik Popup. - +Show the Popup @code { private TelerikPopup PopupRef { get; set; } } - - ```` ## Popup Positioning and Collision @@ -86,21 +76,17 @@ 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. | +| `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. | ````CSHTML -Show the Popup +Show the Popup I am a Telerik Popup! - - @code { private TelerikPopup PopupRef { get; set; } @@ -109,14 +95,6 @@ To execute Popup methods, obtain a reference to the component instance with `@re PopupRef.Show(); } } - - ```` ## Next Steps From 7116cd9c8a70c173890eb0a0a7f666f7b3fc566c Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Fri, 26 Jan 2024 15:48:13 +0200 Subject: [PATCH 48/53] chore(popup): add the popup in config file --- _config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_config.yml b/_config.yml index f992aa6ecc..7494e17405 100644 --- a/_config.yml +++ b/_config.yml @@ -268,6 +268,8 @@ navigation: title: "Arc" "*appbar": title: "AppBar" + "*popup": + title: "Popup" "*autocomplete": title: "AutoComplete" "*avatar": @@ -627,6 +629,7 @@ intro_columns: "Progress Bar": "progressbar-overview" "Chunk Progress Bar": "chunkprogressbar-overview" "Tooltip": "tooltip-overview" + "Popup": "popup-overview" - title: "Documents" items: From 9e8f8ac92eef5f270e5947208998f5104451ba36 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 15:51:18 +0200 Subject: [PATCH 49/53] polishing --- components/popup/animation.md | 2 +- components/popup/overview.md | 12 ++++++------ components/popup/position-collision.md | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index 584bed57b5..5906ba22c3 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -115,4 +115,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/popup/overview.md b/components/popup/overview.md index 81ef4d8ce5..978900c99a 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -49,16 +49,16 @@ The Blazor Popup provides parameters to configure the component. Also check the | 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.]({%slug popup-position-collision%})| -| `AnchorSelector` | `string` | Specifies the CSS selector targeting the element that the Popup uses as an anchor. | +| `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.]({%slug popup-position-collision%}). | -| `AnimationDuration` | `int` | Defines the duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | -| `AnimationType` | `AnimationType` enum
(`SlideDown`) | Sets the type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | +| `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popup animations.]({%slug popup-animation%}) | +| `AnimationType` | `AnimationType` enum
(`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popup animations.]({%slug popup-animation%}) | | `HorizontalAlign` | `PopupHorizontalAlign ` enum
(`Left`) | Determines if the left or the right side of the Popup will touch its anchor. [Read more about Popup Positioning.]({%slug popup-position-collision%}) | | `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.]({%slug popup-position-collision%}) | -| `HorizontalOffset` | `double` | Sets the horizontal space between the Popup and its anchor in `pixels`. | +| `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.]({%slug popup-position-collision%}) | -| `VerticalCollision` | `PopupCollision ` enum
(`Flip`) | Sets the behavior of the Popup when it doesn't fit in the viewport based on the vertical plane. [Read more about Popup collision behavior.]({%slug popup-position-collision%}) | -| `VerticalOffset` | `double` | Sets the vertical space between the Popup and its anchor in `pixels`. | +| `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.]({%slug popup-position-collision%}) | +| `VerticalOffset` | `double` | The vertical space between the Popup and its anchor in `pixels`. | ### Styling and Appearance diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index c48dc80731..a4649e00e5 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -172,4 +172,4 @@ The following example lets you experiment with the available settings that contr margin-top: 20px; } -```` \ No newline at end of file +```` From ee245a1d57a93eea1500d7ef3dae35333a85863e Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:02:33 +0200 Subject: [PATCH 50/53] add See Also sections --- components/popup/animation.md | 5 +++++ components/popup/position-collision.md | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/components/popup/animation.md b/components/popup/animation.md index 5906ba22c3..dac5394b56 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -116,3 +116,8 @@ The following example lets you experiment with the available settings that contr } ```` + +## See Also + +* [Live Popup Demos](https://demos.telerik.com/blazor-ui/popup/overview) +* [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index a4649e00e5..9394abf15d 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -173,3 +173,8 @@ The following example lets you experiment with the available settings that contr } ```` + +## See Also + +* [Live Popup Demos](https://demos.telerik.com/blazor-ui/popup/overview) +* [Popup API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPopup) From bfac74e609f2eca8a3083f4131398b474b28ddb9 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:04:35 +0200 Subject: [PATCH 51/53] Update components/popup/position-collision.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/position-collision.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/position-collision.md b/components/popup/position-collision.md index 9394abf15d..6c9feebc24 100644 --- a/components/popup/position-collision.md +++ b/components/popup/position-collision.md @@ -10,7 +10,7 @@ position: 10 # Popup Position and Collision -This article outlines the available settings which enable you to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space. +This article outlines how to control the position of the Popup based on its anchor and dictate how the component responds to insufficient screen space. ## Position From c4a0b7e3dbc18d229bd3a925ff9803725647c423 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:05:00 +0200 Subject: [PATCH 52/53] Update components/popup/animation.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/popup/animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/animation.md b/components/popup/animation.md index dac5394b56..006de0b1cc 100644 --- a/components/popup/animation.md +++ b/components/popup/animation.md @@ -10,7 +10,7 @@ position: 35 # Popup Animation -This article outlines the available settings that allow you to customize the animations when the Popup displays and hides. +This article outlines how to customize the animations when the Popup displays and hides. ## Type From d316d8d048eaef2f0285930e985881ac3adc2003 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 29 Jan 2024 18:06:26 +0200 Subject: [PATCH 53/53] typo --- components/popup/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popup/overview.md b/components/popup/overview.md index 978900c99a..217f9d8394 100644 --- a/components/popup/overview.md +++ b/components/popup/overview.md @@ -10,7 +10,7 @@ position: 0 # Blazor Popup Overview -The
Blazor Popup component helps you easily display a popup for a target element (anchor) in your application. You can use to Telerik UI for Blazor Popup to display additional information. This article explains how to start using the component and describes its features. +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. ## Creating Blazor Popup