GitHub

dialog.sheet

A panel from an edge of the screen, with the page still in view: a cart, the phone menu, a record’s details

Component

<Dialog>

Renders

<dialog>

Profile

UI

Comes from

starter
View as Markdown

Dialog intents

Example

Preview
<Dialog intent="dialog.sheet" open={open} onClose={close} label="Your cart">
  <Layout intent="layout.list">…</Layout>
  <Action intent="action.submit" verb="checkout">Check out</Action>
</Dialog>

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

  • If it is

    Use

  • A panel from an edge of the screen, with the page still in view: a cart, the phone menu, a record’s details

    dialog.sheet this page

  • A task that should take the user’s full attention

    dialog.task

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How dialog.sheet resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

  • surface.overlay

    Floats over a dimmed page and starts its own stack of surfaces

    surface-overlay m-auto rounded-lg border border-surface-border
shadow-xl backdrop:bg-black/50
  • dialog.sheet

    A panel from an edge of the screen, with the page still in view: a cart, the phone menu, a record’s details

    m-0 ml-auto h-dvh max-h-dvh w-[min(28rem,100%)] rounded-none p-6
Final classes
surface-overlay border border-surface-border shadow-xl
backdrop:bg-black/50 m-0 ml-auto h-dvh max-h-dvh
w-[min(28rem,100%)] rounded-none p-6
Definition
TS
'dialog.sheet': {
  kind: 'semantic',
  description: 'A panel from an edge of the screen, with the page still in view: a cart, the phone menu, a record’s details',
  refs: ['surface.overlay'],
  binding: {
    classes: 'm-0 ml-auto h-dvh max-h-dvh w-[min(28rem,100%)] rounded-none p-6',
  },
  notFor: [
    {
      context: 'a task that should take the user’s full attention',
      instead: 'dialog.task',
    },
  ],
},