Widgets

Display

Text, images, tables, badges and the other widgets that show the page's data.

In the admin: Design form › Widgets › Display

Widget
Heading, Text	titles and text, which can be formulas: Total: $ 1,540,000
Image	an image uploaded in the designer (a public file), a file of the record, or an https URL
Table	rows of a variable, with search, paging, computed columns, row colors and row actions
Badge, Alert, Progress, Separator, Icon, Avatar, User, Empty state	small pieces of display
QR code	draws a value as a QR code, in the browser
Result	a large panel with an outcome at a glance, with a sound: a kiosk's Welcome or Denied

Image

An image uploaded in the designer is a public file: anyone with its address can see it. Use it for a logo or an illustration, never for private data.

TImage · TotalBase

An image - one uploaded here, a file of the record () or a URL; with its caption, an icon or a text when there's none, and Clicked to use it as a button.

Props

Prop	Code	Takes
Image	`src`	ƒ	A file's id or an https URL. Uploaded here, it's a public file - anyone who opens the page sees it. A formula: a file column of the record, .
Alternative text	`alt`	ƒ	What it shows, for a screen reader - and if it can't load.
Caption	`caption`	ƒ	A line under it.
Shape	`aspect`	`original`, `1:1`, `3:4`, `4:3`, `16:9`; default `original`	original keeps the image's own shape; a ratio frames it.
Fit	`fit`	`cover`, `contain`; default `contain`	In a frame: contain shows all of it; cover fills it, cropping.
Height	`height`		In pixels - unset: its width and shape decide.
Largest width	`maxWidth`		In pixels - unset: the field's width.
Corners	`corners`	`none`, `sm`, `md`, `lg`, `xl`, `full`; default `md`	How round the image's corners are - full: a circle (or a pill). The Style tab's Radius rounds its box.
Icon when empty	`emptyIcon`		Shown when there's no image - unset: a picture icon.
Text when empty	`emptyText`	ƒ	A line beside that icon.

Events

Event	Code	Receives
Clicked	`click`	- the image clicked or tapped (it then reads as a button)

