AlexeySafronov
febf172875
# Conflicts: # lerna.json # packages/asc-web-common/package.json # packages/asc-web-components/avatar-editor/index.js # packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js # packages/asc-web-components/main-button/index.js # packages/asc-web-components/package.json # packages/browserslist-config-asc/package.json # packages/debug-info/package.json # products/ASC.CRM/Client/package.json # products/ASC.Calendar/Client/package.json # products/ASC.Files/Client/package.json # products/ASC.Files/Client/src/HOCs/withFileActions.js # products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js # products/ASC.Files/Server/DocStore # products/ASC.Mail/Client/package.json # products/ASC.People/Client/package.json # products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js # products/ASC.Projects/Client/package.json # web/ASC.Web.Client/package.json # web/ASC.Web.Editor/package.json # web/ASC.Web.Editor/src/Editor.jsx # web/ASC.Web.Login/package.json |
||
---|---|---|
.. | ||
index.js | ||
modal-dialog.stories.js | ||
modal-dialog.test.js | ||
README.md | ||
styled-modal-dialog.js |
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 |