Collapsible

CSS

vscode-collapsible p {
  font-size: var(--vscode-font-size);
  margin: 10px;
}

HTML

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

CSS

.collapsible ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.collapsible li {
  align-items: center;
  display: flex;
  height: 22px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 28px;
}

HTML

<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>
  <div slot="body">
    <p>
      Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
      efficitur augue.
    </p>
  </div>
</vscode-collapsible>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#btn-file-add').addEventListener('click', (event) => {
    // Stop the propagation of the event otherwise the component will close.
    event.stopPropagation();
    console.log('New File');
  });

  document.querySelector('#btn-refresh').addEventListener('click', (event) => {
    // Stop the propagation of the event otherwise the component will close.
    event.stopPropagation();
    console.log('Refresh');
  });
});

HTML

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

HTML

<vscode-collapsible
  title="Lorem ipsum dolor sit amet"
  description="consectetur adipiscing elit"
  class="collapsible"
>
  <div slot="body">
    <p>
      Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
      efficitur augue.
    </p>
  </div>
</vscode-collapsible>

HTML

<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>
  <div slot="body">
    <vscode-scrollable>
      <vscode-tree id="tree-example"></vscode-tree>
    </vscode-scrollable>
  </div>
</vscode-collapsible>

CSS

.collapsible.complex-example vscode-scrollable {
  height: 200px;
}

JavaScript

const icons = {
  leaf: 'circle-outline',
};
const tree = document.getElementById('tree-example');

document.getElementById('pin-icon').addEventListener('click', (ev) => {
  ev.stopPropagation(); 
});
document.getElementById('refresh-icon').addEventListener('click', (ev) => {
  ev.stopPropagation(); 
});
document.getElementById('filter-icon').addEventListener('click', (ev) => {
  ev.stopPropagation(); 
});

tree.data = [
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
  {icons, label: 'File Saved'},
];