Widgets

Overlays

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

In the admin: Design form › Widgets › Overlays

Widget
Modal, Slideover, Drawer	content that opens over the page, by a button or by code: Sign, then the signature pad in a modal
Popover, Tooltip	small content anchored to a trigger
Dropdown menu	a menu whose items run functions of the Code

UModal · Nuxt UI

A dialog over the page.

Props

Prop	Code	Takes
Size	`size`	`sm`, `md`, `lg`, `xl`	Its width, from sm to xl - unset, Nuxt UI's own.
Fullscreen	`fullscreen`		Covers the whole screen.
Close on outside click	`dismissible`		Closes when the viewer clicks outside it.
Close button	`close`		An ✕ in its corner that closes it.
Scroll the whole modal	`scrollable`		The whole modal scrolls, not only its body.

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

Slots

Slot	Code
Header	`header`	edited in its own canvas
Body	`body`	edited in its own canvas
Footer	`footer`	edited in its own canvas

Events

Event	Code	Receives
Opened / closed	`update:open`	{ open }
Closed (after its animation)	`after:leave`

Methods

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

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

Example

{
  "widget": "UModal",
  "name": "signModal",
  "props": {
    "title": "Customer's signature"
  },
  "children": [
    {
      "widget": "TSignature",
      "name": "signature",
      "bindings": {
        "modelValue": {
          "variable": "signature"
        }
      }
    },
    {
      "widget": "UButton",
      "slot": "footer",
      "props": {
        "label": "Accept"
      },
      "emits": {
        "click": "onAcceptSignature"
      }
    }
  ]
}

Slideover

USlideover · Nuxt UI

A panel sliding in from an edge.

Props

Prop	Code	Takes
Side	`side`	`right`, `left`, `top`, `bottom`
Size	`size`	`sm`, `md`, `lg`, `xl`	Its width, from sm to xl - unset, Nuxt UI's own.
Inset	`inset`		Floats with a margin from the edge of the screen.
Close on outside click	`dismissible`		Closes when the viewer clicks outside it.
Close button	`close`		An ✕ in its corner that closes it.

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

Slots

Slot	Code
Header	`header`	edited in its own canvas
Body	`body`	edited in its own canvas
Footer	`footer`	edited in its own canvas

Events

Event	Code	Receives
Opened / closed	`update:open`	{ open }
Closed (after its animation)	`after:leave`

Methods

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

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

Drawer

TDrawer · TotalBase

A panel rising from the bottom - TotalBase's own drawer, for working on something with room.

Props

Prop	Code	Takes
Size	`size`	`sm`, `md`, `lg`, `xl`	Its width, from sm to xl - lg by default, as every drawer in TotalBase.
Expand button	`expandable`	default `true`	A button that grows it to almost the whole screen.
Open expanded	`startExpanded`		Opens at almost the whole screen - for content that needs the room.

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

Slots

Slot	Code
Body	`body`	edited in its own canvas
Footer	`footer`	edited in its own canvas

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

UPopover · Nuxt UI

A small panel anchored to its trigger.

Props

Prop	Code	Takes
Opens on	`mode`	`click`, `hover`
Arrow	`arrow`		A small arrow pointing at what opened it.

Slots

Slot	Code
Trigger	`default`	edited in place
Content	`content`	edited in its own canvas

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

UTooltip · Nuxt UI

A hint shown over its content on hover.

Props

Prop	Code	Takes
Arrow	`arrow`		A small arrow pointing at what opened it.

Also: Text text (ƒ).

Slots

Slot	Code
Content	`default`	edited in place

UDropdownMenu · Nuxt UI

A menu of actions under its trigger - each item runs a Code function.

Props

Prop	Code	Takes
Items	`items`		Each runs its Code function - Cancel off once it's paid, Delete only for some: a formula over the page.
Size	`size`	`xs`, `sm`, `md`, `lg`, `xl`	From xs to xl - Default is md.
Disabled	`disabled`	ƒ	Shown greyed out - it can't be used.

Slots

Slot	Code
Trigger	`default`	edited in place

Events

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

Next steps

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

Layout

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

Actions

The Button, and how a page tells the user what happened.