web-dev-qa-db-ja.com

vuetifyコンポーネントのサイズを変更することはできますか？

最近、いくつかのUIデザインを実装するためにVuetifyを使用しています。しかし、デフォルトの入力コンポーネント（v-text-field、v-selectなど）が大きすぎることがわかりました。それらの幅を調整できることがわかりましたが、高さとフォントサイズについては、どのように変更できますか？

vue.jsvue-componentvuetify.js
11
Ternence.Lin

: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/[email protected]/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/[email protected]/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>
5
acdcjunior

CSS変換を使用してすべてを縮小することに成功しました。

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

それをフォームに追加するだけです。フォントサイズを（16ではなく）14ピクセルに縮小し、チェックボックスなども縮小します。

7
David Tinker

次のように名前で参照できます。

テンプレートコードで：

<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;
}
0
Jorge Cardenas