Home Docs

MediaQuery

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

Usage

Basic
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
You can utilize the Matched and NotMatched parameters to render your desired UI.

[BitScreenQuery.Md] NotMatched!.
Custom query
You can provide any valid media query as a custom query ( more info ).


screen and (max-width: 999px):

Not matched yet!
OnChange
Using the OnChange event one can be notified about the matching of the provided query.

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 The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
  • On this page