@blaze-react/modal v0.7.0
Description
A modal dialog is a dialog that appears at the top of the main content. Use a modal for dialog boxes, forms, confirmation messages or other content that can be accessed.
Usage
- Simple
const actions = [
{
callback: () => ({}),
textButton: "Action 1"
},
{
callback: () => ({}),
textButton: "Action 2"
}
];
<Modal title="Simple Modal" actions={actions} IsSimple>
<p>lorem ipsum dolor...</p>
</Modal>;
- Alert
const alertActions = [
{
callback: () => ({}),
modifiers: "alert small",
textButton: "delete"
}
];
<Modal actions={alertActions} buttonModifiers="rounded alert" isAlert>
<p>Delete item?</p>
</Modal>;
- Scrollable
<Modal
title="Scrollable Modal"
buttonModifiers="outline dark rounded"
actions={actions}
>
<p>
Content here that may need to be scrolled, can be text/forms/etc. Default
modal with scrollable content:
</p>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
...etc
</Modal>
API
Modal can receive a number of props
as follow:
NAME | TYPE | DEFAULT |
---|---|---|
title | String | empty |
actions | Array | [] |
isAlert | Boolean | false |
isSimple | Boolean | false |
isUpload | Boolean | false |
showFooter | Boolean | true |
isFullScreen | Boolean | false |
onClose | Function | () => {} |
7 months ago
6 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago