Overview of IntegralUI Dialog

IntegralUI Dialog is a native web component for Angular, React and Vue that displays a modal window. In this article, you will find general information about the dialog component, including its properties, events and methods that you can use.

In this example, when dialog is visible, user interaction with all other elements on the page is suspended, except for the dialog content. If you click on the gray area outside of the dialog, the dialog will close.

How to Use IntegralUI Dialog in Angular, React and Vue

To use the Dialog component you need to do the following:

• In app template place the button component using the iui-dialog tag name
• Set values for different properties available
• Handle the events in your code

• JavaScript
• Angular
• React
• Vue

public isDialogVisible: boolean = false;
public showCloseButton: boolean = true;

showDialog(){
    this.isDialogVisible = true;
}

onDialogClosed(){
    this.isDialogVisible = false;
}
                                    

<div class="app-block" #application>
    <div class="dlg-ovw-container">
        <button (click)="showDialog()">Show Dialog</button>
        <iui-dialog [closeButton]="showCloseButton" [visible]="isDialogVisible" (closed)="onDialogClosed()">
            <div class="dlg-ovw-content">Add your content here</div>
        </iui-dialog><br/>
    </div>
    <div class="dlg-ovw-control-panel">
        <label><input class="prb-ovw-input-numeric" type="checkbox" [(ngModel)]="showCloseButton" /> Close Button</label> 
    </div>
</div>
                                    

.dlg-ovw-container
{
    display: inline-block;
    padding: 20px 10px;
}
.dlg-ovw-content
{
    margin-top: 200px;
    text-align: center;
}
.dlg-ovw-control-panel
{
    display: inline-block;
    padding: 20px 10px;
}
                                    

You can add custom content to the dialog consisting of HTML elements or other custom web components. The closeButton property determines the visibility of the close button, which by default is set to true.

List of Available Properties, Events and Methods in IntegralUI Dialog

Supported Properties

You can use the following properties to change the appearance and behavior of the Dialog component:

• allowAnimation - determines whether changes to the dialog are animated or not
• closeButton - Determines whether the close button inside the dialog is visible or not
• controlStyle - specifies an object that contains all style settings for the component
• data - specifies an object that holds data related to the component
• enabled - determines whether dialog is enabled or disabled
• name - uniquely identifies the component
• size - specifies the component width and height
• state - specifies the component state: disabled, hovered, etc.
• visible - Determines whether dialog is visible or hidden

Using the above properties, you can customize the Dialog component in a way best suited for your application.

Supported Events

Here is a list of available events:

• closed - Occurs after dialog is closed
• closing - Occurs when dialog starts to close
• enabledChanged - occurs when component is enabled or disabled
• opened - Occurs after dialog is opened
• opening - Occurs when dialog starts to open
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected

By handling the close event in your code, you can perform addition action. For example, updating your server data, based on the dialog content.

Supported Methods

The following public methods are available:

• close - closes the dialog
• open - opens the dialog

Using these methods, you can open/close the dialog from code.

How to Customize the Dialog Appearance

Few CSS classes govern the appearance of the dialog. You can modify these classes with your own styles, or override the default settings using the controlStyle property.

The controlStyle property holds the names of CSS classes that you can override. You don't have to provide CSS classes for all component parts, just the ones you want to change.

dialogStyle = {
    general: {
        disabled: 'iui-dialog-disabled',
        focused: 'iui-dialog-focused',
        normal: iui-dialog',
        hovered: 'iui-dialog-hovered',
        selected: 'iui-dialog-selected'
    }
}
                    

Conclusion

IntegralUI Dialog is a web component that you can use in Angular, React and Vue. The component displays a modal window where you can add custom content consisting of HTML elements or other web components. Using different properties and events and altering the default CSS classes, you can customize the dialog appearance and behavior.

The Dialog component is part of IntegralUI Web.