Card collapsible is designed to organize related content in a space-efficient way. It allows users to expand or collapse sections.
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
View RTL
<template><CardCollapsibletitle="I am a collapsible card"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit, quibusdam?</CardCollapsible></template>
<template><CardCollapsibletitle="With disabled toggle"disabled> The toggle to expand/collapse the card can also be disabled by using the<i>disabled</i> prop. This becomeshandy in cases you want to ensure the content of the card is visible, such as an <b>inline edit</b> form is loaded and while the form is not submitted, you need the card to remain expanded so the content is visible.</CardCollapsible></template>
<scriptsetuplang="ts">import CardCollapsible from'@/components/CardCollapsible.vue'const cardCollapsibleElement = useTemplateRef<InstanceType<typeof CardCollapsible>>('cardCollapsibleRef')const isCardWithActionsCollapsed =ref(false)const hasCardWithActionsDisabledToggle =ref(false)</script><template><CardCollapsibleref="cardCollapsibleRef"title="With header actions":disabled="hasCardWithActionsDisabledToggle"@card:collapse="isCardWithActionsCollapsed = true"@card:expand="isCardWithActionsCollapsed = false"@card:toggle-state="isCardWithActionsCollapsed = $event"><template#header-end><provet-buttontype="button"size="s":disabled="hasCardWithActionsDisabledToggle"@click="cardCollapsibleElement?.toggleCard"> Toggle state</provet-button><provet-buttontype="button"size="s"@click=" hasCardWithActionsDisabledToggle = !hasCardWithActionsDisabledToggle"> {{ !hasCardWithActionsDisabledToggle ? 'Disable toggle' : 'Enable toggle' }}</provet-button></template> It is also possible to add header actions. There will be plenty of cases where we'll use a <provet-tagsize="s">CardCollapsible</provet-tag> to wrap forms, in such scenarios both the <b>Submit/Save</b> and<b>Cancel</b> buttons can be placed under the card's <i>header-end</i> slot.<dl><dt> Additionally, the component expose useful methods to collapse, expand and/or toggle the card's state. The methods names are:</dt><dd><ul><li><pre>collapse</pre></li><li><pre>expand</pre></li><li><pre>toggleCard</pre></li></ul></dd></dl></CardCollapsible></template>
<template><CardCollapsibletitle="With collapsed initial state"collapsed> The <provet-tagsize="s">CardCollapsible</provet-tag> component has two main states:<dl><dtclass="n-font-weight-heading">Expanded</dt><dd><ul><li>This is the default state of the component.</li><li>The card content is fully visible and accessible to the user.</li></ul></dd><dtclass="n-font-weight-heading">Collapsed</dt><dd><ul><li> To render the card in a collapsed state, you can use the<i>collapsed</i> prop.</li><li> When collapsed, the card content is hidden, and only the header or title is visible.</li><li> This can be useful for conserving space or creating an accordion-style layout.</li></ul></dd></dl></CardCollapsible></template>
<template><CardCollapsibletitle="With padding value"padding="m"><provet-stack><p> The <provet-tagsize="s">CardCollapsible</provet-tag> component extends the Provet Cloud Design System<ahref="https://provetcloud.design/components/card/"target="_blank"> Card</a> component, which means you get all of the <i>properties</i>,<i>slots</i>, <i>CSS properties</i> and their default values.</p><p> Now, in most cases this component will have a padding different than the default value <i>("m")</i> set in the<provet-tagsize="s">provet-card</provet-tag>, the <i>padding</i> prop is initialized with the <provet-tagsize="s">"l"</provet-tag> overriding that value.</p></provet-stack></CardCollapsible></template>