I would like to align all seven of those buttons centered. As you can see the last one is a bit off compared to the first one.
How do I achieve this?
I've already tried justify="center" and justify="space-around"
Here is my code:
<v-row no-gutters justify="space-around">
<v-col v-for="(item, index) in buttons" :key="index">
<toggle-button
:weekday="item.weekday"
:button="item.state"
></toggle-button>
</v-col>
</v-row>
Here is the toggle-button component:
<template>
<v-btn
outlined
depressed
:class="button ? 'primary white--text' : 'outlined'"
#click="button ? (button = false) : (button = true)"
v-model="button"
icon
>
{{ $t("roomservice.weekdays." + weekday) }}
</v-btn>
</template>
<script>
export default {
data() {
return {};
},
props: ["button", "weekday"]
};
</script>
v-col is not a flex and contents inside (toggle-button) are justified to start form left.
you can fix this by adding class="d-flex justify-center" on v-col
<v-row no-gutters justify="space-around">
<v-col
class="d-flex justify-center"
v-for="(item, index) in buttons"
:key="index">
<toggle-button
:weekday="item.weekday"
:button="item.state"
></toggle-button>
</v-col>
</v-row>
Related
I have a text-field that's triggering a color-picker. This is inside a v-for loop as well. All is fine until the activator triggers the color-picker and multiple pickers are triggered with a mashup of the v-for data.
You can see the mashup of data at the top, as well as mutliple color pickers activated.
Any idea why? My code is below:
<v-tab-item>
<v-card
flat
v-for="(colorMenu, index) in colorMenus"
:key="index"
>
<v-card-text>
<v-row
justify="start"
align="center">
<v-col
cols="4"
>
<p class="font-weight-bold text-subtitle-2 mt-4">{{ colorMenu.title }}</p>
</v-col>
<v-col
cols="8"
>
<v-text-field
v-model="myModels[colorMenu.type]"
v-mask="mask"
hide-details
class=""
solo
>
<template
v-slot:append
>
<v-menu
v-model="menu"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<template
v-slot:activator="{ on }"
>
<div
:style="{ backgroundColor: selectColors[index], borderRadius: menu ? '50%' : '4px'}"
v-on="on"
class="color_select"
/>
</template>
<v-color-picker
v-model="selectColors[index]"
flat
>
</v-color-picker>
</v-menu>
</template>
</v-text-field>
</v-col>
</v-row>
<v-divider class="mt-3"></v-divider>
</v-card-text>
</v-card>
</v-tab-item>
The main problem is all the v-menu's are bound to the single menu Boolean, causing all the menus to open and close at the same time. To resolve this, make menu an array of Booleans (like you've done with the other props within the v-for).
Another issue is your backgroundColor is bound to selectColors[index], but that's an object from the v-color-picker. The object has a hex property that contains the hex string of the color, which would be appropriate for the backgroundColor value.
<v-menu 👇
v-model="menu[index]"
top
nudge-bottom="105"
nudge-left="16"
:close-on-content-click="false"
>
<template v-slot:activator="{ on }"> 👇 👇
<div :style="{ backgroundColor: selectColors[index]?.hex, borderRadius: menu[index] ? '50%' : '4px'}"
v-on="on"
class="color_select"
/>
</template>
<v-color-picker v-model="selectColors[index]" flat>
</v-color-picker>
</v-menu>
export default {
data() {
return { 👇
menus: [],
â‹®
}
}
}
demo
I am having issues aligning things correctly inside my Vue app using Vuetify.
<v-card class="mx-auto">
<v-row>
<v-col
v-for="(item, i) in items"
:key="i"
align-end
justify-end
>
<v-btn class="btn">
<v-icon>{{ item.icon }}</v-icon>
<span class="ml-2">{{ item.text }}</span>
</v-btn>
</v-col>
</v-row>
...
I simply want to align it to the right.
The properties you've put on <v-col> don't exist (i.e. align-end and justify-end). They are properties on the <v-row> component (which is a flex container). You need to use classes instead.
Make sure to consult the API->props section on the Vuetify component page when choosing component properties.
Try
<v-col class="d-flex justify-end">
<v-btn>Button</v-btn>
</v-col>
Note that the alignment is dependent upon the width of v-col. If v-col is only as wide as the button, you'll need to set the width by using the cols="x" property.
Add direction: rtl to your v-btn, Here is codepen:
<template>
<v-btn class="btn rtl">
...
</v-btn>
</template>
<style>
.rtl { direction: rtl; }
</style>
i am new for vuetify implementing vuetify icon slid console but im confuse.
below console code contained image slide show, using this code i what to implement example image
i want to show like this
<template>
<v-carousel
cycle
height="400"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
v-for="(slide, i) in slides"
:key="i"
>
<v-sheet
:color="colors[i]"
height="100%"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="display-3">{{ slide }} Slide</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</template>
<script>
export default {
data () {
return {
colors: [
'indigo',
'warning',
'pink darken-2',
'red lighten-1',
'deep-purple accent-4',
],
slides: [
'First',
'Second',
'Third',
'Fourth',
'Fifth',
],
}
},
}
</script>
You can define a <v-row/> inside the <v-carousel-item/> then fill it with <v-col/>. Each <v-col/> represents the image/icon and the caption.
<v-carousel
...
>
<v-carousel-item v-for="(slide, i) in 7" :key="i">
<v-row>
<v-col cols="3" v-for="(images, j) in 16" :key="j">
<div class="d-flex flex-column justify-center align-center">
<v-img src="https://via.placeholder.com/50" width="50"/> <!-- can also be `<v-icon/>` -->
<span class="mx-auto text-center caption">Caption</span>
</div>
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
Here's a sample demo.
I have a tiny project that I am building using vuetify 2, but the issue I am coming across is in a col with width 7, all my cards are showing up vertically, instead of a horizontal overflow.
What I am hoping to achieve is that the cards are vertical to each other by counts of five, with overflow moving to the second line.
My row arrangement is row > col2 col7 col3 /row. I am not using a v-container because it seems to put a container in the middle and not take up the whole screen.
I have tried using the flex-wrap, flex-column, flex-row etc class based on the vuetify docs, but that doesnt seem to change anything. Most of the examples that I found regarding this is for vuetify 1, and the component structure is different.
Codesandbox
App.vue
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col fluid cols="2"></v-col>
<v-col fluid cols="7">
<HelloWorld v-for="c in 10" :key="c" />
</v-col>
<v-col fluid cols="3"></v-col>
</v-row>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
components: {
HelloWorld,
},
data: () => ({
//
}),
};
</script>
HelloWorld.vue
<template>
<v-card class="mx-auto" max-width="344" outlined>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">OVERLINE</div>
<v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar tile size="80" color="grey"></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn text>Button</v-btn>
<v-btn text>Button</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
What I have at the moment is this: The arrows are showing how I would like the successive card to be next to the card and so forth.
If you want to ignore row wrap you can just add .flex-nowrap class:
<v-row class="flex-nowrap">
Update
I get it. You paste card inside of col. My bet.
You just can do this:
<template>
<v-app>
<v-app-bar
color="dark"
dark dense
>
</v-app-bar>
<v-row no-gutters>
<v-col cols="2"></v-col>
<v-col cols="7">
<v-row no-gutters>
<v-col v-for="c in 10" :key="c" cols="4">
<HelloWorld/>
</v-col>
</v-row>
</v-col>
<v-col cols="3"></v-col>
</v-row>
</v-app>
</template>
I tried to implement tabs to my component. Tabs can't be displayed. I took the same example from https://vuetifyjs.com/en/components/tabs TypeError: this.$parent.addTab is not a function error is logged on console. I upgraded the vuetify version but it isn't working. What could be the problem? Component content is below.
<template><div>
<v-tabs v-model="active"
color="cyan"
dark
slider-color="yellow">
<v-tab v-for="n in 3"
:key="n"
ripple>
Item {{ n }}
</v-tab>
<v-tab-item v-for="n in 3"
:key="n">
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
<div class="text-xs-center mt-3">
<v-btn #click="next">next tab</v-btn>
</div>
</div></template>
<script>
export default {
data() {
return {
active: null,
text: 'Lorem ipsum'
}
},
methods: {
next() {
const active = parseInt(this.active)
this.active = (active < 2 ? active + 1 : 0)
}
}
}</script>
My app.vue:
<v-app id="inspire">
<v-navigation-drawer persistent clipped enable-resize-watcher v-model="drawer" app>
<MenuComponent></MenuComponent>
</v-navigation-drawer>
<v-toolbar color="cyan darken-3" dark fixed clipped-left app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>...</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn #click="logout" icon>
<v-icon>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<main>
<v-content>
<vue-snotify></vue-snotify>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
</main>
<v-footer color="cyan darken-3" app fixed>
<span class="white--text"> © 2018 </span>
</v-footer>
</v-app>
I found the problem. I had imported vue-nav-tabs. I removed it and now it is working.
Took me a moment to realise that you don't need href e.g
<v-tabs
v-model="tabs"
background-color="deep-purple accent-4"
centered
dark
icons-and-text
>
<v-tabs-slider></v-tabs-slider>
<v-tab href="#tab-2">
Favorites
<v-icon>mdi-heart</v-icon>
</v-tab>
<v-tab href="#tab-3">
Nearby
<v-icon>mdi-account-box</v-icon>
</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs">
<v-tab-item
>
<v-card flat>
<v-card-text><p>hey</p></v-card-text>
</v-card>
</v-tab-item>
<v-tab-item
>
<v-card flat>
<v-card-text> <p>hey</p></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
Removing href="#tab-2" and href="#tab-3" worked because I have not set the value if you don't necessarily need to set the value in v-tab-item.
<v-tab-item
v-for="i in 3"
:key="i"
:value="'tab-' + i"
>