Variable ModalConst

Type Declaration

• • (props: DialogPropsExtend): Element

  • Create a customized Material UI Modal component. This component extends the Material-UI Dialog to provide enhanced modal functionality with support for headers, content, and footer actions.

    Parameters

    • props: DialogPropsExtend

      The properties passed to the Modal element

    Returns Element

    The Modal component

    Component

    Example

    // Basic usage
    <Modal
      modalId="basic-modal"
      open={isOpen}
      title="Modal Title"
      contentModal={<div>Modal content</div>}
    />
    
    // With custom header and footer actions
    <Modal
      modalId="custom-modal"
      modalProps={{
        header: {
          title: "Custom Header",
          actions: [{ actionId: "close", content: <CloseButton /> }]
        },
        content: "Modal content",
        footer: {
          actions: [
            { actionId: "cancel", content: <Button>Cancel</Button> },
            { actionId: "save", content: <Button>Save</Button> }
          ]
        }
      }}
      open={isOpen}
    />
    
    // With custom styling
    <Modal
      modalId="styled-modal"
      className="custom-modal"
      contentClassName="modal-content"
      open={isOpen}
      title="Styled Modal"
    />
    Copy

    See

    Dialog