1.3.0 • Published 2 years ago

@illa-design/modal v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

Modal

The modal component is used to open a pop-ups in order to undertake further actions.

Installation

yarn add @illa-design/modal

Import component

import { Modal } from "@illa-design/modal"

API

Modal Basic Properties

PropsDescTypeDefault
visibleWhether the modal is visibleboolean-
getPopupContainerGet pop-ups container() => Element() => document.body
maskWhether the mask is visiblebooleantrue
titleTitlestring-
alignCenterWhether the modal is centeredbooleantrue
maskClosableWhether modal is closablebooleantrue
hideCancelWhether hide the cancel buttonbooleanfalse
simpleWhether to enable simple modeboolean(props: any) => { return props.notice;}
closableWhether to show the close buttonbooleantrue
okTextContent of confirm buttonstring-
cancelTextContent of cancel buttonstring-
confirmLoadingCheck if the confirm button is loadingbooleanfalse
okButtonPropsThe props of confirm buttonButtonProps-
cancelButtonPropsThe props of cancel buttonButtonProps-
footerWhether to show the footer sectionbooleantrue
focusLockWhether to lock the focus inside the pop-upsbooleantrue
autoFocusWhether to focus the first focusable element by defaultbooleantrue

Modal Event

PropsDescTypeDefault
onCancelCallback for closing the pop-ups() => void-
onOkCallback for confirm button click(e?: MouseEvent) => Promise<any> | void-
afterOpenCallback after the pop-ups is opened() => void-
afterCloseCallback after the pop-ups is closed() => void-

Examples

Basic Usage

<Modal visible={true} title={"Modal Title"} />

Center the modal

<Modal alignCenter={true} title={"Modal Title"} />

Set the content of confirm button

<Modal okText={"confirm"} title={"Modal Title"} />

Show the close button

<Modal closable={true} title={"Modal Title"} />
1.2.0

2 years ago

1.3.0

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.1.0

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.20

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

2 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago