Components

Build reusable components using includes with default attributes, custom tags, and slots.

Include with Default Attributes

Include files can define default attributes using a <what> block at the top. These defaults are used when attributes aren't passed.

With defaults:

Hello Guest, you are a Visitor

With custom values:

Hello Alice, you are a Admin


    <!-- In sections/user-card.html -->

    <what>

    attribute.name = "Guest"

    attribute.role = "Visitor"

    </what>

    <div>Hello #name#, you are a #role#</div>



    <!-- Usage with defaults -->

    <include src="sections/user-card.html"/>



    <!-- Override attributes -->

    <include src="sections/user-card.html" name="Alice" role="Admin"/>

Groups List Component

A component that displays a list of groups passed as an array attribute.

Groups passed as array:

Groups

Admins
Editors


    <!-- In sections/user-groups-card.html -->

    <div class="card">

      <div class="card-body">

        <h3>Groups</h3>

        <ul>

          <loop data="#groups#" as="group">

            <li>#group.name#</li>

          </loop>

        </ul>

      </div>

    </div>



    <!-- Usage: pass groups as JSON array -->

    <include src="sections/user-groups-card.html"

      groups='[{"id":1,"name":"Admins"},{"id":2,"name":"Editors"}]'/>