Modal
Usage
Example
Script
const [modal, setModal] = useState(false); const toggle = ()=>{ setModal(!modal); } return ( <> <CButton onClick={toggle} className="mr-1" >Launch demo modal</CButton> <CModal show={modal} onClose={toggle} > <CModalHeader closeButton>Modal title</CModalHeader> <CModalBody> Lorem ipsum dolor... </CModalBody> <CModalFooter> <CButton color="primary">Do Something</CButton>{' '} <CButton color="secondary" onClick={toggle} >Cancel</CButton> </CModalFooter> </CModal> </> )
# Features
- Many customization options
- Easily manage modal visibility
Modal is hidding after click on one of following triggers:
- Close button in the default header
- 'OK' and 'Cancel' buttons in the footer
- Backdrop (when closeOnBackdrop prop is true)
# Modal API
| Name | Required | Type | Default Value |
|---|
| children | | any | |
| children components |
| className | | string | |
| user classes for the main HTML tag |
| innerRef | | (object | Function | string) | |
| ref to the main tag |
| show | | boolean | |
| show dialog box |
| centered | | boolean | |
| show dialog box |
| size | | (sm | lg | xl) | |
| show dialog box |
| backdrop | | boolean | true |
| show dialog box |
| color | | string | |
| show dialog box |
| borderColor | | string | |
| show dialog box |
| onOpened | | Function | |
| show dialog box |
| onClosed | | Function | |
| show dialog box |
| fade | | boolean | true |
| show dialog box |
| closeOnBackdrop | | boolean | true |
| show dialog box |
| onClose | | Function | |
| show dialog box |
| addContentClass | | string | |
| show dialog box |
