Vue 3 multiselect SCSS
Hello,
We need to use a multiselect in the project, but for some reason, there are no adapted styles for Metronic. It looks completely different, and there's no dark theme available.
I couldn't find any adaptation for the multiselect in the plugins folder, and I can't find the SCSS for adaptation.
Could you please clarify if such a file exists, or do we need to create it ourselves? If so, why was it even included in Metronic if it uses the standard styles?
Replies (3)
Hi,
Sorry for the late reply.
The Vue3-Multiselect component was added based on customer requests. Currently, it doesn't fully integrate with our main style system. Since it was added sometime ago it hasn't been tested with Metronic's dark mode, we will fix this in the next Metronic releases.
For now, you can use the Element Plus select component:
Element Plus select component.
It doesn't fully integrate with Metronic's styles either, but it changes color based on the selected mode.
Another option is to add jQuery and use the Select2 solution from our HTML version:
https://preview.keenthemes.com/html/metronic/docs/forms/select2.
Please let me know if you have more questions on this topic or with anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Element Plus doesn't work. Ok, I made it myself, I will wait for your release, if anything I will replace it.
Perhaps you will also be useful, in _nouislider.scss there is not enough style for [disabled], the one specified in the styles of the component itself is interrupted by the line:
.noUi-connect {
background: var(--#{$prefix}component-active-bg);
}I fixed the added and now it displays <pre></pre>correctly when the element is disabled
&[disabled] .noUi-connect {
background: var(--#{$prefix}gray-300);
}Hi,
Thank you for your feedback.
We will check this and include an update in the next release.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
