render method

  1. @override
Element render()
override

Creates an HTML Element represention of Component.

Implementation

@override
Element render() {
  var modalContainer = super.render() as HTMLDivElement;
  modalContainer.style
    ..position = 'fixed'
    ..top = '0'
    ..left = '0'
    ..width = '100%'
    ..height = '100%'
    ..backgroundColor = 'rgba(0, 0, 0, 0.5)'
    ..display = 'flex'
    ..justifyContent = 'center'
    ..alignItems = 'center'
    ..zIndex = '1000';

  modalContainer.onClick.listen((event) {
    event.stopPropagation();
    if (dismissible == true) {
      modalContainer.remove();
    }
  });

  var modal = Div(
    className: className,
    children: [
      if (title != null) title!,
      if (body != null) body!,
      if (actions != null)
        Div(
          style: {
            'display': 'flex',
            'justifyContent': 'flex-end',
            'marginTop': '20px',
          },
          children: actions!,
        ),
    ],
  );

  modalContainer.append(modal.render());
  return modalContainer;
}