Skip to main content

Overlay dialogs and tasks

Canvas dialogs​

It is possible to show a dialog either attached to target element, link or as a modal over the canvas viewport itself.

Showing a dialog​

The following methods and properties from OverlayController (accessible from workspace context) provide means to interact with the dialogs:

Method or propertyDescription
showDialog() methodOpens a dialog with the specified style and content.
hideDialog() methodHides a currently open dialog.
openedDialog propertyCan be used to read the state of the currently open dialog.
Has corresponding changeOpenedDialog event.

Example: a modal dialog over the viewport​

Result
Loading...
Live Editor
function Example() {
  const {defaultLayout} = Reactodia.useWorker(Layouts);

  const {onMount} = Reactodia.useLoadedWorkspace(async ({context, signal}) => {
      const {overlay} = context;
      overlay.showDialog({
        style: {
          caption: 'Custom modal dialog',
        },
        content: (
          <div className='reactodia-form'>
            <div className='reactodia-form__body'>
              <div>Custom dialog content</div>
            </div>
            <div className='reactodia-form__controls'>
              <button className='reactodia-btn reactodia-btn-primary'
                type='button'
                onClick={() => overlay.hideDialog()}>
                Close
              </button>
            </div>
          </div>
        ),
      });
  }, []);

  return (
    <div className='reactodia-live-editor'>
      <Reactodia.Workspace ref={onMount}
        defaultLayout={defaultLayout}>
        <Reactodia.DefaultWorkspace />
      </Reactodia.Workspace>
    </div>
  );
}

Dialog styles​

The component look can be customized using the following CSS properties (see design system for more information):

PropertyDescription
--reactodia-dialog-border-colorBorder color for the dialog (uses the base border color if not set).
--reactodia-dialog-border-radiusBorder radius for the dialog (uses the base border radius if not set).
--reactodia-dialog-border-widthBorder width for the dialog (uses the base border width if not set).
--reactodia-dialog-viewport-breakpoint-sMakes the dialog fill the viewport if the available width is less or equal to that value.

Overlay tasks​

info

This section is incomplete, please look at the reference API documentation instead: