How it works › Frames
Frames
How a <data-views> sits in its page. Zach, on robotparts.dev: "I don't like how the table and gallery seem like separate components… caused by the additional border." One attribute, frame, and nothing changes unless a host sets it.
One element, six frames
LiveThe GIM4305 datasheet case with its whole toolbar. Pick a frame above: the element re-makes its view on the new scroller and keeps its view, filters and search.
The live view starts when it scrolls into sight.
- type: table
name: Datasheet
order: [field, nominal, measured, board, derived, unit, status, n, sources]
groupBy: { property: section }From the example GIM4305-10 datasheet
<data-views src="views.base" frame="boxed"></data-views>The six frames
frame | Border | Surface | Scrolls | Looks like |
|---|---|---|---|---|
boxed | 1 px box | header band | the box's own | today's look; the default |
flush | none | none | the box's own | no border, rules only |
tabs | none | none | the box's own | tabs as the page's nav, zebra rows |
sheet | none | tinted header and well | the box's own | pill tabs, white tiles on the tint |
page | none | none | the page's | a sticky band; scrolls with the page |
bleed | none | tinted sticky band | the page's | edge to edge across the column |
page and bleed scroll with the page
The element is as tall as its rows and the nearest scrolling ancestor (else the window) scrolls them. The band (tabs, toolbar, count) sticks to the top, the table's header sticks under it, a wide table's sideways scrollbar is pinned to the bottom, and the side peek is pinned to the visible box. Two optional host tokens: --data-sticky-top (the height of a host's own sticky header; this site sets 57 px) and --data-bleed (the side padding bleed reaches across).
Comes from docs/CONTRACT.md §12 (frame) in docs/.