Back

Custom tags

Create a new tag

Create a tag file

A tag is a bundle, which can have a HTML-tab, a JavaScript-tab. CSS-tab and can also contain one or more PHP tabs. All these elements are optional. A tag can be anything, like an entire page, a specific form element (e.g. a tag for entering numbers, a checkbox), a snippet of a page (e.g. a product snippet). They are reusable and can have parameters. A "user registration" can for example be a tag, which also has a PHP-tab, to get the data from the registred user and save it in a database.

HTML tab

<div class="text"> <label>{this.label}</label> <input type="text" name="{this.name}" value="{this.value}"> </div>

Register your tag

As soon as your tag is being used, the framework will download the component. If you use the editor and add the component as a dependency, the component is registered automatically and you don't have to write this.

Tag.register('text','/tags/components/text.html');

Call your tag

A tag contains everything it needs in a file.

<text label="Firstname" name="firstname"></text>

Result

Extend your tag with JS / CSS

The script tag should only contain one class which extends the class Tag.

The CSS should contain all the basic styles, the component needs to render. It is recommoended to apply your brand colors, etc. in a separate stylesheet and use the styles here for functional CSS which is requried by the component to work.

JavaScript tab

class Text extends Tag { init() { this.label += ':'; } submit() { alert('submitted ' + this.input.value); } }

HTML tab

<div class="text"> <label>{this.label}</label> <input element="input" type="text" name="{this.name}" value="{this.value}"> <button (click)="this.submit()">Ok</button> </div>

CSS tab

.text label { color: blue; }

Set tag variables

Here we set a static string and a javascript array

<dropdown label="Movie" options="{[{name:'Please choose...'},{name:'test',value:'test'}]}"></dropdown>

Use a local variable from your tag:

<dropdown label="Countries" options="{this.countries}"></dropdown>

It's also possible to define your parameters in XML

<dropdown label="Language"> <options array=""> <option name="Please choose..." value="Please choose"></option> <option name="German" value="de"></option> <option name="French" value="fr"></option> <option name="English" value="en"></option> </options> </dropdown>

Result

Available methods

JavaScript tab

class Currency extends Tag { init() { this.message = 'Hi!' } render(browserElement) { this.input.value = 'Initial Value'; this.input.setAttribute('autocomplete', 'off'); } }

HTML tab

<div class="text"> {this.message} <input element="input"> </div>
  • init
    This method is called when your tag is initialized the first time. You have access to all the attributes and parameters.
  • render(browserElement)
    This method is called, when the html element dom for your tag has been rendered, including all child elements. You can access children with the
    <a element="elFirstname"></a>

Create your own chessboard

JavaScript tab

class Chessboard extends Tag { init() { this.rows = [1,2,3,4,5,6,7,8]; this.cols = [1,2,3,4,5,6,7,8]; } }

HTML tab

<div> <div class="rows" for="row of this.rows"> <div class="cols" for="col of this.cols"> <div class="cell { (col + row) % 2 ? 'black' : 'white' }"></div> </div> </div> </div>

CSS tab

.cell { display:inline-block; width:40px; height:40px } .rows { border:1px solid black; width: 320px; background: white; } .cols { height:40px; } .black { background:black; }