How to reuse UI components

help
1

In my login template, I have the following UI component

    <div class='row'>
      <div class="input-field col s12">
        <i class="material-icons prefix">account_circle</i>
        <input type="text" id='emailUserName' name="emailUserName"/>
        <label for="emailUserName">User name or Email</label>
      </div>
    </div>

is that possible to reuse this UI component, such that I can dynamically change the UI’s icon, type, id and name, but meanwhile i can still pass the name to my login template ? Thanks.

2

Maybe something like this:

  <template name="emailUserName">
    <div class='row'>
      <div class="input-field col s12">
        <i class="material-icons prefix">{{icon}}</i>
        <input type="{{type}}" id='{{id}}' name="{{name}}"/>
        <label for="{{id}}">User name or Email</label>
      </div>
    </div>
  </template>

Add the widget to any template using:

{{> emailUserName icon="account_circle" type="text" id="emailUserName" name="emailUserName"}}

Change the parameters as required when instantiating the widget.

1 Like
3

Thank for the help :smiley: