Collapsible
Tag name: <vscode-collapsible>
Allows users to reveal or hide related content on a page.
Properties
description
| Name | description |
|---|---|
| Attribute | description |
| Type |
|
| Default |
|
| Description | Less prominent text than the title in the header |
openreflects
| Name | open |
|---|---|
| Attribute | open |
| Type |
|
| Default |
|
title
| Name | title |
|---|---|
| Attribute | title |
| Type |
|
| Default |
|
| Description | Component heading text |
versionreadonly
| Name | version |
|---|---|
| Type |
|
| Description | VSCode Elements version |
Events
vsc-collapsible-toggle
| Name | vsc-collapsible-toggle |
|---|---|
| Type | VscCollapsibleToggleEvent |
| Description | Dispatched when the content visibility is changed. |
Slots
default/unnamed
| Description | Main content. |
|---|
actions
| Description | You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open. |
|---|
decorations
| Description | The elements placed in the decorations slot are always visible. |
|---|
CSS Custom Properties
--vscode-focusBorder
| Name | --vscode-focusBorder |
|---|---|
| Default value | #0078d4 |
| Description | Focus border color |
--vscode-font-family
| Name | --vscode-font-family |
|---|---|
| Default value | sans-serif |
| Description | Header font family |
--vscode-icon-foreground
| Name | --vscode-icon-foreground |
|---|---|
| Default value | #cccccc |
| Description | Arrow icon color |
--vscode-sideBar-background
| Name | --vscode-sideBar-background |
|---|---|
| Default value | #181818 |
| Description | Background color |
--vscode-sideBarSectionHeader-background
| Name | --vscode-sideBarSectionHeader-background |
|---|---|
| Default value | #181818 |
| Description | Header background |
--vscode-sideBarTitle-foreground
| Name | --vscode-sideBarTitle-foreground |
|---|---|
| Default value | #cccccc |
| Description | Header font color |
CSS Parts
body
| Description | Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior. |
|---|