ComponentsLayout
Container
Centered content container with max-width
Examples
Basic Container
Schema
import type { SchemaNode } from '@object-ui/types';
interface ContainerSchema {
type: 'container';
children: SchemaNode[];
// Max width constraint. `false` means NO maximum width, and it is rendered as
// an explicit `max-w-none` — it cancels a max-width inherited from elsewhere
// (the typography plugin's `prose`, for instance), which simply omitting the
// class would not do.
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
| '7xl' | 'full' | 'screen' | false; // default: 'xl'
centered?: boolean; // default: true
padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 16; // default: 4
className?: string;
}padding is a step on the container's spacing scale, and 0 means none. The twelve
steps are the ones the renderer maps to a padding class, so they are the only values
validation accepts: "padding": 9 or "padding": 20 is refused with the set named
(objectui#11424). Such a number used to pass validation and then render with no padding
at all, not even the default.