Je veux créer un champ de texte dans vuetify

Question

https://i.stack.imgur.com/zbCfI.png

Je souhaite créer un champ de texte dans vuetify, mais le bouton ne peut pas être créé comme ça ? Et la hauteur, mais elle ne peut pas être modifiée ? J'ai essayé de changer la hauteur plusieurs fois mais ça ne marche pas

J'ai déjà le CSS mais c'est difficile à utiliser sur vuetify

.parent-box{
  width:fit-content;
  background:#26376B;
}
.text-box{
  border:1px solid #CACACA;
  padding:5px 10px;
  min-width:300px;
}
.btn{
  padding:5px 20px;
  width:100px;
  color:#fff;
  border:none;
  background-color:#26376B;
  cursor:pointer;
}
.common{
  outline:none;
  border-radius:50px;
}

<div class="parent-box common">
  <input class="text-box common" type="text" placeholder="Chassis Number">
  <button class="btn common">Check</button>
</div>

Answer 1

Quelque chose de similaire peut être fait comme ceci :

...
<v-container>
  <v-layout wrap="" class="parent-box common">
    <v-text-field class="text-field__styled" outlined="" rounded="" dense="" color="#26376B" placeholder="Chassis Number" height="27" hide-details=""></v-text-field>
    <button class="btn__styled">Check</button>
  </v-layout>
</v-container>

...

<style>
.parent-box {
  background: #26376B;
  width: 400px;
}

.common {
  outline: none;
  border-radius: 20px;
}

.text-field__styled {
  background: #fff;
}

.btn__styled {
  color: #fff;
  width: 100px;
}

.v-text-field .v-input__control .v-input__slot {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
}
</style>

Découvrezce CodePen

De nombreux styles peuvent être personnalisés dans vuetify via props. Mais par défaut, vuetify s'inspire du Material Design, et contrairement à votre exemple, personnaliser les styles par défaut n'est pas si simple. Pour votre cas, il serait peut-être préférable d'appliquer un thème vuetify avant d'utiliser cette bibliothèque.

Answer 2

Énoncé du problème : Vous souhaitez créer un champ de texte avec un bouton dans Vuetify.

Solution :

HTML :

<v-app id="app">

  <v-container>

    <v-text-field label="Chassis Number" color="primary" v-model="input" @keypress.enter="show">

       <template v-slot:append="">

          <v-btn depressed="" tile="" color="primary" class="ma-0" @click="show">

            show

          </v-btn>

      </template>

    </v-text-field>

  </v-container>

</v-app>

Vue.js :

new Vue({
  el: "#app",
    vuetify: new Vuetify(),
  data: {
    input: ''
  },
  methods: {
    show(){
      alert(this.input)
    }
  }
})

Sortie :