From 4b3ae1f4c5aa00ab154f6e67f2c9d957ab6090f9 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 6 Jan 2025 18:55:50 +0200 Subject: [PATCH 1/5] docs(common): add section for customizing the adaptive breakpoints --- common-features/adaptive-rendering.md | 29 +++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index cd5907d4e4..e8ade07d77 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -17,6 +17,7 @@ Telerik UI for Blazor supports adaptive rendering for the components that incorp * [Supported components](#supported-components) * [Basics](#basics) * [Rendering specifics](#rendering-specifics) +* [Customize the Default Adaptive Breakpoints](#customize-the-default-adaptive-breakpoints) * [Limitations](#limitations) ## Supported Components @@ -65,6 +66,34 @@ Three breakpoints define the rendering options as follows: **Dimensions** | up to 500px | 501px to 768px | over 768px | **Rendering** | The popup is rendered as a fullscreen action sheet. | The popup is rendered as an action sheet docked to the bottom of the screen. | The popup is rendered as an animation container docked to the main element of the component. | +## Customize the Default Adaptive Breakpoints + +You can customize the default adaptive breakpoints at the root level by configuring the [``]({%slug rootcomponent-overview%}). To specify your desired breakpoints: + +1. Add the `` component inside the [``]({%slug rootcomponent-overview%}). +1. Add the `` component inside the `` tag and configure its properties: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | ----------- | +| `Small` | `int` | The min threshold and the lower boundary of the medium threshold | +| `Medium` | `int` | The max threshold and the upper boundary of the medium threshold. | + +>caption Customize the default adaptive breakpoints + +
+````RAZOR + + + + + + @Body + + +```` + ## Limitations Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox]({%slug components/combobox/custom-value%}) and [MultiColumnComboBox]({%slug multicolumncombobox-custom-value%}). Using custom values with `AdaptiveMode.Auto` is currently not supported. To expedite the development of this feature, vote for the related feature request in the Blazor Feedback Portal: [Support for custom values in `AdaptiveMode`](https://feedback.telerik.com/blazor/1611829-support-for-custom-values-in-adaptivemode). From f209021b4fecb868f042c63723176053b53ddb37 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 6 Jan 2025 19:08:38 +0200 Subject: [PATCH 2/5] chore(common): add child content note --- common-features/adaptive-rendering.md | 1 + 1 file changed, 1 insertion(+) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index e8ade07d77..093d2ee6fa 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -70,6 +70,7 @@ Three breakpoints define the rendering options as follows: You can customize the default adaptive breakpoints at the root level by configuring the [``]({%slug rootcomponent-overview%}). To specify your desired breakpoints: +1. Wrap the content of the `` (`@Body` and potentially other elements) in `` tag. 1. Add the `` component inside the [``]({%slug rootcomponent-overview%}). 1. Add the `` component inside the `` tag and configure its properties: From 483acbf54a75ea26bcfe95cae1a5a32fd6b34698 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 7 Jan 2025 13:13:55 +0200 Subject: [PATCH 3/5] chore(common): add link --- common-features/adaptive-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 093d2ee6fa..cfedf6e8a2 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -68,7 +68,7 @@ Three breakpoints define the rendering options as follows: ## Customize the Default Adaptive Breakpoints -You can customize the default adaptive breakpoints at the root level by configuring the [``]({%slug rootcomponent-overview%}). To specify your desired breakpoints: +You can customize the [above-listed default adaptive breakpoints](#rendering-specifics) at the root level by configuring the [``]({%slug rootcomponent-overview%}). To specify your desired breakpoints: 1. Wrap the content of the `` (`@Body` and potentially other elements) in `` tag. 1. Add the `` component inside the [``]({%slug rootcomponent-overview%}). From d75de2970b807f037a758887f5e4a1d79ae1c59f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 7 Jan 2025 17:56:04 +0200 Subject: [PATCH 4/5] chore(common):final updates --- common-features/adaptive-rendering.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index cfedf6e8a2..5689cfe752 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -72,22 +72,27 @@ You can customize the [above-listed default adaptive breakpoints](#rendering-spe 1. Wrap the content of the `` (`@Body` and potentially other elements) in `` tag. 1. Add the `` component inside the [``]({%slug rootcomponent-overview%}). -1. Add the `` component inside the `` tag and configure its properties: +1. Add the `` component inside the `` tag and configure its properties: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `Small` | `int` | The min threshold and the lower boundary of the medium threshold | -| `Medium` | `int` | The max threshold and the upper boundary of the medium threshold. | +| `Small` | `int` | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. | +| `Medium` | `int` | The upper boundary of the medium threshold. Sets the `max-width` of the medium media query in `px`.| >caption Customize the default adaptive breakpoints
````RAZOR +@* The below configuration sets the following thresholds: +- Small: 0 to 400px +- Medium: 401px to 900px +- Large: over 900px *@ + - + @Body From 96f3efa58c93893556c126491e08751b35628007 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 8 Jan 2025 17:13:24 +0200 Subject: [PATCH 5/5] chore(common): address feedback --- common-features/adaptive-rendering.md | 4 ++-- components/rootcomponent/overview.md | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 5689cfe752..18810c19de 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -78,8 +78,8 @@ You can customize the [above-listed default adaptive breakpoints](#rendering-spe | Parameter | Type | Description | | ----------- | ----------- | ----------- | -| `Small` | `int` | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. | -| `Medium` | `int` | The upper boundary of the medium threshold. Sets the `max-width` of the medium media query in `px`.| +| `Small` | `int`
(`500`) | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. | +| `Medium` | `int`
(`768`) | The upper boundary of the medium threshold. Sets the `max-width` of the medium media query in `px`.| >caption Customize the default adaptive breakpoints diff --git a/components/rootcomponent/overview.md b/components/rootcomponent/overview.md index c5e3ded68f..b261d3b14c 100644 --- a/components/rootcomponent/overview.md +++ b/components/rootcomponent/overview.md @@ -77,6 +77,9 @@ If you are using Telerik components in a Blazor app with **Per page/component** | `IconType` | `IconType` enum
(`Svg`) | The icon type, which other Telerik components will use to render internal icons. Regardless of this parameter value, you can freely use the [``]({%slug common-features-icons%}#fonticon-component) and [``]({%slug common-features-icons%}#svgicon-component) components, and [set the `Icon` parameter of other Telerik components]({%slug button-icons%}) to any type that you wish. | | `Localizer` | `Telerik.Blazor.Services.ITelerikStringLocalizer` | The Telerik localization service. The recommended approach is to [define the localizer as a service in `Program.cs`]({%slug globalization-localization%}). Use the `Localizer` parameter only in special cases when this is not possible. | +### TelerikRootComponent Settings + +The `TelerikRootComponent` exposes and additional `` tag for further customizations. You can use it to configure the screen breakpoints for the adaptive rendering of the supported components. [Learn how to customize the default adaptive breakpoints](slug://adaptive-rendering#customize-the-default-adaptive-breakpoints). ## See Also