Modal dialog
A modal dialog displays content that requires user interaction, in a layer above the page.
Default
The default form of a modal dialog.
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
import React, { useState } from "react";
import Modal from '@neoKit/models';
const DefaultExample = () => {
const [openModal, setIsOpen] = useState(false);
return (
<>
<div>
<Buttons appearance='primary' onClick={() => setIsOpen(!openModal)}> Open modal </Buttons>
<Modal
modal={openModal}
onClick={() => setIsOpen(!openModal)}
styles={styles}
>
<div>
<p>
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
{/*footer*/}
<div>
<Buttons onClick={() => setIsOpen(!openModal)}> Close modal </Buttons>
<Buttons appearance='primary' onClick={() => setIsOpen(!openModal)}> Open modal </Buttons>
</div>
</div>
</Modal>
</div>
</>
);
};
export default DefaultExample;
Width
The width of the modal can be specified in different ways:
- The recommended way to specify modal width is using named size options.
- If a number is provided, the width is set to that number in pixels.
- If a string including pixels or a percentage is provided, the width will be directly applied as a style.
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
62
63
64
65
66
67
68
69
70
71
72
73
import React, { useState } from "react";
import Modal from '@neoKit/models';
const DefaultExample = () => {
const [openModalWidth, setIsOpenWidth] = useState(false);
const [modalApperrance, setModalApperrance] = useState("medium");
return (
<>
<div>
<Buttons
appearance='primary'
onClick={() => {
setIsOpenWidth(!openModalWidth);
setModalApperrance("small");
}}
>
small
</Buttons>
<Buttons
appearance='primary'
onClick={() => {
setIsOpenWidth(!openModalWidth);
setModalApperrance("medium");
}}
>
medium
</Buttons>
<Buttons
appearance='primary'
onClick={() => {
setIsOpenWidth(!openModalWidth);
setModalApperrance("large");
}}
>
large
</Buttons>
<Buttons
appearance='primary'
onClick={() => {
setIsOpenWidth(!openModalWidth);
setModalApperrance("x-large");
}}
>
x-large
</Buttons>
<Modal
modal={openModal}
onClick={() => setIsOpen(!openModal)}
styles={styles}
>
<div>
<p>
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
{/*footer*/}
<div>
<Buttons onClick={() => setIsOpen(!openModal)}> Close modal </Buttons>
<Buttons appearance='primary' onClick={() => setIsOpen(!openModal)}> Open modal </Buttons>
</div>
</div>
</Modal>
</div>
</>
);
};
export default WidthExample;