UNPKG

zilly-ui

Version:

Zilly web react ui components

61 lines (46 loc) • 11.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
--- name: Dialog --- import { Playground, Props } from "docz"; import {Dialog , Alert} from "./demo"; # Dialog Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. Dialogs are purposefully interruptive, so they should be used sparingly. ## Props | Property | Description | Type | Default | | :------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :------------- | | BackdropComponent | A backdrop component. This property enables custom backdrop rendering. | elementType | SimpleBackdrop | | BackdropProps | Properties applied to the Backdrop element. | elementType | object | | container | A node, component instance, or function that returns either. The container will have the portal children appended to it. | union: object \|func | body | | disableAutoFocus | If true, the modal will not automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. This also works correctly with any modal children that have the disableAutoFocus prop.Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers. | bool | false | | disableBackdropClick | If true, clicking the backdrop will not fire any callback. | boolean | false | | disableEnforceFocus | If true, the modal will not prevent focus from leaving the modal while open. Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers. | boolean | false | | hideBackdrop | If true, the backdrop is not rendered. | boolean | false | | disableRestoreFocus | If true, the modal will not restore focus to previously focused element once modal is hidden. | boolean | false | | onClose | Callback fired when the component requests to be closed. | func | - | | onEscapeKeyDown | Callback fired when the escape key is pressed, disableEscapeKeyDown is false and the modal is in focus. | func | - | | open | If true, the modal is open. | bool | - | | transition | If true, the modal is add transition . | bool | - | | disableEscapeKeyDown | If true, hitting escape will not fire any callback. | boolean | false | | keepMounted | Always keep the children in the DOM. This property can be useful in SEO situation or when you want to maximize the responsiveness of the Modal. | boolean | true | | wrapClass | modal wrap class name | string | - | | fullScreen | If true, the dialog will be full-screen | boolean | false | | fullWidth | If true, the dialog stretches to maxWidth. | boolean | false | | maxWidth | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to false to disable maxWidth. | enum: 'xs', 'sm', 'md', 'lg', 'xl', false | 'sm' | | PaperComponent | The component used to render the body of the dialog. | elementType | Paper | | PaperProps | Properties applied to the Paper element. | object | {} | | scroll | Determine the container for scrolling the dialog. | enum: 'body' \| 'paper' | paper | | children | Dialog children, usually the included sub-components. | node | - | ## Notes: You can combine dialogs with the following components: 1. [DialogTitle](/dialog-content-dialog-content) 2. [DialogContent](/dialog-title-dialog-title) ### base usage <Playground> <Dialog /> </Playground> ### Alert <Playground> <Alert /> </Playground>