Skip to content

Collapsible

Basic example

Open by default

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Basic example" open>
<p>Open by default</p>
</vscode-collapsible>
<vscode-collapsible title="Basic example">
<p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
</vscode-collapsible>

Toggle event

A custom event is dispatched when the visibility of content changes.

Test content

<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
<p>Test content</p>
</vscode-collapsible>

Actions

Clickable action icons. Please review the developer console for logged messages. These icons are visible exclusively when the component is in the opened state.

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Actions example" class="collapsible" open>
<vscode-icon
name="file-add"
action-icon
aria-role="button"
id="btn-file-add"
title="New File"
slot="actions"></vscode-icon>
<vscode-icon
name="refresh"
action-icon
aria-role="button"
id="btn-refresh"
title="Refresh"
slot="actions"></vscode-icon>
<p>
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
efficitur augue.
</p>
</vscode-collapsible>

Decorations

Elements in the decorations slot are always visible, in contrast to the actions slot.

99

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Decorations example" class="collapsible">
<vscode-badge variant="counter" slot="decorations">99</vscode-badge>
<p>
Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
efficitur augue.
</p>
</vscode-collapsible>

Overflown content

The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior can be problematic. In such cases, it is useful that the Collapsible body is customizable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum Dolor Sit Et Amur Sadispcing

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<vscode-single-select>
<vscode-option>Lorem</vscode-option>
<vscode-option>Ipsum</vscode-option>
<vscode-option>Dolor</vscode-option>
<vscode-option>Sit</vscode-option>
<vscode-option>Et</vscode-option>
<vscode-option>Amur</vscode-option>
<vscode-option>Sadispcing</vscode-option>
</vscode-single-select>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</vscode-collapsible>

Displaying large amounts of data

Long content can be managed by the Scrollable component.

<vscode-collapsible
title="Timeline"
description="vscode-collapsible.ts"
class="collapsible complex-example"
open
>
<vscode-icon name="pin" action-icon slot="actions" id="pin-icon"
></vscode-icon>
<vscode-icon name="refresh" action-icon slot="actions" id="refresh-icon"
></vscode-icon>
<vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
></vscode-icon>
<vscode-scrollable>
<vscode-tree id="tree-example"></vscode-tree>
</vscode-scrollable>
</vscode-collapsible>