Question

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

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>

Answer 2

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

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

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

Answer 3

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

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

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

例如，您可以通过覆盖 $input-font-size: 18px; 变量来更改文本字段的字体大小

Answer 4

您可以按如下所示按名称进行引用。

在您的模板代码中：

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

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

添加密集

from subprocess import run, PIPE

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

5 个答案: