Dialog
Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks
Usage
Import
npm i @finastra/dialog
import '@finastra/dialog';
...
<fds-button label="open" onclick="openDialog()"></fds-button>
<fds-dialog id="myDropdown" heading="Title">
<span>Content</span>
<fds-button
secondary
label="Yes"
slot="primaryAction"
dialogAction="ok">
</fds-button>
<fds-text-button
label="No"
slot="secondaryAction"
dialogAction="cancel">
</fds-text-button>
</fds-dialog>
<script>
function openDialog() {
document.getElementById("myDropdown").show();
}
</script>
API
Properties
Property |
Attribute |
Type |
Default |
Description |
actionAttribute |
|
string |
|
|
defaultAction |
|
string |
|
|
escapeKeyAction |
escapeKeyAction |
string |
"" |
Setting this attribute to an empty string "" will prevent the escape key from closing the dialog |
heading |
heading |
string |
"" |
Heading text of the dialog. |
hideActions |
hideActions |
boolean |
false |
Hides the actions footer of the dialog |
initialFocusAttribute |
|
string |
|
|
open |
open |
boolean |
false |
Whether the dialog should open |
scrimClickAction |
scrimClickAction |
string |
"" |
Setting this attribute to an empty string "" will prevent clicks outside the dialog from closing the dialog |
stacked |
stacked |
boolean |
false |
Whether to stack the action buttons |
suppressDefaultPressSelector |
|
string |
|
|
Methods
Method |
Type |
blur |
(): void |
click |
(): void |
close |
(): void |
focus |
(): void |
forceLayout |
(): void |
show |
(): void |
Slots
Name |
Description |
primaryAction |
Footer area containing the dialog's primary action button. |
secondaryAction |
Footer area containing the dialog's secondary action button. |
CSS Custom Properties
Property |
Type |
Default |
Description |
--fds-dialog-content-padding |
|
"0px 32px 16px 32px" |
Sets the content padding |
--fds-dialog-max-height |
|
"calc(100% - 32px)" |
Sets dialog max height |
--fds-dialog-max-width |
|
"560px" |
Sets dialog max width |
--fds-dialog-min-width |
|
"280px" |
Sets dialog min width |
--fds-dialog-scrim-color |
color |
"rgba(0, 0, 0, 0.12)" |
Color of the scrim |
--fds-dialog-z-index |
|
7 |
Sets the z-index of the dialog and scrim |