I want to achieve the design show in the image below:
My current design:
My code is:
<v-card v-for="book in books" :key="book.id" class="mb-2" tile="">
<v-img :src="book.image" max-width="80"></v-img>
<v-card-title>{{ book.title }} </v-card-title>
<v-card-subtitle>{{ book.author }}</v-card-subtitle>
</v-card>
Use the grid row>cols ...
<v-card class="mb-2" tile="">
<v-row align="start">
<v-col class="shrink">
<v-img src="//placehold.it/80x120" max-width="80" class="ml-3"></v-img>
</v-col>
<v-col>
<v-card-title class="pa-0">Title</v-card-title>
<v-card-subtitle>Author</v-card-subtitle>
</v-col>
</v-row>
</v-card>
Demo: https://codeply.com/p/7aOBDcIOke
Related
I need other components to take over the white space Click to see the image
You can try this code:
<div id="app">
<v-app id="inspire">
<div>
<v-card class="d-flex" color="grey lighten-2" flat height="100" tile>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
<v-card class="pa-2 ma-2 align-self-start" outlined tile>
Aligned start
</v-card>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
</v-card>
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
<v-card class="pa-2 ma-2 align-self-stretch" outlined tile>
Aligned stretch
</v-card>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
</v-card>
</div>
</v-app>
</div>
I am using Vuetify 2 with Vue 2. Here is some code:
<template>
<v-container fluid outlined class = "pt-0 pl-0">
<v-row no-gutters>
<v-col>
<v-sheet id="card-1" elevation=0
class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" max-width='500px' >
<v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
Last Refresh:
</v-card-text>
<v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
{{lastrefresh}}
</v-card-text>
<v-btn
color="red"
dark
medium
class="mt-2 mr-4">
Refresh Data
</v-btn>
<v-btn
color="green"
dark
medium
class="mt-2 mr-4">
Select Date
</v-btn>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
Here is what is produced:
What I need is for the red button to be immediately to the right of the text, with the green button to the right of the red button. Both buttons sharing the black background.
How can I achieve this?
you can achieve this by dividing row into col .
Here is my code :-
<v-row no-gutters class = "pt-1 pb-0 pl-0 ma-0 black">
<v-col>
<v-sheet id="card-1" elevation=0
max-width='500px' class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" >
<v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
Last Refresh:
</v-card-text>
<v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
{{lastrefresh}}
</v-card-text>
</v-col>
<v-col >
<v-btn
color="red"
dark
medium
class="mt-2 mr-4">
Refresh Data
</v-btn>
<v-btn
color="green"
dark
medium
class="mt-2 mr-4">
Select Date
</v-btn>
</v-sheet>
</v-col>
</v-row>
this is the link for codepen.
i have made a card for sign in and there are no colours on any of the created components. the bottom of card consitst of two button but even those colors are not visible. i have attached the template section of my code. even the blue color of text fields is not visible. what can be the possible error?
<template>
<div>
<v-container>
<v-layout wrap>
<v-row>
<v-col cols="5">
<v-img
src="https://image.freepik.com/free-vector/programmer-working-flat-style_52683-15041.jpg?w=740"
width="500"
height="400"
></v-img>
</v-col>
<v-col cols="7" align-self="end">
<v-flex sm12 md-8 offset-md3>
<v-card elevation="6" width="700">
<v-card-title>
<v-layout align-center justify-space-between>
<h3 class="headline">Sign In</h3>
</v-layout>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<p>Sign in with your username and password:</p>
<v-text-field
autofocus
label="Email"
v-model="email"
type="email"
></v-text-field>
<v-text-field
outline
hide-details
label="Password"
type="password"
v-model="password"
></v-text-field>
</v-card-text>
<br />
<v-divider></v-divider>
<v-container class="px-5" >
<v-checkbox
class="pl-1"
dense
label="Remember Me"
></v-checkbox>
</v-container>
<v-card-actions>
<v-btn class="green--text" color="info" flat to="/forgotdialogue">
Forgot password?
</v-btn>
<v-spacer></v-spacer>
<!-- <landingpage :username="username"></landingpage> -->
<v-btn #click="signUp" color="info">
<v-icon left>mdi-lock</v-icon>
Signup
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-col>
</v-row>
</v-layout>
</v-container>
</div>
</template>
Got it
i just had to change my App.vue file.
in App.vue I included the code in between v-app tags. After this all the colors were restored. Read about it here in this vuetify page https://vuetifyjs.com/en/components/application/
When I test my app in mobile portrait mode it looks like this:
Mobile portrait
But I'm trying to make it look like this from Vuetify
In landscape its fantastic, portrait no luck. I'm using fluid and fill-height on the v-container but no luck.
I've also tried height="100vh" on the container but that also didn't work.
This is some sample code that's been simplified and it doesn't work either:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col cols="8">
<v-card
outlined
class="d-flex"
>
<v-text-field
color="#F03C99"
label="Email"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
></v-text-field>
</v-card>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>
I'm starting to think that it might be that I'm using router-view this is what I have in my router
<template>
<v-app>
<router-view name="navigation" :key="$route.fullPath"></router-view>
<router-view class="fill-height" key="main"></router-view>
<router-view name="confirm"></router-view>
</v-app>
</template>
Here is my real code:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col :cols="overallColumns">
<v-card
outlined
>
<v-row>
<v-col
:cols="accountForImage"
align="start"
>
<v-card-title>
<v-img src='small-bella-logo.png' max-height="41px" max-width="128px" contain></v-img>
</v-card-title>
<v-form>
<v-text-field
v-model="email"
color="#F03C99"
label="Email"
:rules="[rules.email]"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
:class="marginRight"
:error-messages="errorMessage"
data-cy="login"
></v-text-field>
<v-text-field
v-model="password"
color="#F03C99"
label="Password"
placeholder="Enter your password"
outlined
class="ml-4"
:class="marginRight"
:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
:type="passwordVisible ? 'text' : 'password'"
#click:append="passwordVisible = !passwordVisible"
data-cy="password"
></v-text-field>
<v-row
class="mt-n5"
>
<v-col
:cols="stackColumns"
align="start">
<v-btn
color="#AF3482"
class="white--text ml-4"
data-cy="login-button"
#click="logInWithBella"
>LOGIN</v-btn>
</v-col>
<v-col
:cols="stackColumns"
:align="alignStackedColumnToEnd"
class="mt-2"
:class="marginLeftWhenStacked"
>
<h1
#click="forgotPassword"
class="caption font-weight-bold ml-4 pointer pink_text"
>FORGOT PASSWORD?</h1>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row
justify="space-between"
>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="start">
<v-btn
class="ml-4 white--text"
color="#3B5998"
#click="logInWithFacebook()"
medium>
LOGIN WITH FACEBOOK
</v-btn>
</v-col>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="end">
<v-btn
class="white--text"
:class="marginLeftAndNegativeLeft"
color="#DB4437"
#click="logInWithGoogle()"
medium
>
LOGIN WITH GOOGLE
</v-btn>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" align="start" justify="center">
<h1 class=" ml-4 font title font-weight-regular">
No Account?
</h1>
<v-btn
class="ml-4 white--text mt-2"
:class="marginBottom"
color="#AF3482"
block
#click="sendAndCreateToken"
>
SIGN UP AND CREATE SHOWROOM
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
<v-col
cols="6"
align="center"
class=""
v-if="removeImage"
>
<v-img src="login.png" class="mt-10" max-height="519px" max-width="187px" contain></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<p>{{ $vuetify.breakpoint.name }}</p>
</v-layout>
</v-container>
</template>
i know i can use v-pagination to build my own table footer
but how can i make it more complicated like what we see above?
<v-data-table
class="elevation-1"
:headers="table.headers"
:items="licenseLogs"
:items-per-page="table.options.itemsPerPage"
:no-data-text="table.options.noDataText"
:page.sync="table.options.page"
hide-default-footer
#page-count="table.options.pageCount = $event"
>
</v-data-table>
<div>
<v-pagination
v-model="table.options.page"
:length="table.options.pageCount"
></v-pagination>
</div>
You have to customize the external footer & pagination. For example...
<v-row class="text-center px-4 align-center">
<v-col class="text-no-wrap shrink">
Total {{ totalRecords }} records
</v-col>
<v-col>
<v-pagination
v-model="page"
:length="pageCount">
</v-pagination>
</v-col>
<v-col>
<v-select
dense
outlined
hide-details
:value="itemsPerPage"
label="Items per page"
#change="itemsPerPage = parseInt($event, 10)"
:items="perPageChoices">
</v-select>
</v-col>
<v-col>
<v-text-field
v-model="page"
label="Go to page"
outlined
hide-details
dense
#input="page = parseInt($event, 10)"
></v-text-field>
</v-col>
</v-row>
Demo