box

box(opts?): void

Defined in: components/box.ts:56

A surface container — the workhorse layout primitive. Has an optional styled header and footer, and a padded body that holds ContentOptions.content.

The body gets default padding and matching gap; add display:flex via contentAttrs if you want its children laid out as a flex container.

Shortcut: pass a function to use it directly as the body content.

Parameters

opts?

Slot | BoxOptions

Returns

void

Example

const $user = A.proxy({name: "Kvothe"});
S.box({ header: "Profile", contentAttrs: "display:flex flex-direction:column", content: () => {
  S.textline({ label: "Name", bind: A.ref($user, "name") });
}});
S.box(() => A("p#Just some content"));   // shorthand