Collapse
#

Toggles the visibility of content.

Examples
#

Default
#

Default usage of the va-collapse component.

Open in GitHub

Solid
#

Add borders to your collapse component by using the solid property.

Open in GitHub

Icon
#

You can add an icon to the header.

Open in GitHub

Color
#

Use two color schemes.

Open in GitHub

Flat
#

Open in GitHub

Props #

NameDescriptionTypesDefault
color

Color of the component (theme string or HEX string).

String

"background-element"

color-all

Applies color to collapse contents background

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

flat

Disables shadows and borders

Boolean

false

header

Text content to place in the header

String

""

icon

The icon to be displayed inside a header

String

""

model-value

The value of the v-model bindings.

Boolean

-

preset

Named preset combination of component props.

String

-

solid

Adds borders to the collapse

Boolean

false

text-color

Text color (theme string or HEX string).

String

""

Events #

NameDescription

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

default

Collapsable content of the component

header

Replaces the whole component's header block

headerContent

Replaces component's header block inner content

Css Variables #

NameDefault 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