Collapse #
Toggles the visibility of content.
Examples #
Default #
Default usage of the va-collapse component.
Collapse header
expand_moreSolid #
Add borders to your collapse component by using the solid property.
Collapse header
expand_moreIcon #
You can add an icon to the header.
home
Collapse header
expand_moreColor #
Use two color schemes.
Collapse header
expand_moreCollapse header
expand_moreCollapse header
expand_moreinfo
Collapse header
expand_moreFlat #
Flat collapse
expand_moreProps #
| Name | Description | Types | Default |
|---|---|---|---|
| color |
|
| |
| colorAll |
|
| |
| disabled |
|
| |
| flat |
|
| |
| header |
|
| |
| icon |
|
| |
| modelValue |
| - | |
| preset |
| - | |
| solid |
|
| |
| textColor |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
default | Collapsable content of the component |
header | Replaces the whole component's header block |
headerContent | Replaces component's header block inner content |
Css Variables #
| Name | Default Value |
|---|---|
| --va-collapse-transition | all 0.3s linear |
| --va-collapse-popout-margin | 0.5rem -0.5rem |
| --va-collapse-inset-margin | 0.5rem 0.5rem |
| --va-collapse-body-wrapper-transition | all 0.3s linear |
| --va-collapse-body-width | 100% |
| --va-collapse-header-content-display | flex |
| --va-collapse-header-content-justify-content | space-between |
| --va-collapse-header-content-cursor | pointer |
| --va-collapse-header-content-background-color | #f5f8f9 |
| --va-collapse-header-content-box-shadow | var(--va-box-shadow) |
| --va-collapse-header-content-border-radius | 0.375rem |
| --va-collapse-header-content-align-items | center |
| --va-collapse-header-content-padding-top | 0.75rem |
| --va-collapse-header-content-padding-bottom | 0.75rem |
| --va-collapse-header-content-padding-left | 1rem |
| --va-collapse-header-content-text-width | 100% |
| --va-collapse-header-content-text-font-weight | 600 |
| --va-collapse-header-content-icon-min-width | 1.5rem |
| --va-collapse-header-content-icon-margin-left | 0.5rem |
| --va-collapse-header-content-icon-margin-right | 0.5rem |
| --va-collapse-header-content-icon-color | var(--va-background-element) |
| --va-collapse-solid-box-shadow | var(--va-box-shadow) |
| --va-collapse-solid-border-radius | 0.375rem |
| --va-collapse-solid-header-content-background-color | #f5f8f9 |
| --va-collapse-solid-header-content-box-shadow | none |
| --va-collapse-solid-header-content-border-radius | 0.375rem |
| --va-collapse-solid-header-content-transition | background-color ease-in 0.3s |
| --va-collapse-solid-body-border-radius | 0 0 0.375rem 0.375rem |
| --va-collapse-solid-body-margin-top | 0 |