Modal Examples

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';
import 'package:universal_web/web.dart' show HTMLDialogElement, document;

/// Helper to open the modal via JS interop.
void _showModal(String id) {
  (document.getElementById(id) as HTMLDialogElement?)?.showModal();
}

class MyModalComponent extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return Component.fragment([
      // Button to trigger the modal
      Button(
        [text('open modal')],
        onClick: (_) => _showModal('my_modal_1'),
      ),
      // The Modal component
      Modal(
        [
          ModalBox([
            h3(classes: 'font-bold text-lg', [text('Hello!')]),
            p(classes: 'py-4', [text('Press ESC key...')]),
            ModalAction([
              form(attributes: {'method': 'dialog'}, [
                // This allows the form to close the dialog natively.
                Button([text('Close')], isNativeSubmit: true),
              ]),
            ]),
          ]),
        ],
        tag: 'dialog',
        id: 'my_modal_1',
      )
    ]);
  }
}

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';

// ... (requires a trigger Button and _showModal helper)

Modal(
  [
    ModalBox([
      h3(classes: 'font-bold text-lg', [text('Hello!')]),
      p(classes: 'py-4', [text('Press ESC key or click outside to close')]),
    ]),
    // The form itself is the backdrop. The button inside makes it functional.
    form(
      attributes: {'method': 'dialog'},
      classes: 'modal-backdrop',
      [button([text('close')])],
    ),
  ],
  tag: 'dialog',
  id: 'my_modal_2',
)

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';

// ... (requires a trigger Button and _showModal helper)

Modal(
  [
    ModalBox([
      form(attributes: {'method': 'dialog'}, [
        Button(
          [Icon('close')],
          isNativeSubmit: true,
          style: [Button.sm, Button.circle, Button.ghost],
          classes: 'absolute right-2 top-2',
        ),
      ]),
      h3(classes: 'font-bold text-lg', [text('Hello!')]),
      p(classes: 'py-4', [text('Press ESC key...')]),
    ]),
  ],
  tag: 'dialog',
  id: 'my_modal_3',
)

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';

// ... (requires a trigger Button and _showModal helper)

Modal(
  [
    ModalBox(
      [
        h3(classes: 'font-bold text-lg', [text('Hello!')]),
        p(classes: 'py-4', [text('Click the button below to close')]),
        ModalAction([
          form(attributes: {'method': 'dialog'}, [
            Button([text('Close')], isNativeSubmit: true),
          ]),
        ]),
      ],
      style: [Size.w11_12, Size.maxW5xl],
    ),
  ],
  tag: 'dialog',
  id: 'my_modal_4',
)

import 'package:deepyr/deepyr.dart';
import 'package:jaspr/jaspr.dart';

// ... (requires a trigger Button and _showModal helper)

Modal(
  [
    ModalBox([/* ...content... */]),
  ],
  tag: 'dialog',
  id: 'my_modal_5',
  style: [
    Modal.bottom,                      // Default for mobile
    Modal.middle.at(Breakpoint.sm), // Middle for sm screens and up
  ],
)