How it works › Toolbar presets
Toolbar presets
The one-row bar: the view selector, a query bar, Filter and Display, with everything else inside Display. Zach's pick was the mix of the proposals ("Definitely yes I like the mix"), with the differences between apps kept as presets: each preset is two attributes on the same element.
The bar and its presets toolbar="bar"
Liverobotparts' 1,149 actuators under toolbar="bar". Pick a preset above: the element redraws its bar and keeps its view, its filters, its query and its selection. Type brand: in the query bar, tick a few rows, open Display.
The live view starts when it scrolls into sight.
- type: table
name: Rows
order: [model, brand, form, drivetrain, peak_torque, rated_torque, mass, price, buses]
sort:
- { property: peak_torque, direction: DESC }From the example The bar: data-ui's toolbar · every attribute is read live (CONTRACT §15)
<data-views src="views.base" toolbar="bar" views="auto" filters="pills" display="panel" selectable></data-views>The presets
| Preset | Attributes | On the bar |
|---|---|---|
| Mix (default) | toolbar="bar" views="auto" | the views decide (auto): tabs, the ones that do not fit in "N more…"; with filters set, only Filter is promoted |
| Shopify | toolbar="bar" views="dropdown" promote="" | three elements: the view chip, the search, Display |
| Notion | toolbar="bar" views="tabs" promote="" | the view tabs (overflow into "N more…"), the search, Display |
| Obsidian | toolbar="bar" views="dropdown" promote="sort group filter properties" | the chip, then Sort · Group · Filter · Properties as words that say what is set |
The gallery has each one as its own example, with the rest of the bar's attributes: the mix (filters="pills rail": the one Filter button shows and hides the rail), Shopify (display="popover"), Notion and Obsidian.
The attributes
| Attribute | Values (default first) | Does |
|---|---|---|
toolbar | full | bar | compact | none | bar is the one-row chrome; full stays the default and draws what it drew. |
views | auto | dropdown | tabs | The view selector: one chip with Bases' view menu, every view as a tab, or tabs while they fit (re-decided on resize). |
promote | a set of sort group filter properties | Which of Display's sections also sit on the bar, in that order; "" promotes none. Absent: filters="expanded" promotes all four, any other filters promotes Filter, else the views decide (tabs ⇒ Filter, the chip ⇒ all four). |
filters | pills, expanded, query-tokens, rail | How the one all-views filter shows: removable pills under the bar, tokens in the query bar, a Filter button that shows and hides the linked rail. |
display | panel | popover | Where View settings opens: a resizable side panel inside the element, or a popover on the button. |
selectable | absent | present | A checkbox per row (shift-click a range, ctrl/cmd-click one); the bulk band lies over the header with "N selected", the actions and Show only selected. |
labels | auto | icons | auto drops the tools' labels first as the bar narrows, before anything moves into "…". |
query | text | The query bar's text, parsed as typing is; read back el.queryText. |
How it behaves
- One row, always. As the bar narrows, labels drop to icons, controls move into "…", the search folds to an icon and the tabs fold to the chip, in that order. The view selector and Display never leave the row.
- The query bar.
/focuses it.brand:steadywin,-form:servo,peak_torque:>10,price:50..150,has:photoand any Bases expression in parentheses become filter clauses, the same ones the rail writes; other words are a free-text search. It suggests properties, operators and values with their counts. - Selection and bulk actions.
selectableadds a checkbox per row; the bulk band shows "N selected", the actions (compare, copy ids, export CSV, the host's own throughel.actions) and "Show only selected". - Display holds everything: layout, frame, property visibility, filter, sort, group and roll up; a promoted control is the same control, never a second one.
Comes from docs/CONTRACT.md §15 and its notes, and docs/peps/0002-toolbar.md in docs/.