Elemente an den Seiten in der Vuetify3-Blockschaltfläche ausrichten: Anleitung

Question

Angenommen, ich habe die folgende Schaltfläche:

<v-btn block size="x-large">
    <v-btn icon size="small" variant="contained">
        <v-icon>mdi-information</v-icon>
    </v-btn>
    Schaltflächentext
    <v-icon>mdi-check</v-icon>
</v-btn>

Die Symbole links und rechts werden zwischen dem Text eingeklemmt. Wie kann ich sie jeweils am rechten und linken Rand der Schaltfläche platzieren? Ich habe versucht, v-spacers zu verwenden, aber es funktioniert nicht. Ich habe auch versucht, v-row in der Schaltfläche zu verwenden, aber das hat nicht geholfen, da die Elemente noch falscher ausgerichtet waren.

Answer 1

您可以使用 justify 属性水平对齐项目。

现场演示：

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>