Prop	Code	Takes
Level	`level`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`

Text

TText · TotalBase

A paragraph - its content can be a formula.

QR code

TQrCode · TotalBase

A QR code of a value - drawn in the browser, never sent anywhere: a device's pairing code, a link. Empty, it says so instead of an unreadable code.

Props

Prop	Code	Takes
Value	`value`	ƒ	What the code holds - a formula: , or a JSON or a URL with it.
Size	`size`		Its side in pixels (default 200).
Error correction	`errorCorrection`	`L`, `M`, `Q`, `H`	How much of it may be lost and still read - L 7 %, M 15 % (default), Q 25 %, H 30 %; more makes it denser.
Caption	`caption`	ƒ	Text under it - the code itself, to type it when it can't be scanned.
Download button	`download`		A button to save it as an SVG, or print it.

A large panel for an outcome at a glance - a color, an icon, a title and a description, with a tone and a vibration - shown by the page's Code with dataview.controls..show({ color, icon, title, description, sound, resetAfter }); it goes back to its waiting state on its own after Reset after seconds. A kiosk's answer to a scan.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
Waiting title	`idleTitle`	ƒ	What it says while waiting for a result - unset: Ready.
Waiting description	`idleDescription`	ƒ	A line under it while waiting - e.g. Scan your code.
Waiting icon	`idleIcon`	ƒ	Its icon while waiting - unset: a scan frame.
Waiting color	`idleColor`	ƒ; default `neutral`	Its color while waiting - one of the theme's colors.
Reset after	`resetAfter`	ƒ; default `5`	Seconds a result stays before it goes back to waiting - 0: until the next one or reset(). show({ resetAfter }) may change it for one result.
Variant	`variant`	ƒ; `solid`, `outline`, `soft`, `subtle`; default `solid`	How a result fills the panel: solid, outline, soft or subtle. Waiting, it is always soft.
Size	`size`	`md`, `lg`, `xl`; default `lg`	Its icon and text, from md to xl.
Sound	`sound`	default `true`	A tone with each result - a rising one for success, a low one for error and warning; show({ sound: "success" \| "error" \| false }) may choose.
Vibrate	`vibrate`	default `true`	A vibration with each result, where the device can - longer for an error.

Events

Event	Code	Receives
Back to waiting	`reset`	- it shows its waiting state again (Reset after, or reset())

Methods

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

Method	Code
Show	`show()`	Shows a result: show({ color, icon, title, description, sound, resetAfter })
Reset	`reset()`	Goes back to waiting at once

Example

{
  "widget": "TResult",
  "name": "result",
  "props": {
    "idleTitle": "Scan your card",
    "resetAfter": 5,
    "size": "xl"
  }
}

Table

Over a Resource of a table, a foreign key shows as its table's row presentation, as in a DataView grid, read under the viewer's own permissions.

UTable · Nuxt UI

Rows of a Resource - its columns are the Resource's fields.

Height: rows of 40 px, or Fill height · When placed: asks for its data source

Props

Prop	Code	Takes
Columns	`columnSettings`		Each column's title, format and look - what isn't set comes from its resource's column. In its Rows' order; a hidden one still comes with Row clicked's row.
Computed columns	`computedColumns`		A formula per row - * - shown after its Rows' fields; its look in Columns. A total that must add up belongs in PostgreSQL.
Row color	`rowColorKey`	per option	Tints each row - a field holding a palette color (red, green...), or a formula: ? "red" : "".
Row actions	`actions`		Icon buttons at the end of each row - Action clicked tells which by its Name; each may be off or hidden by a formula per row.
Sticky header	`sticky`		The column titles stay in view while scrolling.
Search	`search`		A search box over its Rows' Resource - the server searches its text fields.
Full-width search	`searchBlock`		The search box as wide as the table - in a modal or a sidebar.
Pager	`pager`		Pages through its Rows' Resource on the server - its limit is the page size; with Count the total, too.
Loading	`loading`	ƒ	Shows a spinner while something is busy.

Also: Rows data (a Resource), Empty text empty (ƒ).

Slots

Slot	Code
Empty	`empty`	edited in its own canvas

Events

Event	Code	Receives
Row clicked	`select`	{ row }
Action clicked	`action`	{ action, row } - `action` is the clicked button's Name
Search Enter	`searchEnter`	{ search, rows, row } - the rows its search found, `row` the first (null when none)

Example

{
  "widget": "UTable",
  "name": "unassigned",
  "height": 8,
  "props": {
    "search": true,
    "pager": true
  },
  "bindings": {
    "data": {
      "variable": "unassignedOrders"
    }
  },
  "emits": {
    "select": "onOrderSelect"
  }
}

Badge

UBadge · Nuxt UI

A short label.

Props

Prop	Code	Takes
Color	`color`	ƒ	One of the theme's colors - primary, error, success...
Variant	`variant`	ƒ; `solid`, `outline`, `soft`, `subtle`	Its style: filled, outlined, soft...
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.
Icon	`icon`	ƒ	An icon at its start.
Square	`square`		As wide as it is tall - for an icon alone.

Also: Label label (ƒ).

Alert

UAlert · Nuxt UI

A message with a title and a description.

Props

Prop	Code	Takes
Icon	`icon`	ƒ	An icon at its start.
Color	`color`	ƒ	One of the theme's colors - primary, error, success...
Variant	`variant`	ƒ; `solid`, `outline`, `soft`, `subtle`	Its style: filled, outlined, soft...
Orientation	`orientation`	`horizontal`, `vertical`	Laid out in a row or in a column.
Close button	`close`		An ✕ in its corner that closes it.

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

Slots

Slot	Code
Actions	`actions`	edited in place

Events

Event	Code	Receives
Closed	`update:open`	{ open }

Separator

USeparator · Nuxt UI

A rule between sections, with an optional label.

Props

Prop	Code	Takes
Icon	`icon`	ƒ	An icon at its start.
Color	`color`	ƒ	One of the theme's colors - primary, error, success...
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.
Line	`type`	`solid`, `dashed`, `dotted`
Orientation	`orientation`	`horizontal`, `vertical`	Laid out in a row or in a column.

Also: Label label (ƒ).

Progress

UProgress · Nuxt UI

A progress bar.

Props

Prop	Code	Takes
Show the value	`status`		Shows the value as a number beside the bar.
Color	`color`	ƒ	One of the theme's colors - primary, error, success...
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.

Also: Value modelValue (ƒ), Max max (ƒ).

Avatar

UAvatar · Nuxt UI

An image, initials or an icon in a circle.

Props

Prop	Code	Takes
Icon	`icon`	ƒ	An icon at its start.
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.

Also: Image src (ƒ), Alternative text alt (ƒ), Initials text (ƒ).

User

UUser · Nuxt UI

A name and a description beside an avatar.

Props

Prop	Code	Takes
Image	`avatar`	ƒ	Its avatar's image URL - empty shows the name's initials.
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.

Also: Name name (ƒ), Description description (ƒ).

Events

Event	Code	Receives
Click	`click`

Empty state

UEmpty · Nuxt UI

An icon, a title and a description for "nothing here yet".

Props

Prop	Code	Takes
Icon	`icon`	ƒ	An icon at its start.
Loading	`loading`	ƒ	Shows a spinner while something is busy.
Variant	`variant`	ƒ; `solid`, `outline`, `soft`, `subtle`, `naked`	Its style: filled, outlined, soft...
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.

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

Slots

Slot	Code
Actions	`actions`	edited in place

Icon

UIcon · Nuxt UI

A single icon.

Props

Prop	Code	Takes
Icon	`name`	ƒ	The icon to show.

Next steps

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

Inputs

Every input: text, numbers, dates, choices, files, maps and the device's camera, position and signature.

Embeds

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