Drops 101

Learn the basics of Moov Drops

Moov Drops are custom web components added to your page the same way you would add any HTML tag. Moov Drops are defined in the Moov.js package. After initializing Moov.js, you will have access to our full library of Drops.

1
2
3
4
5
6
7
8


<html>
  <head>
    <script src="https://js.moov.io/v1"></script>
  </head>
  <body>
    <moov-example-drop></moov-example-drop>
  </body>
</html>

Properties

You can configure a Drop via properties set through JavaScript. Properties can be accessed using a reference to the Drop’s HTML element (<moov-example-drop> in this case).

How to set a property

1
2


const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleProperty = 'example-value';

Attributes

For your convenience, string-type properties can be set directly on the HTML element through a corresponding attribute. Properties are written in camelCase, while attributes are written in kebab-case.

How to set an attribute

1
2
3


<moov-example-drop
  example-property="example-value"
></moov-example-drop>

tip

Attribute changes will always update the corresponding property.
However, for performance reasons, property changes will not update the corresponding attribute.

Methods

Some Drops expose functional properties called methods. You can call these methods to perform some action.

How to call a method

1
2


const exampleDrop = document.querySelector('moov-example-drop');
exampleDrop.exampleMethod('example-argument');

Themes

You can customize the look and feel of Moov Drops by editing our pre-defined CSS variables. Visit our guide on themes to learn more.