FullscreenModal
The fullscreen ModalDialog
composition. FullscreenModal
passes all of its props through to an underlying ModalDialog
component providing some limited customization. If you have unique needs, use the ModalDialog
compound component family directly.
Basic Usage
Any Paragon component or export may be added to the code example.
Theme Variables#
CSS Variable | Computed Value |
---|---|
| |
| |
| |
| |
| |
Props API#
- children
node
RequiredSpecifies contents of the component.
- className
string
Specifies class name to append to the base element.
- title
string
RequiredSpecifies the aria-label of the dialog.
- onClose
func
RequiredSpecifies a callback to close the modal dialog.
- isOpen
bool
DefaultfalseSpecifies whether the modal is open.
- hasCloseButton
bool
DefaulttrueSpecifies whether the model hase close 'x' icon button in the top right of the dialog box.
- size
enum
'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'Default'fullscreen'Specifies size of the dialog box.
- variant
enum
'default' | 'warning' | 'danger' | 'success' | 'dark'Default'dark'Specifies visual style of the dialog box.
- closeLabel
string
Default'Close'The label supplied to the close icon button if one is rendered
- isFullscreenScroll
bool
DefaultfalseDetermines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog.Body receives a scrollbar, when true the browser window itself receives the scrollbar.
- footerNode
node
DefaultnullSpecifies footer for the dialog box.
- beforeBodyNode
node
DefaultnullSpecifies content that should be rendered before modal's body.
- afterBodyNode
node
DefaultnullSpecifies content that should be rendered after modal's body.
- modalBodyClassName
string
Default''Specifies class name for modal's body component.
- children
node
RequiredSpecifies the content of the dialog
- title
string
RequiredThe aria-label of the dialog
- onClose
func
RequiredA callback to close the modal dialog
- isOpen
bool
DefaultfalseIs the modal dialog open or closed
- hasCloseButton
bool
DefaulttrueThe close 'x' icon button in the top right of the dialog box
- size
enum
'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'Default'md'Sizes determine the maximum width of the dialog box
- variant
enum
'default' | 'warning' | 'danger' | 'success' | 'dark'Default'default'The visual style of the dialog box
- closeLabel
string
Default'Close'The label supplied to the close icon button if one is rendered
- className
string
Specifies class name to append to the base element
- isFullscreenScroll
bool
DefaultfalseDetermines where a scrollbar should appear if a modal is too large for the viewport. When false, the
ModalDialog
. Body receives a scrollbar, when true the browser window itself receives the scrollbar. - isFullscreenOnMobile
bool
DefaultfalseTo show full screen view on mobile screens
- isBlocking
bool
DefaultfalsePrevent clicking on the backdrop or pressing Esc to close the modal
- zIndex
number
Specifies the z-index of the modal
- isOverflowVisible
bool
DefaulttrueSpecifies whether overflow content inside the modal should be visible.
true
- content that exceeds the modal boundaries will remain visible outside the modal's main viewport, rather than being clipped or hidden.false
- any overflow content will be clipped to fit within the modal's dimensions.
Usage Insights#
FullscreenModal
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-admin-portal | 21.13.1 | 5 | |
frontend-app-course-authoring | 22.8.1 | 3 | |
frontend-app-ora-grading | 21.11.3 | 1 |
ModalDialog
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 4 | |
frontend-app-admin-portal | 21.13.1 | 25 | |
frontend-app-authn | 22.11.2 | 2 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 19 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 1 | |
frontend-app-discussions | 22.7.0 | 2 | |
frontend-app-enterprise-public-catalog | 21.13.1 | 2 | |
frontend-app-gradebook | 22.8.1 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 5 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 3 | |
frontend-app-learner-record | 22.10.0 | 1 | |
frontend-app-learning | 22.10.0 | 4 | |
frontend-app-library-authoring | 21.11.3 | 3 | |
frontend-app-payment | 22.9.0 | 2 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 16 | |
frontend-lib-special-exams | 22.7.0 | 1 | |
prospectus | 20.46.2 | 3 |