History

Alexey Safronov 0cd4cb49ed Merge branch 'feature/virtual-rooms-1.2' into feature/login-redesign # Conflicts: # packages/asc-web-components/modal-dialog/index.js # packages/asc-web-components/themes/dark.js # public/locales/de/Common.json # web/ASC.Web.Client/src/Shell.jsx # web/ASC.Web.Client/src/components/pages/Confirm/sub-components/createUser.js # web/ASC.Web.Login/src/Login.jsx		2022-03-16 11:03:07 +03:00
..
index.js	Merge branch 'feature/virtual-rooms-1.2' into feature/login-redesign	2022-03-16 11:03:07 +03:00
modal-dialog.stories.js	changed size names in app buttons	2022-03-10 15:59:04 +03:00
modal-dialog.test.js	Web: Components: changed component hierarchy	2021-02-24 17:42:09 +03:00
README.md	Web: Files: fixed styles after Cherry picking.	2021-11-19 16:58:31 +03:00
styled-modal-dialog.js	Web: Components: ModalDialog: add width prop	2022-03-03 17:51:03 +03:00

README.md

ModalDialog

ModalDialog is used for displaying modal dialogs

Usage

import ModalDialog from "@appserver/components/modal-dialog";

<ModalDialog visible={false} scale={false} displayType="auto" zIndex={310}>
  <ModalDialog.Header>"Change password"</ModalDialog.Header>
  <ModalDialog.Body>
    <div>
      Send the password change instruction to the{" "}
      <a href="mailto:asc@story.book">asc@story.book</a> email address
    </div>
  </ModalDialog.Body>
  <ModalDialog.Footer>
    <Button
      label="Send"
      size="big"
      primary={true}
      onClick={() => alert("It's works!")}
    />
  </ModalDialog.Footer>
</ModalDialog>

Properties

Props	Type	Required	Values	Default	Description
`visible`	`bool`	-	-	-	Display dialog or not
`displayType`	`oneOf`	-	`auto`, `modal`, `aside`	`auto`	Display type
`scale`	`bool`	-	-	-	Indicates the side panel has scale
`onClose`	`func`	-	-	-	Will be triggered when a close button is clicked
`zIndex`	`number`	-	-	`310`	CSS z-index
`modalBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for modal body section
`asideBodyPadding`	`string`	-	-	`16px 0`	CSS padding props for aside body section