CODEWITHSUNDEEP
cssvue.jsvuejs2vue-componentvuetify.js
code-8
code-8

Reputation: 58632

Vuetify - Prepend button on the right of a text-field input

I'm looking for the best practice using Vuetify to render a button on the right of a text-field (attached)

I can't seem to find it on the main site.

An image of a QR code with a misaligned input and button

<v-row class="text-center d-flex justify-center" v-if="downloadOption == 'HTML'">
    <v-text-field dense outlined v-model="imageLink" label="Image Link" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>

    <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>
</v-row>

Do you have any tips on how to do that?

Upvotes: 1

Views: 2059

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to use the append slot in the v-text-field component :

 <v-text-field dense v-model="html" label="HTML" required  >
     <template #append>
       <v-btn class="mb-1" outlined color="indigo"> Copy </v-btn>
     </template>             
 </v-text-field>

Upvotes: 4

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Try this :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.v-btn {
  height: 39px !important;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="8" sm="6" class="pr-1">
            <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>
          </v-col>
          <v-col cols="4" sm="6" class="pl-0">
            <v-btn large outlined color="indigo"> Copy </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

Upvotes: 1

Related Questions