如何删除Vuetify中的填充或边距

如何删除Vuetify中的填充或边距

本文介绍了如何删除Vuetify中的填充或边距?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



然后将其替换为( 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 margins
class="pa-0" removes padding
class="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中的填充或边距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-27 21:41