是否可以调整 vuetify 组件的大小？

Question

我最近使用 Vuetify 来实现一些 UI 设计。但是，我发现默认的输入组件（例如 v-text-field、v-select）太大了。我发现我可以调整它们的宽度，但是对于高度和字体大小，我该如何更改它们？

原文由 Ori.Lin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然您可以使用 :style 绑定，但要获得您想要的，您必须求助于 CSS。

您可以使用 !important 来“强制”您的样式，但是有一些替代方法可以使其在没有它的情况下工作。请参阅下面的演示。

 new Vue({
  el: '#app'
});

 #styled-input {
  height: 40px;
  font-size: 20pt;
}
.styled-input label[for] {
  height: 40px;
  font-size: 20pt;
}

 <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.js'></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row>
        <v-flex>
          <v-text-field name="input-1" label="Regular Input"></v-text-field>
          <v-text-field name="input-1" label="Styled Input" id="styled-input" class="styled-input"></v-text-field>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用 CSS 变换来缩小所有内容取得了一些成功：

 .compact-form {
    transform: scale(0.875);
    transform-origin: left;
}

只需将其添加到您的表单中即可。它将字体大小降低到 14 像素（而不是 16 像素）并缩小复选框等等。

原文由 David Tinker 发布，翻译遵循 CC BY-SA 4.0 许可协议