Utilities
MediaQuery
Bit.BlazorUIBreakpointResponsiveHidden
MediaQuery renders content by what the browser's matchMedia reports: the layout decisions CSS cannot express, such as rendering a different component or none at all. It offers the predefined screen queries, built from the live theme breakpoints, and any custom media query, and reports its state to the page as a bindable value.
Notes
Resize the window, or zoom in and out, to watch the examples below change.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
The content renders only while the screen matches ScreenQuery, one of the predefined screen queries.
Screen queries
Four shapes: a band (Xs to Xxl), below a breakpoint (Lt*), above one (Gt*) and a
span of bands (*To*). The six bands never overlap and leave no gap, so exactly one of them matches.
Bands:
Less than:
Greater than:
Spans:
Matched & NotMatched
Matched (an alias of ChildContent) and NotMatched make a responsive if/else. Leave one out
to render nothing on that side.
Template
Template spans both states and receives the matched state. Its content is updated rather than rebuilt
when the query flips, so the state inside it (a half-typed field, the focus) survives. It takes precedence over
the other fragments.
Custom query
Query takes any media query, including the range syntax and the features other than the width; a leading
@media is dropped. It takes precedence over ScreenQuery; one the browser cannot parse is reported in
the console.
The width is outside 400px to 700px.
The screen is in portrait orientation.
The system prefers a light color scheme.
The primary pointer is coarse (a finger) or absent.
Reduced motion is not requested.
Theme breakpoints
A ScreenQuery is built from the live --bit-bp-* breakpoints, so re-valuing them - with
BitThemeManager, a BitThemeProvider or the CSS variables on an ancestor - moves what it matches.
The same Md below answers at three different widths.
Document breakpoints (960px to 1279.98px):
Md is not matched.
BitThemeProvider (700px to 899.98px):
Md is not matched.
CSS variables (1100px to 1499.98px):
Md is not matched.
Element & NoWrapper
The root is a div. Element renders another tag where a div is not allowed: a span in a paragraph or
a button, an li in a list. NoWrapper renders no root at all, for a parent that lays out its own
children, and gives up what the root carries: class, style, dir, name and keeping the focus across a flip.
Your order ships Oct 7 by express courier.
DefaultMatched
Only the browser can answer a query, so until it does the not-matched side renders. DefaultMatched starts
on the matched side instead, avoiding a flash of the wrong content while prerendering. Pick the side most
visitors land on.
Wide content, rendered before the query is answered too.
Binding & OnChange
@bind-IsMatched hands the state to the page, with no content needed. OnChange reports each change,
and the first answer too, for the changes that are actions (loading data, closing a drawer).
The screen is wide (LtMd). OnChange calls: 0
Accessibility
A named wrapper (AriaLabel, aria-label or aria-labelledby) is a group. Zooming in
crosses breakpoints for keyboard users: when a flip removes the focused element, the focus moves to the element
with the same id in the new content, else its first focusable element, instead of the top of the page.
Tab to a button below and zoom in or out.
Cascading parameters
BitParams with a BitMediaQueryParams sets defaults for every media query under it; a component's own
value wins. Query and ScreenQuery count as one: neither is cascaded to a component that sets either.
Here the labels, spans inside the buttons, hide below Md, except Delete's, which sets its own query.
Style & Class
Style and Class land on the root div, so they do nothing with NoWrapper.
Styled through the Style parameter, not matched (GtXs).
Classed through the Class parameter, not matched (GtXs).
RTL
Dir sets the direction of the root div; with NoWrapper the surrounding direction applies.
عرض صفحه کمتر از حد GtXs است.
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.
BitMediaQuery CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-bp-xs | 0 | The start of the Xs band, which a ScreenQuery is built from. |
| --bit-bp-sm | 600px | The start of the Sm band, which a ScreenQuery is built from. |
| --bit-bp-md | 960px | The start of the Md band, which a ScreenQuery is built from. |
| --bit-bp-lg | 1280px | The start of the Lg band, which a ScreenQuery is built from. |
| --bit-bp-xl | 1920px | The start of the Xl band, which a ScreenQuery is built from. |
| --bit-bp-xxl | 2560px | The start of the Xxl band, which a ScreenQuery is built from. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitMediaQuery parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| CascadingTheme | BitTheme? | null | The theme of an enclosing BitThemeProvider. Only its breakpoints are read, to resolve a ScreenQuery; they win over the --bit-bp-* CSS variables. |
| ChildContent | RenderFragment? | null | The content of the element to render if the specified query is matched. |
| DefaultMatched | bool | false | The matched state to render with until the browser answers the query, to avoid a flash of the wrong content while prerendering. Ignored when IsMatched is bound. |
| Element | string? | null | The custom html element used for the root node (div by default): a span where only inline content is allowed, an li in a list. A void element or an invalid name falls back to div. |
| IsMatched | bool | false | The current matched state of the query. An output: the browser owns it, so bind it rather than setting it one way, which freezes it; seed it with DefaultMatched. (two-way bound) |
| 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. |
| NoWrapper | bool | false | Renders the active content without the wrapping root element, so what describes an element (class, style, id, dir, aria-label, ...) is ignored and the focus is not kept across a flip. See Element for when only the div is in the way. |
| OnChange | EventCallback<bool> | The callback for every change of the matched state, also called once with the first answer of the browser. | |
| Query | string? | null | The custom media query to be matched: any valid CSS media query, including the features other than the width, with or without a leading @media. Takes precedence over ScreenQuery. |
| ScreenQuery | BitScreenQuery? | null | The predefined screen query to be matched, built from the live theme breakpoints (the --bit-bp-* CSS variables). |
| Template | RenderFragment<bool>? | null | The content for both states, receiving the matched state. It is updated rather than rebuilt when the query flips, so the state inside it survives. Takes precedence over Matched, ChildContent and NotMatched. |
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. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| 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. |
| 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: 599.98px)] |
| Sm | 1 | Small query: [@media screen and (min-width: 600px) and (max-width: 959.98px)] |
| Md | 2 | Medium query: [@media screen and (min-width: 960px) and (max-width: 1279.98px)] |
| Lg | 3 | Large query: [@media screen and (min-width: 1280px) and (max-width: 1919.98px)] |
| Xl | 4 | Extra large query: [@media screen and (min-width: 1920px) and (max-width: 2559.98px)] |
| Xxl | 5 | Extra extra large query: [@media screen and (min-width: 2560px)] |
| LtSm | 6 | Less than small query: [@media screen and (max-width: 599.98px)] |
| LtMd | 7 | Less than medium query: [@media screen and (max-width: 959.98px)] |
| LtLg | 8 | Less than large query: [@media screen and (max-width: 1279.98px)] |
| LtXl | 9 | Less than extra large query: [@media screen and (max-width: 1919.98px)] |
| LtXxl | 10 | Less than extra extra large query: [@media screen and (max-width: 2559.98px)] |
| GtXs | 11 | Greater than extra small query: [@media screen and (min-width: 600px)] |
| GtSm | 12 | Greater than small query: [@media screen and (min-width: 960px)] |
| GtMd | 13 | Greater than medium query: [@media screen and (min-width: 1280px)] |
| GtLg | 14 | Greater than large query: [@media screen and (min-width: 1920px)] |
| GtXl | 15 | Greater than extra large query: [@media screen and (min-width: 2560px)] |
| SmToMd | 16 | Small through medium query: [@media screen and (min-width: 600px) and (max-width: 1279.98px)] |
| SmToLg | 17 | Small through large query: [@media screen and (min-width: 600px) and (max-width: 1919.98px)] |
| SmToXl | 18 | Small through extra large query: [@media screen and (min-width: 600px) and (max-width: 2559.98px)] |
| MdToLg | 19 | Medium through large query: [@media screen and (min-width: 960px) and (max-width: 1919.98px)] |
| MdToXl | 20 | Medium through extra large query: [@media screen and (min-width: 960px) and (max-width: 2559.98px)] |
| LgToXl | 21 | Large through extra large query: [@media screen and (min-width: 1280px) and (max-width: 2559.98px)] |
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
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.