ipl-expanding-space

View Source

<ipl-expanding-space title="Expanding Space">
    Space content!
</ipl-expanding-space>
<ipl-expanding-space title="No content background" without-content-background>
    Space content!
</ipl-expanding-space>
<ipl-expanding-space title="Secondary background color" color="secondary">
    Space content!
</ipl-expanding-space>
<ipl-expanding-space title="Extra content in header">
    <template #header-extra>
        <ipl-button label="button" />
    </template>
    Space content!
</ipl-expanding-space>
<ipl-expanding-space>
    <template #title>
        Space Title <i>from slots</i>
    </template>
    Space content!
</ipl-expanding-space>

Expand by props

View Source

<ipl-expanding-space
    v-model:expanded="expanded"
    title="Expanding Space"
>
    Space content!
</ipl-expanding-space>