web-dev-qa-db-fra.com

Est-il possible de redimensionner des composants vuetify?

J'ai récemment utilisé Vuetify pour implémenter certaines conceptions d'interface utilisateur. Cependant, j'ai trouvé le composant d'entrée par défaut (tel que v-text-field, v-select) trop volumineux. J'ai constaté que je pouvais en ajuster la largeur, mais pour la hauteur et la taille de la police, comment puis-je les changer?

vue.jsvue-componentvuetify.js
5
Ternence.Lin

Bien que vous puissiez utiliser les liaisons :style, pour obtenir ce que vous voulez, vous devrez recourir à CSS.

Vous pouvez utiliser !important pour "forcer" vos styles, mais il existe des alternatives qui peuvent le faire fonctionner sans cela. Voir la démo ci-dessous.

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>

6
acdcjunior

J'ai eu un certain succès en utilisant la transformation CSS pour tout réduire:

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

Ajoutez simplement cela à votre formulaire. Sa taille de police est réduite à 14px (au lieu de 16) et réduit les cases à cocher, etc.

0
David Tinker

Vous pouvez simplement référencer par nom comme suit.

Dans votre code de modèle:

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

Dans votre code de style:

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