Modals

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'
</script>


<slot/>
<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>
    import { Modal } from 'gros/modal'
    export let close
    export let props

    const user = 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>{user.id}</li>
        <li>{user.name}</li>
        <li>{user.email}</li>
    </ul>

    <svelte:fragment slot="footer">
        <button on:click={save}>Save</button>
        <button on:click={close}>Cancel</button>
    </svelte:fragment>
</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 on:click={() => modal.open(ExampleModal, { 
    id: 1, 
    name: 'John Doe', 
    email: 'john.doe@live.com' 
})}>
    OPEN
</button>