Dialogs

ipl-sidebar

View Source

<ipl-sidebar
    v-model:is-open="sidebarOpen"
    :persistent="persistent"
>
    <div class="width-capped-content">
        <ipl-space
            color="light"
            class="vertical-layout"
        >
            <div>Hello!</div>
            <ipl-button
                label="Button!"
            />
            <ipl-button
                label="Close sidebar"
                color="red"
                @click="sidebarOpen = false"
            />
        </ipl-space>
    </div>
</ipl-sidebar>
<ipl-button
    label="Open sidebar"
    @click="sidebarOpen = true"
/>

ipl-dialog

View Source

<ipl-dialog
    v-model:is-open="dialogOpen"
    style="width: 500px"
    :persistent="persistent"
>
    <div class="width-capped-content">
        <ipl-space
            color="light"
            class="vertical-layout"
        >
            <div>Hello!</div>
            <ipl-button
                label="Button!"
            />
            <ipl-button
                label="Close dialog"
                color="red"
                @click="dialogOpen = false"
            />
        </ipl-space>
    </div>
</ipl-dialog>
<ipl-button
    label="Open dialog"
    @click="dialogOpen = true"
/>

Known issues

• The backdrop does not animate in Firefox (Bugzilla)
• When using Chromium-based browsers and if the sidebar isn't interacted with, pressing esc will close it without an animation (Chromium bug)