Layouts
Grid
Bit.BlazorUI
BitGrid divides its width into equal columns and lays its BitGridItem children over them, wrapping when a row is full. Column counts, spacing, spans, offsets and orders take a value per breakpoint (mobile first), measured against the window or, as a container, against the grid itself.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Columns (12 by default) divides the width; each item fills one column, or the grid's
Span, or its own ColumnSpan. A span larger than the column count takes a full row.
Columns="4"
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
A grid that sets no Columns reads the inherited --bit-Grid-columns variable instead, so one
declaration (on :root, a page or a panel) sets the column count of every grid under it, nested
grids included. Columns is the way to change a single grid.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Span="4": every item takes 4 of the 12 columns
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
ColumnSpan per item: the rows share the same tracks however they are split
Span 12
Span 6
Span 6
Span 8
Span 4
Span 3
Span 3
Span 3
Span 3
Breakpoints
Mobile first: a value set at a breakpoint applies to every wider one until replaced. Xs 0px,
Sm 600px, Md 960px, Lg 1280px, Xl 1920px, Xxl 2560px. Resize the window.
ColumnsSm/Md/Lg: 2 columns, then 3, 4 and 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Spans per breakpoint: full width on a phone, two thirds + one third from Md
12, then 8 from Md
12, then 4 from Md
12, 6 from Sm, 3 from Lg
12, 6 from Sm, 3 from Lg
12, 6 from Sm, 3 from Lg
12, 6 from Sm, 3 from Lg
Auto & Grow
Auto sizes an item to its content; Grow takes what the row left over, shared equally
between growing items. The grid's own Grow does it for every item, filling a short last row.
Auto
Grow (takes the rest of the row)
Auto
Span 4
Grow
Grow
Five items in three columns, without and with the grid's Grow
Item 1
Item 2
Item 3
Item 4
Item 5
Item 1
Item 2
Item 3
Item 4
Item 5
Per breakpoint: AutoXs..AutoXxl and GrowXs..GrowXxl; false gives
the columns back. Resize the window.
Span 12, then Auto from Md
Span 12, then Grow from Md
Span 12, then Auto from Md
Auto, then Span 3 from Md
Grow, then Span 9 from Md
Offset
Offset leaves a number of columns (gaps included) empty before an item. AutoOffset
takes all the room before it, pushing the item to the end of its row, and wins over Offset.
Span 4
Span 4, Offset 4
Span 6, Offset 3 (centered)
Span 3
Span 3, AutoOffset
Per breakpoint: OffsetXs..OffsetXxl and AutoOffsetXs..AutoOffsetXxl.
Resize the window.
A heading
AutoOffset from Md
Offset 2 from Md
Order
Order sets where an item is painted, lowest first; it can be negative. Screen readers and the
Tab key still follow the markup order, so keep the two close.
1st written, Order 3
2nd written, Order 1
3rd written, Order -1
4th written, Order 2
Per breakpoint with OrderXs..OrderXxl: the sidebar is painted first below Md, the content indented from Md
Content (written first)
Sidebar (written second)
Alignment
HorizontalAlign distributes the width a row leaves unused.
HorizontalAlign
Item 1
Item 2
Item 3
Item 4
VerticalAlign aligns the items within their row; Stretch gives a row of cards one bottom
edge. AlignSelf overrides it for one item.
VerticalAlign
A tall item
Short
A medium item
AlignSelf End
Alignment sets both axes at once; HorizontalAlign and VerticalAlign each win on their own axis.
A tall item
Alignment Center
AlignContent moves the rows themselves inside a grid taller than its rows.
AlignContent
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Spacing
Spacing is the gap on both axes; HorizontalSpacing and VerticalSpacing replace it
per axis. Any CSS length works (a bare number is pixels), and the gaps are taken out of the items'
widths, so the row never overflows. Unset, it follows the theme's spacing unit (4px by default).
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Fluid, Spacing="clamp(4px, 2vw, 24px)", or per breakpoint with SpacingXs..SpacingXxl
(and the per axis variants). Resize the window.
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
The --bit-Grid-spacing, --bit-Grid-horizontal-spacing and --bit-Grid-vertical-spacing
variables inherit, so one declaration (on :root, a page or a panel) sets the gutter of every grid
under it that sets no spacing parameter.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Hiding
A span of 0 hides an item (from screen readers too). Combined with breakpoints, it drops part
of a layout at some sizes only. Resize the window.
Always shown
Hidden below Md
Hidden from Md
Hidden between Sm and Md
Fluid columns
MinItemWidth fits as many equal items on a row as that width allows, with no breakpoints; the
last row is shared equally too. Columns and spans are ignored; Auto, Grow and offsets still apply.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Auto
Fluid
Fluid
Fluid
Container queries
Container measures every breakpoint against the grid's own width instead of the window's, so a
reusable piece lays itself out for the room it gets. Drag the corner of each box.
Container: follows this box
Item 1
Item 2
Item 3
Item 4
Without it: follows the window
Item 1
Item 2
Item 3
Item 4
Wrapping & direction
NoWrap keeps every item on one row, shrinking them to fit. Reversed paints the row from
the end edge (offsets follow it); reading and Tab order stay as written.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4, Offset 1
Nesting
A grid inside an item divides that item's width, with its own column count and spacing.
Span 8, holding a grid of its own
Nested 1
Nested 2
Nested 3
Nested span 2
Nested 5
Span 4
Accessibility
A grid is presentational; give it meaning with Element. As a ul, ol or menu
its items render as li, bullets and indent are removed and role="list" is added (Safari
drops list semantics otherwise). AriaLabel names it; on a section it makes a region.
- Apple
- Banana
- Cherry
- Date
- Elderberry
- Fig
- Grape
- Honeydew
Order and Reversed change only what is painted, not the reading or focus order
(WCAG 1.3.2 / 2.4.3): write the markup in reading order and reorder visually only where it stays
obvious. A span of 0 is display: none, so a hidden item leaves the reading and Tab order too.
Layout patterns
Common layouts built from the parameters above.
Form row: Auto label, Grow field, Auto action
Email address
The field
Save
Page shell: sidebar and content stack below Md (content read first), breadcrumb hidden below Md
Header
Breadcrumb
Content
Sidebar
Footer
Toolbar: a title, actions pushed to the end, never wrapping
Documents
Filter
New
Card gallery: no breakpoints, just a minimum card width
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Cascading parameters
BitParams hands BitGridParams and BitGridItemParams down to every grid and item under
it as defaults: a parameter a grid or item sets itself still wins.
Item 1 (cascaded span 2 of 6)
Item 2 (cascaded span 2 of 6)
Item 3 (cascaded span 2 of 6)
Item 4 (cascaded span 2 of 6)
Item 5 (cascaded span 2 of 6)
Own ColumnSpan 4
Own Columns 4, cascaded span 2
Own Columns 4, cascaded span 2
Style & Class
Style and Class land on the root of the grid and of each item. The layout is driven by
custom properties, so your own styles never fight the sizing.
Class
Style
Style, span 2
RTL
Right-to-left grids start from the right: alignment and offsets follow the text direction.
راستچین ۴
راستچین ۴ با فاصله ۴
راستچین ۶ در وسط
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.
BitGrid CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-Grid-columns | 12 | Column count of every grid that sets no Columns of its own (a unitless integer, values below 1 are treated as 1). Inherits, so it can be set on :root or an ancestor; set on a grid's Style it also reaches every grid nested in it, so use Columns to change a single grid. |
| --bit-Grid-spacing | half the theme spacing unit (4px) | Room between the items on both axes of every grid that sets no Spacing of its own. Inherits, so it can be set on :root, an ancestor or a grid's Style. |
| --bit-Grid-horizontal-spacing | --bit-Grid-spacing | Room between the columns of every grid that sets no Spacing or HorizontalSpacing of its own. |
| --bit-Grid-vertical-spacing | --bit-Grid-spacing | Room between the rows of every grid that sets no Spacing or VerticalSpacing of its own. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitGrid parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AlignContent | BitAlignment? | null | Defines how the rows of a wrapping grid share out the height left over (the CSS align-content). It only shows up in a grid that wrapped onto more than one row and is taller than those rows needed, and it is not part of the Alignment shorthand. |
| Alignment | BitAlignment? | null | Gets or sets the alignment of the children of the grid on both axes at once. HorizontalAlign and VerticalAlign each take precedence over it on their own axis. |
| ChildContent | RenderFragment? | null | The content of the Grid. |
| Columns | int? | null | Defines the number of columns the width of the grid is divided into. It is the count of every breakpoint that is not overridden, and values below 1 are treated as 1. Unset, it follows the --bit-Grid-columns CSS variable (12 when that is unset too). |
| ColumnsXs | int? | null | Number of columns in the extra small breakpoint (from 0px). The value keeps applying to every wider breakpoint until another one replaces it. |
| ColumnsSm | int? | null | Number of columns in the small breakpoint (from 600px). The value keeps applying to every wider breakpoint until another one replaces it. |
| ColumnsMd | int? | null | Number of columns in the medium breakpoint (from 960px). The value keeps applying to every wider breakpoint until another one replaces it. |
| ColumnsLg | int? | null | Number of columns in the large breakpoint (from 1280px). The value keeps applying to every wider breakpoint until another one replaces it. |
| ColumnsXl | int? | null | Number of columns in the extra large breakpoint (from 1920px). The value keeps applying to every wider breakpoint until another one replaces it. |
| ColumnsXxl | int? | null | Number of columns in the extra extra large breakpoint (from 2560px). |
| Container | bool | false | Measures the breakpoints of the grid against its own width instead of the width of the viewport, by turning the grid into a CSS query container. The breakpoints keep their usual widths, so a grid in a 700px panel lays itself out the way the same grid lays itself out in a 700px window. |
| Element | string? | null | The custom html element used for the root node (div by default). As a ul, ol or menu the grid gets role="list", loses its bullets and indent, and renders its items as li. |
| Grow | bool | false | Lets every child of the grid grow into whatever width its row did not use, which is what fills out the last, short row of a grid of otherwise equal items. The items that are sized to their own content are left alone. |
| HorizontalAlign | BitAlignment? | null | Defines the horizontal distribution of the children of the grid (the CSS justify-content). Baseline and Stretch distribute nothing, so those two act on the vertical axis instead. |
| HorizontalSpacing | string? | null | Defines the horizontal spacing between the children of the grid. It is taken out of the width of the row before the columns divide it up. Falls back to Spacing, then to --bit-Grid-horizontal-spacing. |
| HorizontalSpacingXs | string? | null | Defines the horizontal spacing between the children of the grid from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingXs. |
| HorizontalSpacingSm | string? | null | Defines the horizontal spacing between the children of the grid from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingSm. |
| HorizontalSpacingMd | string? | null | Defines the horizontal spacing between the children of the grid from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingMd. |
| HorizontalSpacingLg | string? | null | Defines the horizontal spacing between the children of the grid from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingLg. |
| HorizontalSpacingXl | string? | null | Defines the horizontal spacing between the children of the grid from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingXl. |
| HorizontalSpacingXxl | string? | null | Defines the horizontal spacing between the children of the grid from the extra extra large breakpoint (from 2560px) upwards, and it takes precedence over SpacingXxl. |
| MinItemWidth | string? | null | Sizes the children of the grid to a width they may not go below instead of to a number of columns, and fits as many of them on a row as that width allows. Takes any CSS length, and a bare number is read as pixels. The items of a row share it equally, the last row included. The column tracks are left behind while it is set, except for the items that state Auto or Grow for themselves and except for the offsets, which are still counted in columns. |
| NoWrap | bool | false | Keeps the children of the grid on a single row, shrinking them to fit instead of letting them wrap onto more rows. |
| Reversed | bool | false | Renders the children of the grid in the opposite direction. Only the painted order is reversed; the reading and tab order stay as written. |
| Spacing | string? | null | Defines the spacing between the children of the grid on both axes. HorizontalSpacing and VerticalSpacing each replace it on their own axis, and it is the spacing of every breakpoint that is not overridden. When not set, the --bit-Grid-spacing variable or half the theme spacing unit (4px at the default density) is used. |
| SpacingXs | string? | null | Defines the spacing between the children of the grid on both axes from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it. |
| SpacingSm | string? | null | Defines the spacing between the children of the grid on both axes from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it. |
| SpacingMd | string? | null | Defines the spacing between the children of the grid on both axes from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it. |
| SpacingLg | string? | null | Defines the spacing between the children of the grid on both axes from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it. |
| SpacingXl | string? | null | Defines the spacing between the children of the grid on both axes from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it. |
| SpacingXxl | string? | null | Defines the spacing between the children of the grid on both axes from the extra extra large breakpoint (from 2560px) upwards. |
| Span | int | 1 | Defines the number of columns the children of the grid fill by default, used by every item that does not set a ColumnSpan of its own. |
| VerticalAlign | BitAlignment? | null | Defines the vertical alignment of the children of the grid within a row (the CSS align-items). The three space distributions have no meaning on this axis and are ignored. |
| VerticalSpacing | string? | null | Defines the vertical spacing between the rows of the grid. Unlike HorizontalSpacing it has no effect on the width of the items. Falls back to Spacing, then to --bit-Grid-vertical-spacing. |
| VerticalSpacingXs | string? | null | Defines the vertical spacing between the rows of the grid from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingXs. |
| VerticalSpacingSm | string? | null | Defines the vertical spacing between the rows of the grid from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingSm. |
| VerticalSpacingMd | string? | null | Defines the vertical spacing between the rows of the grid from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingMd. |
| VerticalSpacingLg | string? | null | Defines the vertical spacing between the rows of the grid from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingLg. |
| VerticalSpacingXl | string? | null | Defines the vertical spacing between the rows of the grid from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and it takes precedence over SpacingXl. |
| VerticalSpacingXxl | string? | null | Defines the vertical spacing between the rows of the grid from the extra extra large breakpoint (from 2560px) upwards, and it takes precedence over SpacingXxl. |
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. |
BitGridItem properties
A cell of a BitGrid, holding the content of one area of the layout and stating how many columns of the grid that area covers.
| Name | Type | Default value | Description |
|---|---|---|---|
| AlignSelf | BitAlignment? | null | Defines the vertical alignment of this item within its row, overriding the VerticalAlign of the grid for this item alone (the CSS align-self). |
| Auto | bool | false | Sizes the item to its own content instead of to a number of columns. Takes precedence over Grow and over every span of the item, and is the base of the mobile first chain the AutoXs to AutoXxl and GrowXs to GrowXxl parameters carry upwards. |
| AutoXs | bool? | null | Sizes the item to its own content from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| AutoSm | bool? | null | Sizes the item to its own content from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| AutoMd | bool? | null | Sizes the item to its own content from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| AutoLg | bool? | null | Sizes the item to its own content from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| AutoXl | bool? | null | Sizes the item to its own content from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| AutoXxl | bool? | null | Sizes the item to its own content from the extra extra large breakpoint (from 2560px) upwards, and false gives the item its columns back. |
| AutoOffset | bool | false | Pushes this item to the end edge of its row by turning every column left over before it into the offset. Takes precedence over Offset and over every per breakpoint offset, and follows the edge the row starts at exactly as Offset does. |
| AutoOffsetXs | bool? | null | Pushes this item to the end edge of its row from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false hands the room back to Offset. |
| AutoOffsetSm | bool? | null | Pushes this item to the end edge of its row from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false hands the room back to Offset. |
| AutoOffsetMd | bool? | null | Pushes this item to the end edge of its row from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false hands the room back to Offset. |
| AutoOffsetLg | bool? | null | Pushes this item to the end edge of its row from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false hands the room back to Offset. |
| AutoOffsetXl | bool? | null | Pushes this item to the end edge of its row from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false hands the room back to Offset. |
| AutoOffsetXxl | bool? | null | Pushes this item to the end edge of its row from the extra extra large breakpoint (from 2560px) upwards, and false hands the room back to Offset. |
| ChildContent | RenderFragment? | null | The content of the Grid item. |
| ColumnSpan | int? | null | Number of columns this item should fill. A span of 0 is an item that is not shown at all. When not set, the item falls back to the Span of its grid. |
| Element | string? | null | The custom html element used for the root node: div by default, or li in a grid rendered as a ul, ol or menu. |
| Grow | bool | false | Lets the item grow into whatever width is left over in its row, sharing it equally with the other items that grow. It is the base of the mobile first chain the GrowXs to GrowXxl and AutoXs to AutoXxl parameters carry upwards. |
| GrowXs | bool? | null | Lets the item grow into whatever width is left over in its row from the extra small breakpoint (from 0px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| GrowSm | bool? | null | Lets the item grow into whatever width is left over in its row from the small breakpoint (from 600px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| GrowMd | bool? | null | Lets the item grow into whatever width is left over in its row from the medium breakpoint (from 960px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| GrowLg | bool? | null | Lets the item grow into whatever width is left over in its row from the large breakpoint (from 1280px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| GrowXl | bool? | null | Lets the item grow into whatever width is left over in its row from the extra large breakpoint (from 1920px) upwards. The value keeps applying to every wider breakpoint until another one replaces it, and false gives the item its columns back. |
| GrowXxl | bool? | null | Lets the item grow into whatever width is left over in its row from the extra extra large breakpoint (from 2560px) upwards, and false gives the item its columns back. |
| Offset | int? | null | Number of columns to leave empty before this item, measured in the columns of the grid with the gaps included. The room is left on the edge the row starts at, so it indents from the right in a right-to-left grid and from the other end of either once the grid is Reversed. |
| OffsetXs | int? | null | Number of columns to leave empty before this item in the extra small breakpoint (from 0px). |
| OffsetSm | int? | null | Number of columns to leave empty before this item in the small breakpoint (from 600px). |
| OffsetMd | int? | null | Number of columns to leave empty before this item in the medium breakpoint (from 960px). |
| OffsetLg | int? | null | Number of columns to leave empty before this item in the large breakpoint (from 1280px). |
| OffsetXl | int? | null | Number of columns to leave empty before this item in the extra large breakpoint (from 1920px). |
| OffsetXxl | int? | null | Number of columns to leave empty before this item in the extra extra large breakpoint (from 2560px). |
| Order | int? | null | Defines the position of this item among its siblings, regardless of where it is written. The value can be negative, and only the painted order changes. |
| OrderXs | int? | null | Defines the position of this item among its siblings in the extra small breakpoint (from 0px). |
| OrderSm | int? | null | Defines the position of this item among its siblings in the small breakpoint (from 600px). |
| OrderMd | int? | null | Defines the position of this item among its siblings in the medium breakpoint (from 960px). |
| OrderLg | int? | null | Defines the position of this item among its siblings in the large breakpoint (from 1280px). |
| OrderXl | int? | null | Defines the position of this item among its siblings in the extra large breakpoint (from 1920px). |
| OrderXxl | int? | null | Defines the position of this item among its siblings in the extra extra large breakpoint (from 2560px). |
| Xs | int? | null | Number of columns this item should fill in the extra small breakpoint (from 0px). The value keeps applying to every wider breakpoint until another one replaces it, and 0 hides the item from this breakpoint upwards. |
| Sm | int? | null | Number of columns this item should fill in the small breakpoint (from 600px). The value keeps applying to every wider breakpoint until another one replaces it, and 0 hides the item from this breakpoint upwards. |
| Md | int? | null | Number of columns this item should fill in the medium breakpoint (from 960px). The value keeps applying to every wider breakpoint until another one replaces it, and 0 hides the item from this breakpoint upwards. |
| Lg | int? | null | Number of columns this item should fill in the large breakpoint (from 1280px). The value keeps applying to every wider breakpoint until another one replaces it, and 0 hides the item from this breakpoint upwards. |
| Xl | int? | null | Number of columns this item should fill in the extra large breakpoint (from 1920px). The value keeps applying to every wider breakpoint until another one replaces it, and 0 hides the item from this breakpoint upwards. |
| Xxl | int? | null | Number of columns this item should fill in the extra extra large breakpoint (from 2560px). A value of 0 hides the item from this breakpoint upwards. |
BitAlignment enum
| Name | Value | Description |
|---|---|---|
| Start | 0 | |
| End | 1 | |
| Center | 2 | |
| SpaceBetween | 3 | |
| SpaceAround | 4 | |
| SpaceEvenly | 5 | |
| Baseline | 6 | |
| Stretch | 7 |
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.