Meta Attributes
Last updated
Last updated
In this article we look at what are meta attributes, how to use them & some common use cases.
Meta attributes allow you to tag elements in your HTML code with information that Dittofi can use to convert static HTML & CSS code into a high performance React web app. There are currently three main meta attributes: partial-id, actions & variables.
Let’s take a look at how each of these attributes work & what is the use case for your app development.
To use the partial-id meta attribute, you need to first have a partial created inside Dittofi. Partials are groups of elements that you can reuse throughout your app. When using meta attributes, the partial can just be an empty placeholder to begin with, as shown below.
Notice that each partial has an ‘id’ associated with it. For example the Partial called Modal Order in the image above has an id 104.
The partial-id meta attribute allows you to tag groups of elements in your HTML code with the a partial id. This is shown in the snippet of HTML code below.
When you import this block of HTML code into your app, Dittofi will pick out the partial-id meta attribute & translate this into reusable partial with an id equal to 1.
Note
If you design your partials inside Dittofi, Dittofi will automatically add the partial-id meta attribute to your HTML code.
The actions meta attribute allows you to create frontend actions, with ids & triggers directly from within your HTML code. For instance, the following block of code will create an action with an id of 29893 & a trigger of ‘onClick’.
This means that you can take any HTML template & then turn this into a React template simply by applying the actions meta attribute.
Note
If you attach actions to elements inside Dittofi, Dittofi will automatically add the actions meta attribute to your HTML code.
The fastest way to build a well styled web app is to pick a template either from Dittofi’s template marketplace, or from popular template libraries such as themeforest or the Webflow tempaltes.
After you’ve chosen a template, you can import the HTML & CSS directly into Dittofi. Using the actions & variables meta attributes, Dittofi will automatically convert your HTML & CSS code into a React web app.
At the same time, Dittofi will scan your imported code for the partial-id meta attribute & convert the elements into reusable collections of partials that you can use from within the Dittofi design studio.
