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 |