Mavo

Storage

The property attribute tells Mavo which elements are important, e.g. are saved, editable, used in expressions, or all three. Elements with this attribute are often referred to as properties or property elements.

Property name rules

Its value should describe the element, similarly to a id or class attribute. It can contain only letters, numbers and underscores (_). If it happens to be the same as the element’s id or class attributes, you don’t need to provide a value. For example, the following are all equivalent:

If you need inspiration for names, you could look at schema.org.

Editing

If the property attribute is used on elements that are not form elements, they are made editable, and Mavo generates a button for switching between modes:


You can put the property attribute on any HTML5 element, and Mavo knows how to make it editable:

Mavo can also be taught about new element types with different ways to be edited (e.g. rich text), via plugins.

The mv-attribute attribute

Mavo automatically assumes that the data each property element holds is stored either as its content or in a "primary" attribute, different per element type. Most of the time this works great, and you don't have to think about it. However, sometimes this heuristic will fail. In those cases, you can correct Mavo's prediction by using the mv-attribute attribute. Its value is either the name of the attribute that holds data, or none for no attribute (element contents).

For example, an <a> element's primary data attribute is href. However, sometimes you want to make the content editable instead, and even reference it in the href attribute via an expression. You can use the mv-attribute for that:

The mv-mode attribute

Possible values: edit or read.

The purpose of this attribute is twofold:

  1. Mavo sets mv-mode="edit" on properties when they are being edited. This allows you to customize your design in the editing state by using [mv-mode="edit"] selectors
  2. If you use mv-mode="read" or mv-mode="edit" on a property, Mavo applies that state and does not change it when the state of the rest of the app changes. You can change it yourself, via expressions.

The latter allows many cool things: