Menu
I recently use Vuetify to implement some UI designs. However, I found the default input component (such as v-text-field, v-select) are too large. I found that I can adjust the width of them, but for the height and font size, how can I change them?
956
Customizing. By default, Vuetify has a standard theme applied for all components. This can be easily changed. Simply pass a theme property to the Vuetify constructor.
We can use the v-resize directive to call a function when the window resizes. We add the v-resize directive on the v-row so that we can run the onResize method when the window resizes. Then we'll see the value of the this. windowSize state on the template.
Quasar framework is often compared against Vuetify since both of them implement Material Design guidelines. Quasar provides a more controlled ecosystem that can make you productive on web/desktop/mobile UI development and also provide “more useful” components.
The v-spacer component is useful when you want to fill available space or make space between two components.
I have had some success using CSS transform to shrink everything:
.compact-form { transform: scale(0.875); transform-origin: left; } Just add that to your form. Its takes the font-size down to 14px (instead of 16) and shrinks the checkboxes and so on as well.
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
