search

gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.
http://www.alpacajs.org
Other
1.29k stars 371 forks source link

Different button color #711

Open veso266 opened 5 years ago

veso266 commented 5 years ago

Hi is it possible to change this buttons

'actionbar' => array (
                    'showLabels' => true,
                    'actions' => array (
                            0 =>
                                array (
                                    'label' => ' ',
                                    "buttonClass" => 'btn btn-primary', //I would like to change this from btn btn btn-secondary to btn btn-primary
                                    "iconClass" => "far fa-plus", 
                                    'action' => 'add',
                                ),

is this possible without using templates maybe adding buttonClass where I could change which button is shown, or tell me which template I need to change to add buttonClass to my own template?

Untitled

Thanks for Anwsering and Best Regards

veso266 commented 5 years ago

for anyone figuring out the same thing, you use templates, you need to change container-array-actionbar so put this into your view

{  
   "parent":"bootstrap-edit",
   "templates":{  
      "container-array-actionbar":"youtemplate.html"
   }
}

and put this into your template

<script type="text/x-handlebars-template" id="action=">

    <div class="alpaca-array-actionbar alpaca-array-actionbar-{{actionbarStyle}} btn-group" data-alpaca-array-actionbar-parent-field-id="{{parentFieldId}}" data-alpaca-array-actionbar-field-id="{{fieldId}}" data-alpaca-array-actionbar-item-index="{{itemIndex}}">
        {{#each actions}}
        <button class="alpaca-array-actionbar-action {{#if this.buttonClass}} {{this.buttonClass}} {{else}}{{../view.styles.smallButton}}{{/if}}" data-alpaca-array-actionbar-action="{{action}}">
            {{#if this.iconClass}}
            <i class="{{this.iconClass}}"></i>
            {{/if}}
            {{#if label}}{{{label}}}{{/if}}
        </button>
        {{/each}}
    </div>

</script>

in your template you use Handlebars to create if and else and so on

so now you can use buttonClass to style your button

so this should work now 😄 

'actionbar' => array (
                    'showLabels' => true,
                    'actions' => array (
                            0 =>
                                array (
                                    'label' => ' ',
                                    "buttonClass" => 'btn btn-primary btn-large', //I would like to change this from btn btn btn-secondary to btn btn-primary
                                    "iconClass" => "far fa-plus", 
                                    'action' => 'add',
                                ),

now if buttonClass could make in into master branch that would be great 😄 cuz I realy don't want to use templates to style many different buttons