Vuetify：在卡片中的图标旁边放置标题/副标题

Posted 2023-02-16

【中文标题】Vuetify：在卡片中的图标旁边放置标题/副标题

【英文标题】：Vuetify : place title/subtitle next to icon in a card

【发布时间】：2022-01-19 16:08:02

【问题描述】：

我有一个卡片组件，我正试图将我的标题、副标题放在我的图标右侧。它有些如何一直到下一行。我是 Vuetify 的新手。

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-flex col-xs-12>
                <v-card elevation="2" class="pa-5">
                    <v-flex xs3>
                        <v-btn text color="black">
                            <v-icon left large class="mr-5"> icon </v-icon>
                        </v-btn>
                    </v-flex>
                    <v-flex xs9>
                        <v-card-title>
                             title 
                        </v-card-title>

                        <v-card-subtitle>  subtitle  </v-card-subtitle>
                    </v-flex>
                </v-card>
            </v-flex>
        </v-row>
    </v-container>
</template>
<script>
export default 
    name: 'MainPanel',
    props: 
        icon: String,
        title: String,
        subtitle: String
    

</script>
<style></style>

请告诉我如何才能做到这一点。

【参考方案1】：

将d-flex 类应用到v-card，在元素上设置display:flex，使其内容水平对齐：

<v-card elevation="2" class="pa-5 d-flex">
                                      ?

demo 1

或者，将v-card 的内容包装在v-row 中（并将已弃用的v-flex 替换为v-col）：

<v-card>
  <v-row>
    <v-col>...</v-col>
    <v-col>...</v-col>
  </v-row>
</v-card>

demo 2