Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(