@finastra/dialog NPM

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