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

String

"background-element"

colorAll

Boolean

false

disabled

Boolean

false

flat

Boolean

false

header

String

""

icon

String

""

modelValue

Boolean

-

preset

String

-

solid

Boolean

false

textColor

String

""

Events #

NameDescription

update:modelValue

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