TerryZ / v-suggest

A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
https://terryz.github.io/vue/#/suggest
MIT License
76 stars 16 forks source link

How to add class from css framework? #16

Open rzwibowo opened 4 years ago

rzwibowo commented 4 years ago

Result: input field doubled, in the back is styled input, and in the front is v-suggest styled input image

Expected: input field styled according to class applied from css framework (eg.: bootstrap with .form-control)

TerryZ commented 4 years ago

Try to add class attribute directly.

<v-suggest :data="data" class="the class you want">
</v-suggest>
rzwibowo commented 4 years ago

Try to add class attribute directly.

<v-suggest :data="data" class="the class you want">
</v-suggest>

I've been playing around in your codepen example and the result is like the screenshot I attached on my first edited issue comment

TerryZ commented 4 years ago

v-suggest dom elements structure like below: image

You have to write some css style to overwrite the original css content

/* the css(scss) content in your page */
div.v-suggest {
  input[type=text] {
    /* the css content you want to customize */
  }
}
rzwibowo commented 4 years ago

Yup, it's what I planned to try before. With your answer, now I know what specific selector I should overwrite. Thanks for your kind response!