Metronic8 Vue Problem
We purchased Metronic Vue (currently Metronic 8) two years ago for our portal development. However, we have always felt that the support for Form components is insufficient. If we use the ElementUI framework, it will not match the original style.
Do you have any further solutions for this issue?
Additionally, I would like to inquire if Metronic will support Vue Tailwind in the future?
Replies (7)
Hi,
We may release the Metronic Tailwind version in the near future. However, at the moment we can't promise any ETA. If you use ElementUI you will need to customize the base colors to match the Metronic style. This can be done quite easily since ElementUI allows easy and flexible customization options.
Regards.
Thank you for your response.
We know how to change the color of ElementPlus by rewriting the SaaS.
If you use both
<input type="text" class="form-control" placeholder="Please input" />and
<el-input v-model="input" placeholder="Please input" />on the same screen, the inconsistency is clearly noticeable.
Especially regarding the part about size.
Hi,
At the moment, we are using Element Plus default styles without any additional customization, Element Plus provides many great components which can be used on your website but default styles will differ from the theme style.
Usually, as you can see in our demos, in forms we are using only Element Plus input components without combining them with plain HTML fields. This is a recommended scenario for using Element Plus input fields in Metronic.
And you still can reuse any of the form elements from our HTML version, which will follow theme main style.
https://preview.keenthemes.com/html/metronic/docs/forms/autosize
Let me know if you will need any further help on this.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for your response.
The components in the Metronic HTML version are more complete, but we mainly develop our project using Vue, so we would like to inquire about the level of support for this part.
Since portal development requires some Form components in element Plus, but we also find that the form components in the original Metronic's style are more beautiful, we would like to ask if there are any plans to support Element Plus customization in the future?
Hi,
Element Plus is a temporary solution since many users were asking to add it inside a default package, once Bootstrap 5 Vue 3 package will be released we will fully migrate to it. Most of the plugins provided in our HTML theme have a Vue version, in our to-do list, we already have a task about adding new plugins to Metronic Vue. Once available plugins in Metronic Vue will be able to cover most of the user requirements we will remove Element Plus.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you for the information.
We saw that the current version of Metronic 8.1.8 includes Vue Multiselect for search functionality in Select.
However, if we want to use it together with other Form components (non-ElementPlus) on the same page, there may be inconsistency in color and size.
Is there a way to adjust this?
Hi,
Thank you for your feedback.
I will prepare some examples and will include them in the next Metronic release.
For now, you can just include additional styles which will override multi-select default styles and will make a component look more similar to the theme style.
<style lang="scss">
:root {
--ms-font-size: 1.1rem;
--ms-line-height: 1.5;
--ms-bg: var(--bs-white);
--ms-bg-disabled: var(--bs-gray-200);
--ms-border-color: var(--bs-gray-300);
--ms-border-width: var(--bs-border-width);
--ms-border-color-active: var(--bs-gray-300);
--ms-border-width-active: 1px;
--ms-radius: 0.475rem;
--ms-py: 0.5rem;
--ms-px: 0.875rem;
--ms-ring-width: 3px;
--ms-ring-color: var(--bs-primary-light);
--ms-placeholder-color: var(--bs-gray-500);
--ms-max-height: 10rem;
--ms-caret-color: var(--bs-gray-600);
--ms-clear-color: var(--bs-gray-600);
--ms-clear-color-hover: var(--bs-gray-800);
--ms-tag-font-size: 0.875rem;
--ms-tag-line-height: 1.25rem;
--ms-tag-font-weight: 500;
--ms-tag-bg: var(--bs-primary);
--ms-tag-bg-disabled: var(--bs-gray-500);
--ms-tag-color: var(--bs-white);
--ms-tag-color-disabled: var(--bs-white);
--ms-tag-radius: 4px;
--ms-tag-py: 0.125rem;
--ms-tag-px: 0.5rem;
--ms-tag-my: 0.25rem;
--ms-tag-mx: 0.25rem;
--ms-tag-remove-radius: 4px;
--ms-tag-remove-py: 0.25rem;
--ms-tag-remove-px: 0.25rem;
--ms-tag-remove-my: 0rem;
--ms-tag-remove-mx: 0.125rem;
--ms-dropdown-bg: var(--bs-white);
--ms-dropdown-border-color: var(--bs-gray-300);
--ms-dropdown-border-width: 1px;
--ms-dropdown-radius: 4px;
--ms-group-label-py: 0.3rem;
--ms-group-label-px: 0.75rem;
--ms-group-label-line-height: 1.375;
--ms-group-label-bg: #e5e7eb;
--ms-group-label-color: #374151;
--ms-group-label-bg-pointed: #d1d5db;
--ms-group-label-color-pointed: #374151;
--ms-group-label-bg-disabled: #f3f4f6;
--ms-group-label-color-disabled: #d1d5db;
--ms-group-label-bg-selected: var(--bs-primary);
--ms-group-label-color-selected: var(--bs-white);
--ms-group-label-bg-selected-pointed: var(--bs-primary);
--ms-group-label-color-selected-pointed: var(--bs-white);
--ms-group-label-bg-selected-disabled: var(--bs-text-primary);
--ms-group-label-color-selected-disabled: var(--bs-primary-light);
--ms-option-font-size: 1rem;
--ms-option-line-height: 1.375;
--ms-option-bg-pointed: var(--bs-gray-300);
--ms-option-color-pointed: #1f2937;
--ms-option-bg-selected: var(--bs-primary);
--ms-option-color-selected: var(--bs-white);
--ms-option-bg-disabled: var(--bs-white);
--ms-option-color-disabled: #d1d5db;
--ms-option-bg-selected-pointed: var(--bs-primary);
--ms-option-color-selected-pointed: var(--bs-white);
--ms-option-bg-selected-disabled: var(--bs-white);
--ms-option-color-selected-disabled: var(--bs-primary-light);
--ms-option-py: 0.5rem;
--ms-option-px: 0.75rem;
--ms-empty-color: #4b5563;
}
multiselect .multiselect {
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5;
color: var(--bs-gray-700);
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: 1px solid var(--bs-gray-300);
appearance: none;
border-radius: 0.475rem;
}
multiselect .multiselect-wrapper {
padding: 0.775rem 1rem;
}
</style>Regards,
Lauris Stepanovs,
Keenthemes Support Team
