How To Use Velo Mixins

What Is a Mixin?

A mixin is a class that exists solely to provide properties and functions to other classes. Using mixins, you can simulate inheritance between classes.

For example, I might have different classes for various elements, such as buttons, menus, datePickers, and dropdowns. Each of these elements are clickable. Instead of defining similar functions for each of them, I can "mix" the

ClickableMixininto

each each of these classes. Each class then has access to the same functionality.

Velo comes with several mixins that many of its APIs use. Velo mixins are Wix Editor Elements ($w).

This article describes and links to each mixin in the Velo Reference.

Which Functions and Properties Are From Mixins?

When looking at the Velo Reference, mixin functions and properties are described along with any functions and properties that are unique to the class. This gives you a complete list of any functions and properties you can use with the API, regardless of their source.

After an API's summary of functions and properties, before its Introduction, referenced mixins are listed. For example:

Click one of the links to see which functions and properties come from a mixin and not the current API you are viewing.

Note: Mixins can comprise other mixins. For example, the

HiddenCollapsedMixin

is a superset of the HiddenMixin and the

CollapsedMixin

Velo Mixins

The table below presents each mixin. Click its link to see its functions and properties in the Velo Reference.

CheckedMixin: Provides functionality for elements that can be be checked.
ClickableMixin: Provides functionality for elements that can be clicked.
CollapsedMixin: Provides functionality for elements that can be collapsed.
ContainableMixin: Provides functionality for elements that can contain other elements.
DisabledMixin: Provides functionality for elements that can be disabled.
Element: Provides basic functionality for elements.
Event: Provides properties for events that are fired when certain actions occur to elements.
FocusMixin: Provides functionality for elements that can set and lose focus.
FormElement: Provides functionality related to user input elements.
HiddenCollapsedMixin: Provides functionality for all elements that can be hidden or collapsed.
HiddenMixin: Provides functionality for elements that can be hidden.
LabelMixin: Provides functionality for elements that have a label.
LinkableMixin: Provides functionality for elements that can act as links.
Node: Provides functionality for all Wix objects, including objects that are not elements.
PlayableMixin: Provides functionality for elements that can be played.
ReadOnlyMixin: Provides functionality for input elements that support readonly mode.
RequiredMixin: Provides functionality for input elements that can be required to have a value.
Style: Provides an object representing an element's styles.
StyleMixin: Provides functionality for elements that can be styled.
TextInputMixin: Provides functionality for elements that accept text as input.
ValidatableMixin: Provides functionality for elements that can be validated.
ValueMixin: Adds the value property to elements.
ViewportMixin: Provides functionality for elements that can be scrolled into and out of view.

Previously published at https://support.wix.com/en/article/velo-about-mixins