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

Question

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

Answer 1

尽管您可以使用 :style 绑定，但要获得您想要的东西，您必须求助于 CSS。

您可以使用 !important 到 "force in" 您的样式，但有其他方法可以在没有它的情况下使用它。请参阅下面的演示。

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>

Answer 2

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

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

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

Answer 3

您可以直接按名称引用如下。

在您的模板代码中：

<v-text-field
    class = "inputField input-name p-3 styled-input"
    label="username"
    name="username"
    type="text"
    :state="nameState"
    v-model="credentials.username"
    :rules="rules.username"
    color="#01579B"
    box
    required
/>

在您的样式代码中：

.input-name {
    background-color: #ffffff;
    margin-top: 10px;
}

Answer 4

我认为应该始终使用原生 vuetify 方式，而不是仅仅使用相同或更强的 CSS 选择器，甚至进行一些 CSS 转换来改变整个元素的大小...

您可以在 Vuetify 文档中查找所有变量（每个组件都可以找到更多变量）： https://vuetifyjs.com/en/api/vuetify/#sass-variables

确保检查如何启用覆盖变量的可能性： https://vuetifyjs.com/en/features/sass-variables/

例如，您可以通过覆盖 $input-font-size: 18px; 变量

来更改文本字段的字体大小

Answer 5

https://vuetifyjs.com/en/api/v-text-field/#props

加密

<v-text-field dense></v-text-field>

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

Is it possible to resize vuetify components?

vue.js

vue-component

vuetify.js