Widgets

Layout

Cards, boxes, tabs and the other widgets that arrange the rest.

In the admin: Design form › Widgets › Layout

Widget
Card, Box	group widgets; a Card with a header and a footer
Tabs, Accordion, Collapsible	content that opens and closes
Splitter	resizable panels side by side (stacked on a phone)
Scroll area	a fixed-height area that scrolls

Card

UCard · Nuxt UI

A framed section with a header and a footer.

Height: its content, or Fill height

Props

Prop	Code	Takes
Variant	`variant`	ƒ; `solid`, `outline`, `soft`, `subtle`	Its style: filled, outlined, soft...

Also: Title title (ƒ), Description description (ƒ).

Slots

Slot	Code
Header	`header`	edited in place
Body	`default`	edited in place
Footer	`footer`	edited in place

Example

{
  "widget": "UCard",
  "props": {
    "title": "Check-in"
  },
  "children": [
    {
      "widget": "TGeolocation",
      "bindings": {
        "modelValue": {
          "variable": "checkIn"
        }
      }
    },
    {
      "widget": "UButton",
      "slot": "footer",
      "props": {
        "label": "Start work"
      },
      "emits": {
        "click": "onStartClick"
      }
    }
  ]
}

Box

TBox · TotalBase

A plain area grouping widgets - no frame of its own: its look is its Style (padding, border, background, radius).

Height: its content, or Fill height

Slots

Slot	Code
Content	`default`	edited in place

Tabs

UTabs · Nuxt UI

Sections one at a time, under a tab strip.

Props

Prop	Code	Takes
Tabs	`items`		Its label may be a formula - "Items (" + + ")"; one off until a customer is picked, another shown only to some.
Open tab	`modelValue`	a Value	A Value holding the open tab's key - set it from Code to switch tabs; empty opens the first.
Color	`color`	ƒ	One of the theme's colors - primary, error, success...
Variant	`variant`	ƒ; `pill`, `link`	Its style: filled, outlined, soft...
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.
Orientation	`orientation`	`horizontal`, `vertical`	Laid out in a row or in a column.

Slots

Slot	Code
Tab content	`content`	edited in place; one per item; its widgets read `{{slot.item}}`, `{{slot.index}}`

Events

Event	Code	Receives
Tab changed	`update:modelValue`	{ value }

Accordion

UAccordion · Nuxt UI

Sections that expand one (or several) at a time.

Props

Prop	Code	Takes
Sections	`items`		Its label may be a formula; one off or hidden by a formula over the page.
Open sections	`modelValue`	a Value	A Value holding the open section's key - a list of them with Open: multiple. Set it from Code to open one.
Open	`type`	`single`, `multiple`
Disabled	`disabled`	ƒ	Shown greyed out - it can't be used.

Slots

Slot	Code
Section body	`body`	edited in place; one per item; its widgets read `{{slot.item}}`, `{{slot.index}}`

Events

Event	Code	Receives
Section toggled	`update:modelValue`	{ value }

Collapsible

UCollapsible · Nuxt UI

A trigger that shows or hides its content.

Props

Prop	Code	Takes
Open at first	`defaultOpen`		Starts expanded.
Disabled	`disabled`	ƒ	Shown greyed out - it can't be used.

Slots

Slot	Code
Trigger	`default`	edited in place
Content	`content`	edited in place

Events

Event	Code	Receives
Opened / closed	`update:open`	{ open }

Methods

Called from Code as dataview.controls.<name>.<method>().

Method	Code
Open	`open()`	Opens it
Close	`close()`	Closes it

Splitter

USplitter · Nuxt UI

Panels side by side, or one above the other - the viewer drags what's between them; each panel scrolls on its own.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
Panels	`items`		One per panel - its label names it on the canvas; its size and minimum in % of the whole, the sizes summing to 100 (changing one reshares the rest); Collapsible lets the viewer drag it shut.
Orientation	`orientation`	`horizontal`, `vertical`	Laid out in a row or in a column.
Locked	`disabled`		The panels keep their sizes - nothing to drag.

Slots

Slot	Code
Panel	`panel`	edited in place; one per item; its widgets read `{{slot.item}}`, `{{slot.index}}`

Scroll area

UScrollArea · Nuxt UI

A box with its own height that scrolls what it holds - its look from the Style tab.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
Orientation	`orientation`	`horizontal`, `vertical`	Laid out in a row or in a column.
Edge shadows	`shadow`		A fade at the edges while there's more to scroll.

Slots

Slot	Code
Content	`default`	edited in place

Next steps

Widgets: how a widget works, and every one of them.
Variables: what widgets show and change.

Embeds

Another DataView, a dashboard or another site's page, inside a page.

Overlays

Modals, slideovers, drawers, popovers, tooltips and dropdown menus.