Skip to content

Commit fd06055

Browse files
svdimitrsvdimitr
committed
docs(media): overview improvements
1 parent 65de835 commit fd06055

File tree

1 file changed

+6
-125
lines changed

1 file changed

+6
-125
lines changed

‎components/mediaquery/overview.md‎

Lines changed: 6 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -69,128 +69,6 @@ you can integrate the TelerikMediaQuery with our components. [See the Integratio
6969
| Parameter | Type and Default value | Description |
7070
|-----------|------------------------|-------------|
7171
| `Media` | `string` | the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query string</a> that will be matched. |
72-
| `OnChange` | `EventCallback<bool>` | This event indicates whether the media query string provided to the `Media` parameter matches the current browser size. It fires when it matches, and when it stops matching. See the [Events]({%slug mediaquery-events%}) article for more information. |
73-
74-
75-
## Reuse Multiple Breakpoints
76-
77-
The example below shows a few common CSS breakpoints and how you can easily extract them to a static class so you can reuse them throughout the entire application.
78-
79-
You can find more examples of common breakpoints from established design systems in the following links:
80-
* <a href="https://material.io/archive/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints" target="_blank">Material Design Breakpoints</a>
81-
* <a href="https://getbootstrap.com/docs/5.0/layout/breakpoints/#available-breakpoints" target="_blank">Bootstrap 5 Breakpoints</a>
82-
83-
>caption Use a few common breakpoints to update the rendering
84-
85-
````CSHTML
86-
@isExtraSmall <br />
87-
@isSmall <br />
88-
@isMedium <br />
89-
@isLarge <br />
90-
@isExtraLarge
91-
92-
@code{
93-
// you can move this static class to a common place in your app to reuse across the board
94-
// this is a sample list of a few common media queries
95-
public static class WindowBreakPoints
96-
{
97-
public static string ExtraSmall => "(max-width: 480px)";
98-
public static string Small => "(min-width: 481px) and (max-width: 720px)";
99-
public static string Medium => "(min-width: 721px) and (max-width: 1023px)";
100-
public static string Large => "(min-width: 1024px) and (max-width: 1199px)";
101-
public static string ExtraLarge => "(min-width: 1200px)";
102-
}
103-
104-
bool isExtraSmall { get; set; }
105-
bool isSmall { get; set; }
106-
bool isMedium { get; set; }
107-
bool isLarge { get; set; }
108-
bool isExtraLarge { get; set; }
109-
}
110-
111-
<TelerikMediaQuery Media="@WindowBreakPoints.ExtraSmall" OnChange="@( (matches) => isExtraSmall = matches )"></TelerikMediaQuery>
112-
<TelerikMediaQuery Media="@WindowBreakPoints.Small" OnChange="@( (matches) => isSmall = matches )"></TelerikMediaQuery>
113-
<TelerikMediaQuery Media="@WindowBreakPoints.Medium" OnChange="@( (matches) => isMedium = matches )"></TelerikMediaQuery>
114-
<TelerikMediaQuery Media="@WindowBreakPoints.Large" OnChange="@( (matches) => isLarge = matches )"></TelerikMediaQuery>
115-
<TelerikMediaQuery Media="@WindowBreakPoints.ExtraLarge" OnChange="@( (matches) => isExtraLarge = matches )"></TelerikMediaQuery>
116-
````
117-
118-
## Change Rendering with Blazor Code
119-
120-
In this simplistic example, we just switch the background of an element, in a real case you would replace entire components or change their parameters.
121-
122-
>caption Use a few common media queries and breakpoints to execute sample logic in the C# side
123-
124-
````CSHTML
125-
@* sample of a few common breakpoints and how you can use them. Unlike the previous example, many of these can match at the same time *@
126-
127-
@code{
128-
// you can move this static class to a common place in your app to reuse across the board
129-
// this is a sample list of a few of the most common media queries this example uses to create some sample logic
130-
public static class WindowBreakPoints
131-
{
132-
public static string ExtraSmall => "(max-width: 480px)";
133-
public static string Small => "(max-width: 767px)";
134-
public static string Medium => "(max-width: 1023px)";
135-
public static string Large => "(max-width: 1199px)";
136-
public static string ExtraLarge => "(min-width: 1200px)";
137-
}
138-
}
139-
140-
<TelerikMediaQuery Media="@WindowBreakPoints.ExtraSmall" OnChange="@( (matches) => isExtraSmall = matches )"></TelerikMediaQuery>
141-
<TelerikMediaQuery Media="@WindowBreakPoints.Small" OnChange="@( (matches) => isSmall = matches )"></TelerikMediaQuery>
142-
<TelerikMediaQuery Media="@WindowBreakPoints.Medium" OnChange="@( (matches) => isMedium = matches )"></TelerikMediaQuery>
143-
<TelerikMediaQuery Media="@WindowBreakPoints.Large" OnChange="@( (matches) => isLarge = matches )"></TelerikMediaQuery>
144-
<TelerikMediaQuery Media="@WindowBreakPoints.ExtraLarge" OnChange="@( (matches) => isExtraLarge = matches )"></TelerikMediaQuery>
145-
146-
@* sample logic follows
147-
NOTE: this simple logic is best suited for plain CSS
148-
the power of the TelerkMediaQuery component is to let you employ more complex C# logic
149-
that cannot be done with CSS alone.
150-
The TelerikMediaQuery component is not a replacement for responsive CSS and design.
151-
*@
152-
153-
<div class="@GetClassFromWindowSize()">
154-
Resize your browser and look at the background of this element - red for large screens, yellow for medium, green for small devices.
155-
<br />
156-
@isExtraSmall <br />
157-
@isSmall <br />
158-
@isMedium <br />
159-
@isLarge <br />
160-
@isExtraLarge
161-
</div>
162-
163-
@code{
164-
bool isExtraSmall { get; set; }
165-
bool isSmall { get; set; }
166-
bool isMedium { get; set; }
167-
bool isLarge { get; set; }
168-
bool isExtraLarge { get; set; }
169-
170-
string GetClassFromWindowSize()
171-
{
172-
if (isExtraSmall || isSmall) return "small";
173-
if (isMedium) return "medium";
174-
if (isLarge || isExtraLarge) return "large";
175-
return "";
176-
}
177-
}
178-
179-
@* sample styles for this example *@
180-
<style>
181-
.small {
182-
background-color: green;
183-
}
184-
185-
.medium {
186-
background-color: yellow;
187-
}
188-
189-
.large {
190-
background-color: red;
191-
}
192-
</style>
193-
````
19472

19573
## Notes
19674

@@ -202,10 +80,13 @@ The MediaQuery component facilitates the usage of CSS media queries in your C# c
20280

20381
* You should have default values for the flags in your application that define the preferred state or layout. Depending on the browser and the media query setup, it is possible that no `OnChange` event will fire when the app initializes, so the app should have a reasonable default state.
20482

83+
## Next Steps
84+
85+
* [Explore the MediaQuery events]({%slug mediaquery-events%})
86+
* [Integrate the MediaQuery with other Telerik Blazor components]({%slug mediaquery-integration%})
87+
20588
## See Also
206-
207-
* [Integration]({%slug mediaquery-integration%})
208-
* [Events]({%slug mediaquery-events%})
89+
20990
* [Live Demo: MediaQuery](https://demos.telerik.com/blazor-ui/mediaquery/overview)
21091
* [Live Demo: MediaQuery - Grid Integration](https://demos.telerik.com/blazor-ui/mediaquery/grid-integration)
21192
* [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikMediaQuery)

0 commit comments

Comments
 (0)