Collapse #
Toggles the visibility of content.
Examples #
Default #
Default usage of the va-collapse
component.
Solid #
Add borders to your collapse component by using the solid
property.
Icon #
You can add an icon to the header.
Color #
Use two color schemes.
Flat #
Props #
Name | Description | Types | Default |
---|---|---|---|
color | Color of the component (theme string or |
|
|
color-all | Applies color to collapse contents background |
|
|
disabled | Applies |
|
|
flat | Disables shadows and borders |
|
|
header | Text content to place in the header |
|
|
icon | The icon to be displayed inside a header |
|
|
model-value | The value of the |
| - |
preset | Named preset combination of component props. |
| - |
solid | Adds borders to the collapse |
|
|
text-color | Text color (theme string or HEX string). |
|
|
Events #
Name | Description |
---|---|
update-model-value | 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 |