ui/build/layout/layout.shared
ui/build/layout/layout.shared
Type Aliases
ColumnParentContext
type ColumnParentContext =
| {
kind: "grid";
}
| {
count: () => number;
kind: "columns";
};Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:22
LayoutAttributes
type LayoutAttributes = Omit<HTMLAttributes<HTMLDivElement>, "children"> & Pick<HTMLButtonAttributes, "type" | "disabled" | "form" | "name" | "value"> & Pick<HTMLAnchorAttributes, "href" | "target" | "rel" | "download" | "hreflang"> & Pick<HTMLLabelAttributes, "for"> & object;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:6
Attributes a primitive accepts: any element's, plus the few a button, a or label rendering
needs (as="button" takes type and disabled; as="a" takes href).
Type Declaration
ref?
optional ref?: HTMLElement | null;The rendered element, for measurement or focus.
LayoutElement
type LayoutElement =
| "div"
| "span"
| "section"
| "article"
| "main"
| "aside"
| "header"
| "footer"
| "nav"
| "form"
| "fieldset"
| "figure"
| "figcaption"
| "dl"
| "ol"
| "ul"
| "li"
| "button"
| "a"
| "label";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:19
The elements a layout primitive may render as.
The list is a whitelist of flow and inline containers, which is what keeps as from becoming a
way to render a layout primitive as a heading or anything else that carries typography of its
own. button, a and label are here because a control whose content is laid out is otherwise
a raw flex element or a control wrapping a layout span. Semantic sectioning elements belong here — the point of as is to let a
region be a <section> or an <article> without giving up the primitive's layout.
LayoutGap
type LayoutGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:20
LayoutPad
type LayoutPad = Exclude<LayoutGap, "xl">;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:21
ScrollAxis
type ScrollAxis = "x" | "y" | "both";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:36
ScrollPort
type ScrollPort = object;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:67
Properties
| Property | Modifier | Type | Defined in |
|---|---|---|---|
element |
readonly |
HTMLElement | null |
apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:68 |
Variables
COLUMN_PARENT_CONTEXT
const COLUMN_PARENT_CONTEXT: unique symbol;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:28
GAP_CLASSES
const GAP_CLASSES: Record<LayoutGap, string>;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:33
The gap scale. Every stacking primitive spends it; it is exported for the same reason
INSET_MX_CLASS is — a box that cannot be a primitive still owes the same rhythm.
INSET_CLASS
const INSET_CLASS: "px-4 py-2 sm:px-6" = "px-4 py-2 sm:px-6";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:54
The one app inset: content regions. The only legal consumer is the single inset owner.
INSET_MX_CLASS
const INSET_MX_CLASS: "mx-4 sm:mx-6" = "mx-4 sm:mx-6";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:73
Chrome that draws its own background and so cannot pad itself (tab list).
INSET_X_CLASS
const INSET_X_CLASS: "px-4 sm:px-6" = "px-4 sm:px-6";Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:71
Full-bleed chrome with its own vertical rhythm (PageHeader).
LAYOUT_INSET_CONTEXT
const LAYOUT_INSET_CONTEXT: unique symbol;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:60
Set by a Bound inset for its subtree: the page already owns the horizontal inset, so chrome
that would otherwise supply its own (a default tab strip) aligns with the content instead of
stepping in a second time.
PAD_CLASSES
const PAD_CLASSES: Record<LayoutPad, string>;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:52
ROW_GAP_CLASSES
const ROW_GAP_CLASSES: Record<LayoutGap, string>;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:35
The same scale on the block axis alone, for a grid whose rows sit tighter than its columns.
SCROLL_AXIS_CLASSES
const SCROLL_AXIS_CLASSES: Record<ScrollAxis, string>;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:51
The scrollport classes, per axis — the one definition of what "this region scrolls" means.
Per-axis overscroll-contain: an x-only reel must not trap the parent's vertical scroll, and
the axis that does not scroll is clipped rather than left visible, so a wide child cannot
paint outside the region.
Scroll is how a region declares itself a scrollport, and is what almost every caller wants.
This token exists for the boxes Scroll cannot be: it fills its parent unconditionally, so a
pane bounded by its own max-height (a popover, a collapsible) or by a fixed height (a chip
reel) cannot be one — and neither can an element a third-party component or a ProseMirror
editor owns. Those honour the same contract by naming it, the way INSET_MX_CLASS lets chrome
that cannot pad itself still keep the app inset.
SCROLL_PORT_CONTEXT
const SCROLL_PORT_CONTEXT: unique symbol;Defined in: apps/website/.api-docs-entry/ui/build/layout/layout.shared.d.ts:66
Set by every Scroll for its subtree: the nearest element that scrolls vertically. An x-only
reel forwards its parent's, so a virtual list in a lane of a horizontal board still finds the
lane.