Modal constructor

Modal({
  1. required String title,
  2. required HTMLElement body,
  3. List<HTMLElement> actions = const [],
})

Builds a modal titled title containing body, with optional footer actions.

Implementation

Modal({
  required String title,
  required web.HTMLElement body,
  List<web.HTMLElement> actions = const [],
}) {
  final dialog = el(
    'div',
    classes: 'modal',
    role: 'dialog',
    attrs: {'aria-modal': 'true', 'aria-label': title},
    children: [
      el(
        'div',
        classes: 'modal-head',
        children: [
          el('h2', text: title),
          button(
            '✕',
            className: 'icon ghost',
            ariaLabel: 'Close',
            onClick: close,
          ),
        ],
      ),
      el('div', classes: 'modal-body', children: [body]),
      if (actions.isNotEmpty)
        el('div', classes: 'modal-foot', children: actions),
    ],
  );
  _overlay = el(
    'div',
    classes: 'modal-overlay',
    onClick: (event) {
      if (event.target == _overlay) close();
    },
    children: [dialog],
  );
}