Utilities
Element
Bit.BlazorUI
BitElement renders any tag - a div by default, or an anchor, a button, an input, an SVG shape, a custom element - with the parameters every bit BlazorUI component takes. Other attributes and events are splatted onto the tag, disabling follows what the tag supports, NoWrapper makes it a conditional wrapper, and the stopPropagation / preventDefault modifiers Razor only allows on plain elements are parameters.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
With no parameters the element is a
div. Element names any other tag and is used as
written. A value that is not a valid tag name (whitespace, a <, other symbols) falls back to
the div instead of reaching the markup.
The default element (div)
A heading (h4)
A paragraph (p) with a highlighted (mark) word.
A quotation (blockquote)
An invalid tag name falls back to a div.
Attributes & events
Anything that is not a parameter -
href, placeholder, role,
aria-*, data-*, @onclick, @oninput, ... - is splatted
onto the rendered tag. The shared parameters (Id, AriaLabel, TabIndex, ...) win over
the attribute of the same name.
An anchor to bitplatform.dev
You typed:
SVG & custom elements
The tag's case is kept, so case-sensitive SVG names (
linearGradient, clipPath) work
inside an svg. A custom element (any name with a dash) passes through untouched.
Void elements
Void elements (
input, img, hr, br, ...) render without a
closing tag, and their ChildContent is left out rather than emitted as invalid markup.
Event modifiers
Razor only allows
:stopPropagation and :preventDefault on plain elements, so they
are parameters here. StopPropagation and PreventDefault apply to the click;
StopPropagationEvents and PreventDefaultEvents take any other event names (with or without
the on prefix) and apply whether or not a handler is attached.
The card was clicked 0 times.
An anchor that does not navigate (0)
The card was double-clicked 0 times.
Double-click stays here, right-click opens no browser menu (0)
Dynamic element
The tag can change at runtime; the element is then rebuilt. Splatted attributes follow it, and each tag uses
only the ones it understands.
div
div
No wrapper
NoWrapper renders the content alone, making the element a conditional wrapper. With no tag to land
on, the class, style, id, attributes and element reference are ignored.
The same content, highlighted or bare.
Element reference
RootElement is the rendered element's
ElementReference for JS interop, and
FocusAsync focuses it - optionally without scrolling. A non-focusable tag needs a TabIndex.
Both are no-ops while NoWrapper is set or before the first render.
A div, focusable because it has a TabIndex.
Disabled
Disabled dims the element and blocks the pointer on any tag. Every tag gets
aria-disabled; form elements also get the native disabled, other tags
tabindex="-1". An anchor with an href loses it but gets role="link",
so it is announced as a disabled link; an area keeps its href and has its clicks'
default action prevented instead. Any disabled tag drops its activation handlers (@onclick,
@onkeydown, @onpointerdown, ...), so neither a screen reader's click nor an event
bubbling up from its content can run them. Screen readers ignore aria-disabled on a generic tag,
so give it a role. Content inside keeps its own tab stops - use a fieldset to disable a whole form.
A disabled anchor
A disabled div button, out of the tab order (0)
Visibility
Hidden keeps the element's space, Collapsed removes it from the layout. Collapsed also drops
the content of a NoWrapper element.
Hidden keeps its space.
Collapsed takes its space with it.
Unwrapped content is dropped while collapsed.Cascading parameters
BitParams hands a BitElementParams to every element below it as defaults, not overrides: an
element that sets a parameter itself keeps its own value. Here every item of the toolbar becomes a
button that keeps its clicks from the card, except the last one.
The card was clicked 0 times.
Outside the cascade: a plain div again.
Style & Class
Style and Class are merged with a plain
style or class attribute
instead of replacing it.
Styled through the Style parameter
Classed through the Class parameter
A Class parameter and a plain style attribute
The CSS variables inherit, so they can be set on
:root, on an ancestor, or on the Style of one element - and a value set on an element
also reaches every element inside it.
RTL
Dir writes the
dir attribute (and the bit-rtl class) on any tag.
این یک المنت راستچین است.
یک نقل قول راستچین.
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.
BitElement CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Element-disabled-opacity | --bit-opa-dis | Opacity of a disabled element. Set it to 1 to keep the tag's own look, for a wrapper whose content shows its own disabled state. It inherits, so the value also reaches every element inside: a disabled element nested in a wrapper set to 1 needs a value of its own (e.g. var(--bit-opa-dis)) to dim again. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitElement parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The content of the element. Not rendered into a void element (input, img, br, hr, ...). |
| Element | string? | null | The tag to render, used as written (SVG and custom elements included). A value that is not a valid tag name - an ASCII letter followed by letters, digits, "-", "_", "." or ":" - falls back to the default "div". |
| NoWrapper | bool | false | Renders only the content, without the tag. Everything describing the tag is ignored, except a Collapsed Visibility, which drops the content too. |
| PreventDefault | bool | false | Prevents the default browser action of the click (@onclick:preventDefault). |
| PreventDefaultEvents | IEnumerable<string>? | null | The events whose default browser action is prevented, named with or without the "on" prefix. Naming "click" wins over PreventDefault. |
| StopPropagation | bool | false | Stops the click from bubbling up to the ancestors (@onclick:stopPropagation). |
| StopPropagationEvents | IEnumerable<string>? | null | The events stopped from bubbling up, named with or without the "on" prefix. Naming "click" wins over StopPropagation. |
BitElement public members
| Name | Type | Default value | Description |
|---|---|---|---|
| FocusAsync | ValueTask | Focuses the rendered element; the overload taking preventScroll focuses it without scrolling it into view. The element must be focusable (a focusable tag or one with a TabIndex). Does nothing while NoWrapper is set or before the first render. |
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. |
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.