Components
Layout & containers
The blocks that arrange other blocks on a page — grids, stacks, cards, tabs, guards and placeholders.
Layout blocks render no data of their own. They arrange other blocks — the forms, tables and charts & widgets of a page — into a screen. You nest them with .child() (Block fundamentals), and each nested position keeps its own permission.
Grid Connecting to the DMS preview…
Pick a container
| Block | Use it to | Page |
|---|---|---|
Grid + GridRow | Lay blocks out in responsive rows and columns — the dashboard grid. | Grid |
HStack / VStack / Spacer | Line blocks up in a row or a column: toolbars, side-by-side panels. | Stacks |
PageToolbar | Start a page with a period or live data: its scope, the last update, Live / Pause and the period, the same on every page. | Page toolbar |
Card | Frame several blocks under one titled head, with head actions and a footer. | Card |
Tab | Show one panel at a time, each panel holding its own blocks. | Tabs |
Guard | Replace a group of blocks with one empty state when a route says there is nothing. | Guard |
Placeholder | Block out a layout before the real blocks exist. | Placeholder |
For settings screens, Section and FieldRow are containers too.
Compose a screen
Containers nest freely. Here a Grid row splits a page into a file list and a tabbed detail panel, each blocked out with a Placeholder until its real block exists:
src/pages/workspace.ts
import { Grid, GridRow } from "@antelopejs/interface-dms/base/grid";
import { Placeholder } from "@antelopejs/interface-dms/base/placeholder";
import { Tab } from "@antelopejs/interface-dms/base/tab";
static layout = Grid({ gap: "1rem" }).child(
"main",
GridRow()
.child("files", Placeholder({ label: "Files" }))
.child(
"detail",
Tab({
items: [
{ label: "Overview", icon: "i-ph-info", slot: "overview" },
{ label: "Settings", icon: "i-ph-gear", slot: "settings" },
],
})
.child("overview", Placeholder({ label: "Overview" }), { slot: "overview" })
.child("settings", Placeholder({ label: "Settings" }), { slot: "settings" }),
),
);
A role needs every level it should render. Granting
layout alone does not show layout.main.files: each nested id is its own line in the roles editor.