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

Reputation: 58790

How to place a button in the same row as v-card title?

I have a header, sub-header, icon and button on my v-card. My goal is to place my create button the right, but I can't seem to do that.

enter image description here

<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>

If I move my <router-link> in <v-card-subtitle>

I get this

enter image description here

If I move my <router-link> in <v-card-title>

I get this

enter image description here

Can someone give me a push here ?

Fiddle https://jsfiddle.net/bheng/h2u870dv/

If I do this:

<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>

I get

enter image description here Button seems to locate at the place I wanted it to be, but the title and subtitle misalign very badly. I'm stuck now.

Upvotes: 0

Views: 3095

Answers (4)

user28078686
user28078686

Reputation: 1

        <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>

Upvotes: 0

Inteligencia Web
Inteligencia Web

Reputation: 11

You are using Vuetify right? Then much easier, just add the button in the v-card-title tag with the absolute right top attrs. Then v-btn also allows :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>

Upvotes: 0

cmfc31
cmfc31

Reputation: 1508

Your problem is that you're placing your button inside the v-card you declared to set the style of the title. And this card is just a square box since you haven't specified any width. If you set the elevation="1" you can see this clearly.

Just place your button outside the v-card and the v-spacer will work. Alternatively, you could also set the v-card width to 100%. Btw, you can also use the to prop in your v-btn, so there's no need to have a v-router-link.

Check this codesandbox I made: https://codesandbox.io/s/stack-71444864-v-spacer-example-0tx24n?file=/src/components/Example.vue

Example

<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>

Update: v-cols and custom CSS with breakpoints conditionals

I saw you were interested to learn how to make this design using vuetify's grid. The advantage to use v-cols and breakpoint conditionals is that you'll have more control of your design over different viewports. Like on a mobile view. This is how I'd do it.

I start by splitting the grid in 2 columns, one for the title and one for the button, in cols view (previously known as xs (extra small)) I set the size of them to 12 columns and on sm (small) and up I set the size to 6 columns each. This way they are shown half and half.

The title column has no changes, on the buttom column I use the classes d-flex justify-end to move the button all to the right and align-center to center the button vertically at the middle of the v-row.

Then I use the breakpoint conditionals to activate the block property of the button and to apply paddings to the whole v-row, depending on the current viewport.

<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>

Example 2

Upvotes: 0

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

You can add div or v-col in v-row and use css to align items the way you want:

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>

Upvotes: 2

Related Questions