Hover
#

The va-hover component provides easy access to hover states for any component. To work with hover states you can use either v-model or slot-scoped hover property.

Examples
#

Default usage
#

You can use v-model to get access to hover state.

Open in GitHub

Slot based access
#

You are also free to use Vue default slot.

Open in GitHub

Disabled
#

Won't change value if disabled.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

modelValue

The value of the v-model bindings.

Boolean

false

preset

Named preset combination of component props.

String | Array

-

stateful

Add possibility to work with component without setting v-model.

Boolean

true

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model

Slots #

NameDescription

default

Vue default slot.

FAQ
#

Can I wrap multiple elements with va-hover?
#

Yes, but they will share the hover state value.