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 |