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
@siemens/ix-vue provides a function that allows to open modal dialogs based on a VNode.
The example above is using TSX. To add JSX/TSX support in your Vue project,
please refer to the Vue documentation.
It is not required to use JSX and as an alternative you can use
the h() function to create the modal's VNode.
It is required to provide the IxApplicationContext as part of your application in order to use the showModal function.
<script setup lang="ts">
import { IxApplicationContext } from '@siemens/ix-vue';
</script>
<template>
<IxApplicationContext>
<!-- <App /> -->
</IxApplicationContext>
</template>