ipl-expanding-space-group

View Source

<ipl-expanding-space-group class="vertical-layout">
    <ipl-expanding-space
        key="space1"
        title="First Space"
    >
        Space content!
    </ipl-expanding-space>
    <ipl-expanding-space
        key="space2"
        title="Second Space"
    >
        Space content!
    </ipl-expanding-space>
    <ipl-expanding-space
        key="space3"
        title="Third Space"
    >
        Space content!
    </ipl-expanding-space>
</ipl-expanding-space-group>

Expand spaces externally

View Source

<div class="alt-background">
    Active space: {{ activeSpace }}
    <ipl-expanding-space-group
        v-model="activeSpace"
        class="vertical-layout"
    >
        <ipl-expanding-space
            key="space1"
            title="First Space"
        >
            Space content!
        </ipl-expanding-space>
        <ipl-expanding-space
            key="space2"
            v-model:expanded="secondSpaceExpanded"
            title="Second Space"
        >
            Space content!
        </ipl-expanding-space>
        <ipl-expanding-space
            key="space3"
            title="Third Space"
        >
            Space content!
        </ipl-expanding-space>
    </ipl-expanding-space-group>
</div>
<div class="horizontal-layout">
    <ipl-button
        label="Expand first space"
        inline
        @click="activeSpace = 'space1'"
    />
    <ipl-button
        label="Toggle second space"
        inline
        @click="secondSpaceExpanded = !secondSpaceExpanded"
    />
</div>