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

Question

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

Answer 1

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

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

只需将其添加到您的表单即可。它会将字体大小减小到14px（而不是16px），并缩小复选框等。

Answer 2

虽然你可以使用: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>