如何将按钮与v卡标题放在同一行？

Question

我的 v 卡上有标题、子标题、图标和按钮。我的目标是将创建按钮放在右侧，但我似乎无法做到这一点。

<template>
    <v-row class="pl-5">
        <v-card class="pl-5" elevation="0">
            <v-card-title>
                <v-icon left x-large color="primary">{{ icon }}</v-icon>
                <span class="font-weight-bold">{{ title }}</span>
            </v-card-title>

            <v-card-subtitle> Subheader </v-card-subtitle>

            <v-spacer></v-spacer>
            <router-link v-if="type == 'index'" :to="`/${name.toLowerCase().replace(' ', '-')}/create`">
                <v-btn outlined class="blue--text mt-5 mr-8">
                    <span>Create</span>
                </v-btn>
            </router-link>
        </v-card>
    </v-row>
</template>
<script>
export default {
    props: {
        icon: String,
        name: String,
        title: String,
        subtitle: String,
        type: String
    },
    components: {}
}
</script>
<style scoped></style>

---

如果我将

<router-link>

移至

<v-card-subtitle>

我明白了

---

如果我将

<router-link>

移至

<v-card-title>

我明白了

有人可以帮我推一下吗？

小提琴 https://jsfiddle.net/bheng/h2u870dv/

---

如果我这样做：

<v-row class="pl-5">
    <v-card-title>
    <span class="material-icons">
        favorite_border
    </span>
    <p class="font-weight-bold">TITLE</p>
    <p class="caption">ST</p>
    </v-card-title>
    <v-spacer></v-spacer>
    <v-btn>Create</v-btn>
</v-row>

我明白了

按钮似乎位于我想要的位置，但标题和副标题严重错位。我现在被困住了。

Answer 1

您可以在 v-row 中添加 div 或 v-col 并使用 css 按照您想要的方式对齐项目：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      icon: 'favorite_border',
      name: 'link',
      title: 'TITLE',
      subtitle: 'https://fonts.google.com/icons?selected=Material+Icons',
      type: 'index'
    }
  }
})

.myclass {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row class="pl-5">
          <div class="myclass">
            <v-card class="pl-5 mycard" elevation="0">
              <v-card-title>
                <v-icon left x-large color="primary">{{ icon }}</v-icon>
                <span class="font-weight-bold">{{ title }}</span>
              </v-card-title>
              <v-card-subtitle> Subheader </v-card-subtitle>
              <v-spacer></v-spacer>
            </v-card>
            <a v-if="type == 'index'" :href="`/${name.toLowerCase().replace(' ', '-')}/create`">
              <v-btn outlined class="blue--text mt-5 mr-8">
                <span>Create</span>
              </v-btn>
            </a>
          </div>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

Answer 2

您的问题是您将按钮放置在您声明设置标题样式的

v-card

内。由于您没有指定任何宽度，因此这张卡只是一个方形盒子。如果你设置海拔=“1”，你可以清楚地看到这一点。

只需将按钮放在 v 卡外部，

v-spacer

即可工作。或者，您也可以将

v-card

宽度设置为 100%。顺便说一句，您还可以在

to

中使用

v-btn

属性，因此不需要

v-router-link

。

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71444864-v-spacer-example-0tx24n?file=/src/components/Example.vue

<v-row class="pl-5">
   <v-card class="pl-5" elevation="0">
      <v-card-title>
         <v-icon left x-large color="primary"> mdi-home </v-icon>
         <span class="font-weight-bold">Testing</span>
      </v-card-title>
      <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle>
   </v-card>
   <v-spacer></v-spacer>
   <v-btn to="/about" outlined class="blue--text mt-5 mr-8">
      <span>Create</span>
   </v-btn>
</v-row>

更新：v-cols 和带有断点条件的自定义 CSS

我看到您有兴趣学习如何使用 vuetify 的网格 进行此设计。使用 v-cols 和断点条件的优点是，您可以更好地控制不同视口的设计。就像在移动视图上一样。我就是这样做的。

我首先将网格分成两列，一列用于标题，一列用于按钮，在

cols

视图（以前称为

xs

（超小））中，我将它们的大小设置为 12 列，然后在

 sm

（小）及以上，我将大小设置为每列 6 列。这样它们就显示为一半。

标题列没有变化，在按钮列上，我使用类

d-flex justify-end

将按钮全部移至右侧，并使用

align-center

将按钮垂直居中于

v-row

的中间。

然后，我使用断点条件来激活按钮的

block

属性，并将填充应用于整个 v 行，具体取决于当前视口。

<v-row :class="$vuetify.breakpoint.smAndUp ? 'px-4' : ''">
   <v-col cols="12" sm="6">
      <v-card elevation="0">
         <v-card-title>
            <v-icon left x-large color="primary"> mdi-home </v-icon>
            <span class="font-weight-bold">Testing</span>
         </v-card-title>
         <v-card-subtitle class="pb-0"> Subheader </v-card-subtitle>
      </v-card>
   </v-col>
   <v-col cols="12" sm="6" class="d-flex justify-end align-center">
      <v-btn to="/about" :block="$vuetify.breakpoint.xsOnly ? true : false" outlined class="blue--text">
         <span>Create</span>
      </v-btn>
   </v-col>
</v-row>

Answer 3

您正在使用 Vuetify 对吗？然后更简单，只需在 v-card-title 标签中添加带有绝对右上属性的按钮即可。然后 v-btn 还允许 :to (https://v2.vuetifyjs.com/en/api/v-btn/#props)

<v-card-title>
    <v-icon left x-large color="primary">{{ icon }}</v-icon>
    <span class="font-weight-bold">{{ title }}</span>
    <v-btn outlined absolute right top v-if="type === 'index'" class="blue--text mt-5 mr-8" :to="name.toLowerCase().replace(' ', '-') + '/create'">
    </v-btn>
</v-card-title>

Answer 4

        <v-card-title class="d-flex justify-space-between">
            <v-icon left x-large color="primary">{{ icon }}</v-icon>
            {{ title }}
            <span><v-btn outlined class="blue--text mt-5 mr-8">
                Create
            </v-btn></span>
        </v-card-title>