MediaQuery

A component to easily use predefined bit BlazorUI media queries in Blazor components.

Usage


Basic

<BitMediaQuery ScreenQuery="BitScreenQuery.Xs">This is <b>Xs</b> (Extra Small).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.Sm">This is <b>Sm</b> (Small).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.Md">This is <b>Md</b> (Medium).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.Lg">This is <b>Lg</b> (Large).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.Xl">This is <b>Xl</b> (Extra Large).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.Xxl">This is <b>Xxl</b> (Extra Extra Large).</BitMediaQuery>

<BitMediaQuery ScreenQuery="BitScreenQuery.LtSm">This is <b>LtSm</b> (Less Than Small).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.LtMd">This is <b>LtMd</b> (Less Than Medium).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.LtLg">This is <b>LtLg</b> (Less Than Large).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.LtXl">This is <b>LtXl</b> (Less Than Extra Large).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.LtXxl">This is <b>LtXxl</b> (Less Than Extra Extra Large).</BitMediaQuery>

<BitMediaQuery ScreenQuery="BitScreenQuery.GtXs">This is <b>GtXs</b> (Greater Than Extra Small).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.GtSm">This is <b>GtSm</b> (Greater Than Small).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.GtMd">This is <b>GtMd</b> (Greater Than Medium).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.GtLg">This is <b>GtLg</b> (Greater Than Large).</BitMediaQuery>
<BitMediaQuery ScreenQuery="BitScreenQuery.GtXl">This is <b>GtXl</b> (Greater Than Extra Large).</BitMediaQuery>
Explore the media query interaction with the UI by resizing the window (you can try zoom in/out too).

Normal screen queries:





Range screen queries (less than):





Range screen queries (greater than):

Matched & NotMatched

<BitMediaQuery ScreenQuery="BitScreenQuery.Md">
    <Matched>
        This is <b>Matched</b> (BitScreenQuery.Md).
    </Matched>
    <NotMatched>
        [BitScreenQuery.Md] <b>NotMatched!</b>.
    </NotMatched>
</BitMediaQuery>
You can utilize the Matched and NotMatched parameters to render your desired UI.

[BitScreenQuery.Md] NotMatched!.

Custom query

<BitMediaQuery Query="screen and (max-width: 999px)">
    <Matched>
        This is <b>screen and (max-width: 999px)</b>.
    </Matched>
    <NotMatched>
        Not matched yet!
    </NotMatched>
</BitMediaQuery>
You can provide any valid media query as a custom query ( more info ).


screen and (max-width: 999px):

Not matched yet!

OnChange

<BitMediaQuery ScreenQuery="BitScreenQuery.Md" OnChange="v => isMatched = v" />
<div>[BitScreenQuery.Md] IsMatched?: <b>@isMatched</b></div>
@code {
    private bool isMatched;
}
Using the OnChange event one can be notified about the matching of the provided query.

[BitScreenQuery.Md] IsMatched?: False

API

BitMediaQuery parameters

Name Type Default value Description
ChildContent RenderFragment? null The content of the element to render if the specified query is matched.
Matched RenderFragment? null The content to be rendered if the provided query is matched (an alias for ChildContent).
NotMatched RenderFragment? null The content to be rendered if the provided query is not matched.
OnChange EventCallback<bool> The event callback to be called when the state of the media query has been changed.
Query string? null Specifies the custom query to be matched.
ScreenQuery BitScreenQuery? null Defines the screen query to be matched, amongst the predefined Bit screen media queries.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitScreenQuery enum

Name Value Description
Xs 0 Extra small query: [@media screen and (max-width: 600px)]
Sm 1 Small query: [@media screen and (min-width: 601px) and (max-width: 960px)]
Md 2 Medium query: [@media screen and (min-width: 961px) and (max-width: 1280px)]
Lg 3 Large query: [@media screen and (min-width: 1281px) and (max-width: 1920px)]
Xl 4 Extra large query: [@media screen and (min-width: 1921px) and (max-width: 2560px)]
Xxl 5 Extra extra large query: [@media screen and (min-width: 2561px)]
LtSm 6 Less than small query: [@media screen and (max-width: 600px)]
LtMd 7 Less than medium query: [@media screen and (max-width: 960px)]
LtLg 8 Less than large query: [@media screen and (max-width: 1280px)]
LtXl 9 Less than extra large query: [@media screen and (max-width: 1920px)]
LtXxl 10 Less than extra extra large query: [@media screen and (max-width: 2560px)]
GtXs 11 Greater than extra small query: [@media screen and (min-width: 601px)]
GtSm 12 Greater than extra small query: [@media screen and (min-width: 601px)]
GtMd 13 Greater than medium query: [@media screen and (min-width: 1281px)]
GtLg 14 Greater than large query: [@media screen and (min-width: 1921px)]
GtXl 15 Greater than extra large query: [@media screen and (min-width: 2561px)]

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.


Or you can review / edit this component on GitHub.