A non-blocking, focus-stealing container.
npm install boundless-dialogTHIS IS AN AUTOGENERATED FILE. EDIT INDEX.JS INSTEAD.
A dialog differs from a modal in that it does not come with a masking layer (to obscure the rest of the page)
and the user can choose to shift focus away from the dialog contents via mouse click or a keyboard shortcut.
Specific areas (header, body, footer) are defined to provide easy conformance to the
WAI-ARIA spec for aria-labelledby
and aria-describedby (screen reader * accessibility). Their use is optional, but encouraged.
_Note: only top-level props are in the README, for the full list check out the website._
There are no required props.
| Name | Type | Default Value | Description |
|---|---|---|---|
| after | | | arbitrary content to be rendered after the dialog in the DOM |
| before | | | arbitrary content to be rendered before the dialog in the DOM |
| bodyProps | | | any React-supported attribute; applied to the .b-dialog-body node |
| captureFocus | | | determines if focus is allowed to move away from the dialog |
| children | | | |
| closeOnEscKey | | | enable detection of "Escape" keypresses to trigger props.onClose; if a function is provided, the returnvalue determines if the dialog will be closed |
| closeOnInsideClick | | | enable detection of clicks inside the dialog area to trigger props.onClose; if a function is provided, the returnvalue determines if the dialog will be closed |
| closeOnOutsideClick | | | enable detection of clicks outside the dialog area to trigger props.onClose; if a function is provided, the returnvalue determines if the dialog will be closed |
| closeOnOutsideFocus | | | enable detection of focus outside the dialog area to trigger props.onClose; if a function is provided, the returnvalue determines if the dialog will be closed |
| closeOnOutsideScroll | | | enable detection of scroll and mousewheel events outside the dialog area to trigger props.onClose; if a functiois provided, the return value determines if the dialog will be closed |
| footer | | | text, ReactElements, etc. comprising the "footer" area of the dialog, e.g. confirm/cancel buttons |
| footerProps | | | any React-supported attribute; applied to the .b-dialog-footer node |
| header | | | text, ReactElements, etc. to represent the "title bar" area of the dialog |
| headerProps | | | any React-supported attribute; applied to the .b-dialog-header node |
| onClose | | | a custom event handler that is called to indicate that the dialog should be unrendered by its parent; the event occurs if one or more of the closeOn props (closeOnEscKey, closeOnOutsideClick, etc.) are passed as true and the dismissal criteria are satisfied |
| wrapperProps | | | any React-supported attribute; applied to the .b-dialog-wrapper node |