Pyro

Appearance

Dialog ​

RC 1Kb
js
import 'pyro/dialog'
Preview Code Stackblitz
[..content]

Open me

Usage ​

html
<pyro-dialog>
  <div slot="content">[..content]</div>
  <p slot="action"><pyro-button primary>Open me</pyro-button></p>
</pyro-dialog>

Variations ​

Props ​

ts
interface DialogProps {
  /** Indicates whether the dialog is open */
  open?: boolean;
  /** Contents */
  children?: any;
}

Slots ​

ts
/**
 * @slot - Contents of the dialog
 * @slot content - Main content of the dialog
 * @slot action - Header content, prefers <footer>
 */

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-dialog-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-dialog-surface-color = --pyro-surface-color} - `background`
 * @prop {--pyro-dialog-border = --pyro-border} - `border`
 * @prop {--pyro-dialog-border-radius = --pyro-border-radius} - `border`
 * @prop {--pyro-dialog-spacing = --pyro-spacing-l} - `padding`
 */