How to set the v-tabs width:100% as flexable width?
<v-tabs v-model="tab">
<v-tab href="#tab1" style="width:50%;">tab1</v-tab>
<v-tab href="#tab2" style="width:50%;">tab2</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item :key="1" value="tab1">1111</v-tab-item>
<v-tab-item :key="2" value="tab2">222222</v-tab-item>
</v-tabs-items>
My code doesn't working as width 100%.
This worked for me in Vuetify 2.6.6:
<v-tabs grow>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
</v-tabs>
The grow prop reference: https://vuetifyjs.com/en/api/v-tabs/#props-grow
Related
The stock app bar component aligns items hard left, and if using the v-spacer component will the push items to the hard right.
I have tried wrapping the button items with v-container inside the v-app-bar but it breaks the layout once other components are added.
Ideally, the button on the left would align with hello and likewise with the buttons on the right, they should align with the right side of the v-container of the body.
I tried wrapping v-app-bar with v-container:
This is essentially the layout I want but obviously not with the background colour pushed in, it should fill out the width like in the first image.
Is there a native way to do this or will I need to get creative?
<template>
<v-container>
<v-app-bar
color="indigo accent-4"
dense
flat
dark
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in items" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</template>
Similar question but no answers. Problem with placing v-app-bar content in container?
Found a workaround in the interim, not sure how clean it is:
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
In case you want the v-app-bar to be fixed to the top of the page, I solved this by wrapping a v-app-bar inside a v-container inside another v-app-bar:
<template>
<v-app-bar app fixed dense color="grey lighten-4" elevation="1">
<v-container>
<v-app-bar dense elevation="0">
<v-app-bar-title nuxt href="/">
My Title
</v-app-bar-title>
</v-app-bar>
</v-container>
</v-app-bar>
</template>
My component separated to two parts (leftPanel and rightPanel).
When the app start, only leftPanel will be shown, and take up the whole screen width (using xs12).
If user click the button, the left panel will be shown, and rightPanel will resize to xs6 to take up half of the screen.
The functionality here is working well, but I would like to add animation(transition) when the panels size are changing.
I tried to add with different css, but none of them are showing animation.
<template>
<v-container grid-list-sm fluid>
<transition name="MyPanel">
<v-layout align-space-around row fill-height>
<v-flex id="leftPanel" :xs6="!showRightPanel" :xs12="showRightPanel">
<v-layout align-space-around column fill-height>
<v-flex xs12>
<v-btn v-if="extendable" #click="openRightPanel"> show more information </v-btn>
</v-flex>
</v-layout>
</v-flex>
<v-flex id="rightPanel" v-if="showRelatedCard" xs6>
<v-layout align-space-around column fill-height>
...
</v-layout>
</v-flex>
</v-layout>
</transition>
</v-container>
</template>
<script>
export default {
...
data() {
return {
showRightPanel : false
}
},
methods: {
removeLargeImage() {
this.showRightPanel = !this.showRightPanel;
}
}
};
</script>
<style scoped>
...
</style>
If you're using an v-if statement it is not possible to solve with CSS. As the element isn't rendered at all. Setting the width initially to 0 or using v-show you probably could solve it with CSS, but I would recommend to look to the vue-transitions: https://v2.vuejs.org/v2/guide/transitions.html
Maybe also to https://vuetifyjs.com/en/styles/transitions with I wonder if you could solve yout problem with the vuetify transitions
I have a vuetify tab component which includes a menu and a lot of different tabs which can show up in a random order. It seems like the v-tab toggling works via index-based. How can a vuetify v-tab be toggled to the correct tab via key/unique Id?
Example:
<v-tabs v-model="tab">
<v-tab href="#tab-myUniqueKeyOne">TEST ONE</v-tab>
<v-menu>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">DROPDOWN_TAB</v-btn>
</template>
<v-list>
<v-list-item #click="changeToTab('tab-foo')">Foo</v-list-item>
<v-list-item #click="changeToTab('tab-bar')">Bar</v-list-item>
</v-list>
</v-menu>
<v-tab href="#tab-myUniqueKeyThree">TEST THREE</v-tab>
<v-tab href="#tab-myUniqueKeyTwo">TEST TWO</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item value="tab-foo">My Foo</v-tab-item>
<v-tab-item value="tab-baz">Some Hidden Tab</v-tab-item>
<v-tab-item value="tab-myUniqueKeyTwo">Two</v-tab-item>
<v-tab-item value="tab-bar">My Bar</v-tab-item>
<v-tab-item value="tab-myUniqueKeyThree">Three</v-tab-item>
<v-tab-item value="tab-myUniqueKeyOne">One</v-tab-item>
</v-tabs-items>
data: () => {
tab: null,
}
methods: {
changeToTab(tab) {
this.tab = tab;
}
}
Below is a simplified example. Bottom line, use href in the tabs and value in tab-items
https://codepen.io/jack3625/pen/xxwopad
It looks like the only way to get this working is to also create a tab for each menu item and hide it.
<v-tab href="#tab-foo" style="display:none">FOO</v-tab>
<v-tab href="#tab-bar" style="display:none">BAR</v-tab>
Full example shown here:
https://codepen.io/uglyhobbitfeet/pen/NWKaQGZ?editors=1010
<style scoped>
.toolb{
position:absolute
top:0px;
}
</style>
<script>
export default {
data () {
return {
sideNav: false
}
}
}
</script>
<template>
<v-app>
<v-navigation-drawer v-model="sideNav">
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>supervisor_account</v-icon>
</v-list-tile-action>
<v-list-tile-content>View Meetups</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar dark class="primary toolb">
<v-toolbar-side-icon
#click.stop="sideNav = !sideNav"
class="hidden-sm-and-up "></v-toolbar-side-icon>
<v-toolbar-title>DevMeetup</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat>
<v-icon left dark>supervisor_account</v-icon>
View Meetups
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
</main>
</v-app>
</template>
to make toolbar on top i have to use css style ' position
:absloute ; top:0px;' that affect my all other components because i have to use again in all components style ' position
:absloute ; top:50px or 40 px;' and those components are not behaving like they should so please tell how can i fix it ? without using css style only vuetify
.where i study vuetify ,my teacher was using as it is code and its working fine without css ??? only using vuetify in this component .
but if i use v-content to parent of my v-container than i am getting another problem that is navigation-drawer is on top after that toolbar is appearing
I'm trying to replicate the layout of a Flexible toolbar and card toolbar as shown in https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card, but I want the card content grow up to full screen height, and then scroll its content.
I could make it scroll here https://codepen.io/anon/pen/rvwNbr, but I had to set a fixed max-height in pixels:
<v-card-text style="max-height: 250px; overflow-y: scroll">
what I wanted is that the card could grow up to full height before starts scrolling. then, I tried wraping the external v-card in a v-content with "fill-height" attribute, according to https://vuetifyjs.com/en/layout/grid but it didn't work
any suggestions?
This isn't the best solution for sure but it might nudge you in the right direction.
A solution using all flexboxes would be way better but I can't seem to get it to work with flexboxes..
<template>
<v-app id="inspire">
<v-card flat class="fill-height">
<v-toolbar color="primary" dark extended flat>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-toolbar>
<v-card class="mx-auto card--flex-toolbar" max-width="700">
<v-toolbar flat>
<v-toolbar-title class="grey--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text class="card-body">
<p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
</v-card-text>
</v-card>
</v-card>
</v-app>
</template>
<script>
export default {};
</script>
<style>
.card--flex-toolbar {
margin-top: -62px;
}
.card-body {
overflow-y: auto;
max-height: 85vh;
}
</style>
Check out the layout.vue in the codesandbox here. The v-card-text will go down to the bottom of the screen and then starts scrolling the content. Feel free to change the value in the v-for loop and watch the card grow/shrink.