![]() While this is valid for HTML & MJML attributes, it is not valid to use CSS styles on our HTML elements (as they should be inside a style attribute) htmlAttributes: this method adds to the rendered output the attributes that are passed to it as an argument, following the syntax attribute="value".Here is the important difference between the two: On line 4, we define that no other MJML component can be used inside it. On line 2 and 3, we define that mj-basic-component can be used inside mj-hero and mj-column. You’ll discover how to use and pass attributes in your own components, as well as how to make them render the output you want.įirst, we are registering the dependencies of our components, to state where it can be used. Let’s start with a component that simply outputs a text wrapped inside 2 star icons wrapped inside a HTML. Let’s now look at the custom components located in /components and start with the simplest one: MjBasicComponent.js. You now know how the gulp build command you ran earlier works! Creating your own component Pretty useful to build as you code your own component! watch: this task will watch any change made to the components located in /components as well as the index.mjml file and automatically run the compile function when changes are detected.build: this task will simply run the compile function when executed.In the first 13 lines, we’re importing all the dependencies needed (such as MJML but also each component located in /components), while from lines 14 to 16, we’re registering each component thanks to the registerComponent method of mjml-core (importing them only is not enough).įinally, we simply declare two gulp tasks, that are available with gulp *task* ( *task* being the actual name of the task as described below). : this file is responsible for building each component and registering them in MJML, so that they can be used in index.mjml.īefore looking at the components themselves, let’s look at the file to understand how to render our own components.You should not edit any file in this folder. /lib: this folder will contain the compiled output of the components located in /components./components: this folder contains the custom components we will use and that we are referring to in index.mjml. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |