问题描述
然后将其替换为( custom- text-field
是应用于组件的任意自定义类)
.custom-text-field。 v-text-field.v-text-field - 附带.v-input__slot {
padding:0;
}
The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0
({property}{direction}-{size}
):
<v-text-field v-model="mon" pa-0 solo></v-text-field>
JSFiddle here
Doesn't work. Any idea?
EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:
Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input>
element and horizontal padding on <div class="v-input__slot">
element):
<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
<div class="v-input__control">
<div class="v-input__slot" style="">
<div class="v-text-field__slot">
<input type="text" pa-0="">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>
):
<div class="input-group input-group--text-field">
<div class="input-group__input">
<input outline="" pa-0="" tabindex="0" type="text">
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
The lack of examples throughout the docs REALLY doesn't help.
use spacing helpers:
class="ma-0"
removes marginsclass="pa-0"
removes paddingclass="ma-0 pa-0"
removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field>
will work,
and <v-text-field pa-0></v-text-field>
will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important
, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot
(we only need highlighted target):
Then replace it like so (custom-text-field
is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
这篇关于如何删除Vuetify中的填充或边距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!