Skip to main content

Modal

Sizes​

Our modals support the following sizes:

  • 360
  • 480
  • 600
  • 720
  • 840
  • full-width - Modal extends to fill entire screen width (modal will still have some horizontal margin)
  • full-screen - Modal extends to fill entire screen

The size can be configured over the configuration object of the showModal function.

PreviewAngularReactVueJavaScript

Custom​

How to open a modal depends on the framework in use. Note that you will not instantiate ix-modal on your own. Select the appropriate section below for the respective usage information.

Angular​

By template​

PreviewAngular

By instance​

PreviewAngular

@siemens/ix-angular provides an injectable service that allows to open modal dialogs based on a ng-template reference or by component type. If you want to pass arbitrary data to the modal use the data-property. In order to access that data inside the modal template, use let-modal as seen in the angular example above.

ModalService

open(config: ModalConfig<TData: any, TReason: any>): Promise<ModalInstance<TData>>

React​

@siemens/ix-react provides an function that allows to open modal dialogs based on a JSXElement.

PreviewReact
Use context

It is highly recommended to provide the IxApplicationContext as part of your application.

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <IxApplicationContext>
    {/*
      <BrowserRouter>
        <App />
      </BrowserRouter>
    */}
  </IxApplicationContext>
);

Vue​

PreviewVue

Javascript​

PreviewJavaScript

Loading​

How to open a loading modal is independent of the framework in use. Note that you have to import showModalLoading from the core package @siemens/ix.

PreviewReact

Message​

How to open a message modal is independent of the framework in use. Note that you have to import showMessage from the core package @siemens/ix.

showMessage provides multiple pre-configured messages:

  • info
  • warning
  • error
  • success
  • question
PreviewReact

The showMessage method returns a Listener with the following signature:

TypedEvent<{
  actionId: string;
  payload: T;
}>;

actionId represents the configured action button.

API (modal header)​

Properties​

Name
Description and specifications
hideClose
Hide the close button
Attribute:
hide-close
Type:
boolean
Default:
false
icon
Icon of the Header
Attribute:
icon
Type:
string ｜ undefined
iconColor
Icon color
Attribute:
icon-color
Type:
string ｜ undefined

Events​

Name
Description and specifications
closeClick
Emits when close icon is clicked and closes the modal Can be prevented, in which case only the event is triggered, and the modal remains open
Detail:
MouseEvent

API (modal config)​

Properties​

Name
Description and specifications
animation
Attribute:
animation
Type:
boolean
ariaDescribedby
Attribute:
ariaDescribedby
Type:
string
ariaLabelledby
Attribute:
ariaLabelledby
Type:
string
backdrop
Attribute:
backdrop
Type:
boolean
beforeDismiss
Attribute:
beforeDismiss
Type:
unknown
centered
Attribute:
centered
Type:
boolean
closeOnBackdropClick
Attribute:
closeOnBackdropClick
Type:
boolean
container
Attribute:
container
Type:
string | HTMLElement
content
Attribute:
content
Type:
string | CONTENT
keyboard
Attribute:
keyboard
Type:
boolean
size
Attribute:
size
Type:
IxModalSize
title
Attribute:
title
Type:
string

API (modal instance)​

Properties​

Name
Description and specifications
htmlElement
Attribute:
htmlElement
Type:
__global.HTMLIxModalElement
onClose
Attribute:
onClose
Type:
TypedEvent
onDismiss
Attribute:
onDismiss
Type:
TypedEvent

API (modal header)​

Properties​

Name
Description and specifications
hideClose
Hide the close button
Attribute:
hide-close
Type:
boolean
Default:
false
icon
Icon of the Header
Attribute:
icon
Type:
string ｜ undefined
iconColor
Icon color
Attribute:
icon-color
Type:
string ｜ undefined

Events​

Name
Description and specifications
closeClick
Emits when close icon is clicked and closes the modal Can be prevented, in which case only the event is triggered, and the modal remains open
Detail:
MouseEvent