glhd/aire

Bootstrap custom form elements

Closed this issue · 5 comments

Can we use Bootstrap custom form elements? Custom file input in particular.

Describe alternatives you've considered
I tried to use the available addClass method to add custom-file-input to the element, but as expected it only hides the input. Is there currently a way to add classes to the group and the label so we can achieve the same effect?

This is the bootstrap sample code for a custom file input:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Right now, this should work:

Aire::file()->groupAddClass('custom-file')->addClass('custom-file-input');

I think that @amberlampsio has an idea for how to make that easier with the Bootstrap plugin.

That doesn't work. We still need to add custom-file-label to the label.

I couldn't find anything about custom file input in the bootstrap plugin.

@mokhosh I'm working on it, hang tight 🍻

Is it possible to change the views of the Bootstrap theme(https://glhd.github.io/aire/bootstrap) package? How can I do it? Thank's

@mokhosh @amberlampsio @inxilpro

Would you like to do something like this, would it be possible? any tips? Thanks

image

https://codepen.io/Qanser/pen/dVRGJv

In this case, I would like to change the structure of the field. Add HTML code for example make a checkbox with that code.

<label class="kt-checkbox kt-checkbox--success">
  <input type="checkbox"> Success state
  <span></span>
</label>

image

and if you could switch between themes. For example, on one page use the default theme and another bootstrap or your own.