Jajarkan elemen ke sisi dalam butang blok vuetify3: panduan
P粉680000555
2023-08-30 09:59:30
<p>Andaikan saya mempunyai butang berikut: </p>
<pre class="brush:php;toolbar:false;"><v-btn saiz blok="x-besar">
<saiz ikon v-btn="kecil"varian="terkandung">
<v-icon>mdi-information</v-icon>
</v-btn>
Teks Butang
<v-icon>mdi-check</v-icon>
</v-btn></pra>
<p>Ikon di kiri dan kanan diapit dengan teks. Bagaimanakah saya boleh meletakkannya di tepi kanan dan kiri butang masing-masing? Saya telah mencuba menggunakan <code>v-spacer</code>s tetapi ia tidak berfungsi. Saya juga cuba menggunakan <code>v-row</code> dalam butang, tetapi itu tidak membantu kerana item menjadi lebih tidak sejajar. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menjajarkan item secara mendatar menggunakan atribut
justify.Demo Langsung:
new Vue({ el: '#app', vuetify: new Vuetify() })<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.10/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.10/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <v-btn block size="x-large"> <v-row justify="space-between"> <v-col md="4"> <v-btn icon size="small" variant="contained"> <v-icon>mdi-information</v-icon> </v-btn> </v-col> <v-col>Button Text</v-col> <v-col md="4"> <v-btn icon size="small" variant="contained"> <v-icon>mdi-check</v-icon> </v-btn> </v-col> </v-row> </v-btn> </v-app> </div>