Modal

OPEN

Initialisation

Les boîtes de dialogue sont téléportées à la racine du projet dans le fichier +layout.svelte

Il faut donc importer le conteneur de boîte pour activer le fonctionnement du système.

/src/routes/+layout.svelte

<script>
    import { ModalContainer } from 'gros/modal'
    let { children } = $props()
</script>


{@render children()}
<ModalContainer/>

Créer une boîte de dialogue

Pour l’exemple nous créons un composant de type boîte de dialogue nommé ExampleModal.svelte

<script lang="ts">import { Modal } from '$lib/modal';
let { close, props } = $props();
const save = () => {
    close();
    alert('You clicked on "save" button');
};
</script>

<Modal icon="account_circle" title="User informations">
    <p>Some content</p>
    <b>User</b>
    <ul>
        <li>{props.id}</li>
        <li>{props.name}</li>
        <li>{props.email}</li>
    </ul>
    {#snippet footer()}
        <button onclick={save}>Save</button>
        <button onclick={close}>Cancel</button>
    {/snippet}
</Modal>

Déclencher l’ouverture de la boîte

Pour déclencher l’ouverture de la boîte de dialogue exposée ci-dessus, nous utilisons la fonction open qui prend 2 paramètres :

<script>
    import { modal } from 'gros/modal'
    import ExampleModal from './ExampleModal.svelte'
</script>

<button onclick={() => modal.open(ExampleModal, { 
    id: 1, 
    name: 'John Doe', 
    email: 'john.doe@live.com' 
})}>
    OPEN
</button>