dialog

v4.15.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

202 KB

The Dialog component is used to show content on top of an overlay. It blocks any interaction with the page — until the overlay is clicked, or a close action is triggered.

Dialog

React

UI Components

1 contributor

Install dialog as a package?

Copied

npm i @bit/segmentio.evergreen.dialog

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Properties

Name	Type	Default value	Description
children (required)	`node \| function`		Children can be a string, node or a function accepting `({ close })`. When passing a string, is used to wrap the string.
intent	`'none' \| 'success' \| 'warning' \| 'danger'`	`'none'`	The intent of the Dialog. Used for the button.
isShown	`bool`	`false`	When true, the dialog is shown.
title	`node`		Title of the Dialog. Titles should use Title Case.
hasHeader	`bool`	`true`	When true, the header with the title and close icon button is shown.
hasFooter	`bool`	`true`	When true, the footer with the cancel and confirm button is shown.
hasCancel	`bool`	`true`	When true, the cancel button is shown.
hasClose	`bool`	`true`	When true, the close button is shown
onCloseComplete	`function`		Function that will be called when the exit transition is complete.
onOpenComplete	`function`		Function that will be called when the enter transition is complete.
onConfirm	`function`	`close => close()`	Function that will be called when the confirm button is clicked. This does not close the Dialog. A close function will be passed as a paramater you can use to close the dialog. `onConfirm={(close) => close()}`
confirmLabel	`string`	`'Confirm'`	Label of the confirm button.
isConfirmLoading	`bool`	`false`	When true, the confirm button is set to loading.
isConfirmDisabled	`bool`	`false`	When true, the confirm button is set to disabled.
onCancel	`function`	`close => close()`	Function that will be called when the cancel button is clicked. This closes the Dialog by default. `onCancel={(close) => close()}`
cancelLabel	`string`	`'Cancel'`	Label of the cancel button.
shouldCloseOnOverlayClick	`bool`	`true`	Boolean indicating if clicking the overlay should close the overlay.
shouldCloseOnEscapePress	`bool`	`true`	Boolean indicating if pressing the esc key should close the overlay.
width	`string \| number`	`560`	Width of the Dialog.
topOffset	`string \| number`	`'12vmin'`	The space above the dialog. This offset is also used at the bottom when there is not enough vertical space available on screen — and the dialog scrolls internally.
sideOffset	`string \| number`	`'16px'`	The space on the left/right sides of the dialog when there isn’t enough horizontal space available on screen.
minHeightContent	`string \| number`	`80`	The min height of the body content. Makes it less weird when only showing little content.
containerProps	`object`		Props that are passed to the dialog container.
contentContainerProps	`object`		Props that are passed to the content container.
preventBodyScrolling	`bool`	`false`	Whether or not to prevent scrolling in the outer body
children	`function`