Creating Custom VDL Extensions
Custom extensions can be defined directly in VDL, making it simple to form the language in a way that closely models your problem domain.
<vdl-extension name="my-banner">
<vdl-template>
<div class="banner">
<h1><vdl-contents></vdl-contents></h1>
</div>
</vdl-template>
</vdl-extension> Once defined like this, you can subsequently use markup such as:
<my-banner>Welcome</my-banner>Resulting in generated HTML such as:
<div class="banner">
<h1>Welcome</h1>
</div> The heavy lifting starts with the
<vdl-extension> element which takes a single attribute -
name - that defines the new tag name.
|
Important All VDL tags must be namespaced - this takes the form of two words separated by a hyphen. To attempt to define a custom extension without a namespace is an error. Namespaces help to minimize collisions between sets of tags and you are encouraged to define your own prefix(es) for grouping and identification purposes.
|
The <vdl-extension> element supports a range of possible markup but two tags in particular are important at this stage: <vdl-template> and <vdl-contents>.
<vdl-template>
This element tells the parent <vdl-extension> element what markup to augment your extension with when it is used later in the view. In the above example, the <vdl-template> element included a <div> element and a <h1> element which were placed into the generated view when the <my-banner> element was used.
<vdl-contents>
Within a <vdl-template> element, you use a <vdl-contents> element to inform VDL that any contents of the later usage of our custom extension should be inserted at runtime at this point. The word Welcome in <my-banner>Welcome</my-banner> replaced the <vdl-contents> element for the generated markup. The contents can be any combination of text, VDL and HTML tags.
While this takes a little time to set up, the <my-banner> element is now part of the VDL language for your current view and can be used exactly the same way as any other VDL or HTML element.