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.

[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.
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.
  • On this page