@igloo-ui/dialog v0.8.15
Dialog
The Dialog is much like the Modal component, except it is simpler. It contains a title, sub title, dismiss action and a validate action.
Installation
To install @igloo-ui/dialog
in your project, you will need to run the following command using npm:
npm install @igloo-ui/dialog
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/dialog
Usage
Then to use the component in your code just import it!
import Dialog from '@igloo-ui/dialog';
import Button from '@igloo-ui/button';
const [open, setOpen] = React.useState(false);
const handleValidate = () => {
alert("You said yes");
setOpen(false);
};
<Button appearance="secondary" onClick={() => setOpen(true)}>
open
</Button>
<Dialog
title="Dialog title"
subTitle="This is a sub title"
dismissText="Cancel"
validateText="Confirm"
isOpen={open}
onDismiss={() => setOpen(false)}
onValidate={handleValidate}
/>
Troubleshooting
When a Dialog opens above a Modal
In this case, when you close the Dialog, the Modal closes automatically. Here is a workaround to remedy this.
To solve the problem, set the isClosable
property of the Modal to false
when the Dialog component is up and then return to true
when it closes.
7 days ago
28 days ago
1 month ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
10 months ago
10 months ago
6 months ago
8 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago