Dialog — usage examples

Dialog ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Dialog } from '@rozie-ui/dialog-react';

export function Demo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open dialog</button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        ariaLabelledby="confirm-title"
        onClose={(e) => console.log('closed:', e.reason)}
      >
        <h2 id="confirm-title">Delete file?</h2>
        <p>This cannot be undone.</p>
        <button onClick={() => setOpen(false)}>Cancel</button>
        <button onClick={() => setOpen(false)}>Delete</button>
      </Dialog>
    </>
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Dialog from '@rozie-ui/dialog-vue';

const open = ref(false);
function onClose(e: { reason: 'backdrop' | 'escape' | 'programmatic' }) {
  console.log('closed:', e.reason);
}
</script>

<template>
  <button @click="open = true">Open dialog</button>

  <Dialog v-model:open="open" aria-labelledby="confirm-title" @close="onClose">
    <h2 id="confirm-title">Delete file?</h2>
    <p>This cannot be undone.</p>
    <button @click="open = false">Cancel</button>
    <button @click="open = false">Delete</button>
  </Dialog>
</template>

svelte

<script lang="ts">
  import Dialog from '@rozie-ui/dialog-svelte';

  let open = $state(false);
</script>

<button onclick={() => (open = true)}>Open dialog</button>

<Dialog
  bind:open
  ariaLabelledby="confirm-title"
  onclose={(e) => console.log('closed:', e.reason)}
>
  <h2 id="confirm-title">Delete file?</h2>
  <p>This cannot be undone.</p>
  <button onclick={() => (open = false)}>Cancel</button>
  <button onclick={() => (open = false)}>Delete</button>
</Dialog>

import { Component } from '@angular/core';
import { Dialog } from '@rozie-ui/dialog-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Dialog],
  template: `
    <button (click)="open = true">Open dialog</button>

    <Dialog [(open)]="open" ariaLabelledby="confirm-title" (close)="onClose($event)">
      <h2 id="confirm-title">Delete file?</h2>
      <p>This cannot be undone.</p>
      <button (click)="open = false">Cancel</button>
      <button (click)="open = false">Delete</button>
    </Dialog>
  `,
})
export class DemoComponent {
  open = false;
  onClose(e: { reason: 'backdrop' | 'escape' | 'programmatic' }) {
    console.log('closed:', e.reason);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Dialog } from '@rozie-ui/dialog-solid';

export function Demo() {
  const [open, setOpen] = createSignal(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open dialog</button>
      <Dialog
        open={open()}
        onOpenChange={setOpen}
        ariaLabelledby="confirm-title"
        onClose={(e) => console.log('closed:', e.reason)}
      >
        <h2 id="confirm-title">Delete file?</h2>
        <p>This cannot be undone.</p>
        <button onClick={() => setOpen(false)}>Cancel</button>
        <button onClick={() => setOpen(false)}>Delete</button>
      </Dialog>
    </>
  );
}

import '@rozie-ui/dialog-lit';

// <rozie-dialog> is a custom element. Put the dialog content in its light DOM,
// bind `open` as a property (true → showModal()), listen for `open-change` to
// receive the two-way value, and `close` for the dismiss reason.
const el = document.querySelector('rozie-dialog');
el.setAttribute('aria-labelledby', 'confirm-title');
el.open = true;
el.addEventListener('open-change', (e) => {
  el.open = e.detail;
});
el.addEventListener('close', (e) => {
  console.log('closed:', e.detail.reason);
});

Imperative handle

Beyond props and events, Dialog exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Dialog, type DialogHandle } from '@rozie-ui/dialog-react';

const dialog = useRef<DialogHandle>(null);
// <Dialog ref={dialog} ...>…</Dialog>
dialog.current?.show();
dialog.current?.hide();

vue

<script setup>
import { ref } from 'vue';
const dialog = ref();          // template ref
</script>

<template>
  <Dialog ref="dialog" v-model:open="open"><!-- … --></Dialog>
  <button @click="dialog.show()">Open</button>
  <button @click="dialog.hide()">Close</button>
</template>

svelte

<script>
  let dialog;                  // component instance via bind:this
</script>

<Dialog bind:this={dialog} bind:open><!-- … --></Dialog>
<button onclick={() => dialog.show()}>Open</button>
<button onclick={() => dialog.hide()}>Close</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Dialog) dialog!: Dialog;   // or the viewChild() signal
  openIt() { this.dialog.show(); }
  closeIt() { this.dialog.hide(); }
}

tsx

import { Dialog, type DialogHandle } from '@rozie-ui/dialog-solid';

let handle: DialogHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Dialog ref={(h) => (handle = h)} open={open()}>…</Dialog>;
handle?.show();
handle?.hide();

// The custom element IS the handle — exposed methods are public element
// methods. show() opens via showModal(); hide() closes + emits `close`.
const el = document.querySelector('rozie-dialog');
el.show();
el.hide();

Dialog — usage examples ​

Usage ​

Imperative handle ​

See also ​

Dialog — usage examples

Usage

Imperative handle

See also