RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/react/docs/components/modal/api/ below:

React Modal Component API - CoreUI

CModal#

import { CModal } from '@coreui/react'
import CModal from '@coreui/react/src/components/modal/CModal'

Property Default Type alignment# - 'top', 'center'

Align the modal in the center or top of the screen.

backdrop# true boolean, 'static'

Apply a backdrop on body while modal is open.

className# - string

A string of all className you want applied to the base component.

container#5.3.0+ - Element, DocumentFragment, (() => Element | DocumentFragment)

Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default document.body.

focus#4.10.0+ true boolean

Puts the focus on the modal when shown.

fullscreen# - boolean, 'sm', 'md', 'lg', 'xl', 'xxl'

Set modal to covers the entire user viewport.

keyboard# true boolean

Closes the modal when escape key is pressed.

onClose# - () => void

Callback fired when the component requests to be closed.

onClosePrevented# - () => void

Callback fired when the component requests to be closed.

onShow# - () => void

Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.

portal# true boolean

Generates modal using createPortal.

scrollable# - boolean

Create a scrollable modal that allows scrolling the modal body.

size# - 'sm', 'lg', 'xl'

Size the component small, large, or extra large.

transition# true boolean

Remove animation to create modal that simply appear rather than fade in to view.

unmountOnClose# true boolean

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

visible# - boolean

Toggle the visibility of modal component.

CModalBody#

import { CModalBody } from '@coreui/react'
import CModalBody from '@coreui/react/src/components/modal/CModalBody'

Property Default Type className# - string

A string of all className you want applied to the base component.

import { CModalFooter } from '@coreui/react'
import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'

Property Default Type

A string of all className you want applied to the base component.

import { CModalHeader } from '@coreui/react'
import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'

Property Default Type

A string of all className you want applied to the base component.

Add a close button component to the header.

CModalTitle#

import { CModalTitle } from '@coreui/react'
import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'

Property Default Type as# h5 (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'h5'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>)

Component used for the root node. Either a string to use a HTML element or a component.

className# - string

A string of all className you want applied to the base component.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4