How to use 3rd party styling frameworks? about vue-formulate-legacy HOT 5 CLOSED

I fixed that specific issue, more or less, with :

div[class="formulate-element-input-wrapper"] button { 
    color: inherit;
    width: inherit;
      etc
      etc
      etc

 }

...but I believe I'd need a long list of those :-(

from vue-formulate-legacy.

I’ve debated adding some kind of support for inner classes or attributes. Might be worth doing. My main concern is people will use front end frameworks with lots of js layers that I don’t want to support. There is an undocumented way to use your own input elements. But perhaps adding classes wouldn’t be too bad.

from vue-formulate-legacy.

The issue for me is that this upbeat remark in your docs...

Absolutely zero styles are included so feel free to write your own!

...doesn't go on to say, "(except, the element you'll most want to style is inaccessible)"

:-) See what I mean?

from vue-formulate-legacy.

I do. Although like I said, this is largely intentional as they are easily styled by hand, just not by frameworks (which was kinda the point). Frameworks like bootstrap for example add lots of js and wrapper elements which vue-formulate will never support – so I suppose use at your own risk. If you do want to write your own styles the .formulate-element-input-wrapper always has a data-classification attribute which indicates the "type" of field, for example (scss):

[data-classification="text"] {
  input {
    // your custom textual input styles
  }
}

[data-classification="button"] {
  input, button {
    // your custom button styles
  }
}

[data-classification="select"] {
  select {
    // your custom select styles
  }
}

However, I also don't think its unreasonable to ask for class names on the actual input element. I'll add some kind of support for this.

from vue-formulate-legacy.

@martinhbramwell element-classes attribute was added to 0.7.4. Enjoy!

from vue-formulate-legacy.