Modal constructor

Modal({
  1. required bool open,
  2. String? title,
  3. Object? child,
  4. List<Object?> children = const [],
  5. Object? actions,
  6. String size = 'md',
  7. String? className,
  8. Map<String, Object?> props = const {},
  9. Map<String, Object?> style = const {},
  10. DartStyle? dartStyle,
  11. void onClose(
    1. Object event
    )?,
})

Creates a modal dialog controlled by open.

Implementation

Modal({
  required bool open,
  String? title,
  Object? child,
  List<Object?> children = const [],
  Object? actions,
  String size = 'md',
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
  void Function(Object event)? onClose,
}) : super(
       'div',
       props: mergeComponentProps(
         {
           ...props,
           if (!open) 'hidden': true,
           'role': 'dialog',
           'aria-modal': 'true',
           if (title != null) 'aria-label': title,
         },
         className: className,
         defaultStyle: const {
           'position': 'fixed',
           'inset': 0,
           'z-index': 1000,
           'display': 'grid',
           'place-items': 'center',
           'padding': '20px',
           'background': 'rgba(16, 24, 40, 0.52)',
         },
         dartStyle: dartStyle,
         style: style,
       ),
       children: [
         FlintElement(
           'section',
           props: {
             'style': {
               'width': '100%',
               'max-width': _modalWidth(size),
               'border-radius': '8px',
               'background': '#ffffff',
               'box-shadow': '0 20px 40px rgba(16, 24, 40, 0.18)',
               'overflow': 'hidden',
             },
           },
           children: [
             if (title != null || onClose != null)
               FlintElement(
                 'header',
                 props: const {
                   'style': {
                     'display': 'flex',
                     'align-items': 'center',
                     'justify-content': 'space-between',
                     'gap': '12px',
                     'padding': '16px',
                     'border-bottom': '1px solid #e4e7ec',
                   },
                 },
                 children: [
                   if (title != null) FlintText(title),
                   if (onClose != null)
                     FlintElement(
                       'button',
                       props: {
                         'type': 'button',
                         'aria-label': 'Close',
                         'onClick': onClose,
                       },
                       children: const [FlintText('x')],
                     ),
                 ],
               ),
             FlintElement(
               'div',
               props: const {
                 'style': {'padding': '16px'},
               },
               children: normalizeChildren(child, children),
             ),
             if (actions != null)
               FlintElement(
                 'footer',
                 props: const {
                   'style': {
                     'display': 'flex',
                     'justify-content': 'flex-end',
                     'gap': '8px',
                     'padding': '16px',
                     'border-top': '1px solid #e4e7ec',
                   },
                 },
                 children: [toFlintNode(actions)],
               ),
           ],
         ),
       ],
     );