Hoping for some assistance , I require an appended and prepended Input group addon As shown here on bootstrap.com into a alpaca.js form.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/> <div class="input-group"><span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div>
The template (handlebars) should look like the snippet below, however documentation on the site does not cover custom options and template editing like this.
<script type="text/x-handlebars-template"> {{#if options.component}} <div class="input-group"> {{#if options.prepend}} <span class="input-group-addon" id="basic-addon-prepend">{{options.prepend}}</span> {{/if}} {{/if}} <input type="{{inputType}}" id="{{id}}" {{#if options.placeholder}}placeholder="{{options.placeholder}}"{{/if}} {{#if options.size}}size="{{options.size}}"{{/if}} {{#if options.readonly}}readonly="readonly"{{/if}} {{#if name}}name="{{name}}"{{/if}} {{#each options.data}}data-{{@key}}="{{this}}"{{/each}} {{#each options.attributes}}{{@key}}="{{this}}"{{/each}}/> {{#if options.component}} {{#if options.append}} <span class="input-group-addon" id="basic-addon-append">{{options.append}}</span> {{/if}} </div> {{/if}} </script>
The question would be : Where should this code be changed ,and how should the modified template be executed ?
Thanks in advance!
If you're tring to use a custom template for a field you should set it into view object like this :
"view": {
"fields": {
"/username": {
"templates": {
"control-text": "#input-group-addon-template"
}
}
}
}
Here's a working fiddle for this. If this isn't what you're looking for please fill me with more details and I'll be glad to help :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.