Dowe Views Documentation

OVERLAY

Modal

Modal combines Card surface rules with Drawer's close control so one bool Signal produces the same focused task on web, Android, and iOS.

On compact viewports, the generated panel stays within 95% of the available overlay width on every target.

PLAYGROUND

A focused profile review

Open the dialog to inspect its optional header and footer, Card-resolved surface, Drawer close control, overlay, and explicit close action.

signal profileModalOpen value:false

fn openProfileModal
  set profileModalOpen value:true

fn closeProfileModal
  set profileModalOpen value:false

Button onClick:openProfileModal
  "Review profile"

Modal open:profileModalOpen onClose:closeProfileModal
  header
    Title size:"xl"
      "Review profile"
  Text
    "Confirm that this profile is ready to appear in the directory."
  footer
    Button onClick:closeProfileModal
      "Confirm"

STRUCTURE

Body content with optional edges

The body is required. Add header for a title or context, and footer for persistent actions that stay grouped at the bottom of the dialog.

HEADER

Optional context

Use header for the dialog title, status, or compact context that people need before reading the body.

BODY

Required content

Place the task, explanation, form controls, or supporting information directly inside Modal.

FOOTER

Optional actions

Use footer for close, cancel, confirm, or other declared actions that complete the focused task.

CLOSE BEHAVIOR

Choose the available exit paths

By default, the generated close control and a click on the overlay close the dialog. Keep a visible action in the footer when the task must make its exit explicit.

Standard close behavior

The overlay and generated Drawer-style SVG control dismiss this dialog, and onClose invokes the declared function after the open Signal changes.

Explicit decision

Disable overlay close and hide the generated close control when the footer must be the visible route out of the dialog.

Modal open:publishOpen disableOverlayClose:true hideCloseButton:true
  header
    Title
      "Publish changes?"
  Text
    "The footer provides the visible actions for this decision."
  footer
    Button onClick:closePublish variant:"ghost" scheme:"muted"
      "Cancel"
    Button onClick:publish scheme:"warning"
      "Publish"

VARIANTS AND SCHEMES

Keep the dialog aligned with its context

Modal resolves solid, soft, outlined, and ghost exactly like Card. Outlined keeps a readable neutral surface with the selected scheme on its border; the default scheme remains surface.

Modal open:detailsOpen
  Text
    "Default dialog surface"

Modal open:noticeOpen variant:"soft" scheme:"info"
  Text
    "Informational dialog"

Modal open:reviewOpen variant:"outlined" scheme:"warning"
  Text
    "Review before continuing"

Modal open:removeOpen variant:"ghost" scheme:"danger"
  Text
    "Destructive context"

TARGET BEHAVIOR

One dialog contract, target-owned presentation

The same source stays signal-driven on every target while Dowe generates the appropriate overlay surface and close behavior.

WEB

Fixed dialog overlay

Generated web output uses the shared Card surface, 560-unit panel metrics, Drawer SVG close control, Escape handling, and reactive Signal updates.

ANDROID

Dowe popup dialog

Compose and the Android development launcher use the same Card colors and border, panel metrics, and Drawer close geometry.

IOS

Window presenter

SwiftUI mounts the same Card surface, metrics, and Drawer close SVG through a Dowe-owned window presenter.

API

Props and regions

Modal also accepts the applicable common spacing, sizing, border, radius, visibility, and style props. Use scheme, not color, to select its design family.

Prop or region	Type	Default
No data There are no records to display

No data