Modal - Code
Our modals support the following sizes:
360480600720840full-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.
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
By instance
@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.
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
Javascript
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.
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
The showMessage method returns a Listener with the following signature:
TypedEvent<{
actionId: string;
payload: T;
}>;
actionId represents the configured action button.