Skip to content

Document adaptive breakpoints customization #2682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 8, 2025
Merged

Document adaptive breakpoints customization #2682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4b3ae1f
docs(common): add section for customizing the adaptive breakpoints
ntacheva Jan 6, 2025
f209021
chore(common): add child content note
ntacheva Jan 6, 2025
483acbf
chore(common): add link
ntacheva Jan 7, 2025
d75de29
chore(common):final updates
ntacheva Jan 7, 2025
96f3efa
chore(common): address feedback
ntacheva Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions common-features/adaptive-rendering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -65,6 +66,40 @@ 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 [above-listed default adaptive breakpoints](#rendering-specifics) at the root level by configuring the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}). To specify your desired breakpoints:

1. Wrap the content of the `<TelerikRootComponent>` (`@Body` and potentially other elements) in `<ChildContent>` tag.
Copy link
Contributor

@ikoevska ikoevska Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. Wrap the content of the `<TelerikRootComponent>` (`@Body` and potentially other elements) in `<ChildContent>` tag.
1. Wrap the content of the `<TelerikRootComponent>` (`@Body` and potentially other elements) in a `<ChildContent>` tag.

1. Add the `<RootComponentSettings>` component inside the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}).
1. Add the `<RootComponentAdaptiveSettings>` component inside the `<RootComponentSettings>` tag and configure its properties:

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

| Parameter | Type | Description |
| ----------- | ----------- | ----------- |
| `Small` | `int` <br/> (`500`) | The upper boundary of the small threshold. Sets the `max-width` of the small media query in `px`. |
| `Medium` | `int` <br/> (`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

<div class="skip-repl"></div>
````RAZOR
@* The below configuration sets the following thresholds:
- Small: 0 to 400px
- Medium: 401px to 900px
- Large: over 900px *@

<TelerikRootComponent>
<RootComponentSettings>
<RootComponentAdaptiveSettings Small="400" Medium="900"></RootComponentAdaptiveSettings>
</RootComponentSettings>
<ChildContent>
@Body
</ChildContent>
</TelerikRootComponent>
````

## 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).
Expand Down
3 changes: 3 additions & 0 deletions components/rootcomponent/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ If you are using Telerik components in a Blazor app with **Per page/component**
| `IconType` | `IconType` enum <br /> (`Svg`) | The icon type, which other Telerik components will use to render internal icons. Regardless of this parameter value, you can freely use the [`<TelerikFontIcon>`]({%slug common-features-icons%}#fonticon-component) and [`<TelerikSvgIcon>`]({%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
Copy link
Contributor

@ikoevska ikoevska Sep 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Single nested sub-sections are not a good practice in terms of logical flow, SEO and structure. In addition, they don't render that great in the sidebar navigation. I recommend using a caption or another body text element instead.

image


The `TelerikRootComponent` exposes and additional `<RootComponentSettings>` 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

Expand Down
Loading