如何在Vuetify中删除填充或边距?

时间:2018-11-17 21:09:22

标签: javascript html vuetify.js

The doc告诉我可以使用帮助器类来更改填充/边距。我想从输入字段中删除填充,所以我需要的类是pa-0{property}{direction}-{size}):

<v-text-field v-model="mon" pa-0 solo></v-text-field>

JSFiddle在这里

不起作用。有想法吗?

编辑:我意识到与本地设置相比,我在JSFiddle中获得了完全不同的标记,这使我感到困惑:

Vuetify在本地生成的标记(这里我想删除<input>元素内的垂直填充和<div class="v-input__slot">元素上的水平填充):

<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>

由Vuetify在JSFiddle上使用完全相同的Vuetify代码(<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>

整个文档中缺乏示例确实没有帮助。

2 个答案:

答案 0 :(得分:14)

使用hide-details选项:<v-text-field hide-details></v-text-field>删除底部边距,该底部边距是由于用于显示详细信息的详细信息字段(如果有)而出现的。

答案 1 :(得分:8)

使用spacing helpers

class="ma-0"删除边距
class="pa-0"删除填充
class="ma-0 pa-0"删除

请注意,这些也是道具,但仅用于某些(网格)组件,因此例如:
<v-text-field class="pa-0"></v-text-field>将起作用,
并且<v-text-field pa-0></v-text-field>将不起作用。

在顶级元素上添加了类,因此,如果在某些组件中您无法删除这些类的子元素间距,则可能需要使用CSS定位相关元素。


为避免使用!important,请在组件上添加自定义类并检查要编辑的元素,然后检查用于定位的元素-例如.v-input__slot(我们只需要突出显示的目标):

enter image description here

然后像这样替换它(custom-text-field是应用于组件的任意自定义类)

.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
  padding: 0;
}