carousel component seems can only set height. i want do like this but it not work.
<v-responsive :aspect-ratio="16/9">
<v-carousel>
<v-carousel-item v-for="item in [url1,url2]" :key="item" :src="item">
</v-carousel-item>
</v-carousel>
</v-responsive>
Related
I have a component with a v-card in it which looks like this:
<!-- CurrentFile.vue -->
<v-card color="primary">
<v-card-title class="secondary--text text-wrap">Flashing title</v-card-title>
<v-card-subtitle>
<span class="secondary--text text-h6">A fancy subtitle</span>
</v-card-subtitle>
<v-card-text class="mt-n3">
...
</v-card-text>
</v-card>
While refactoring, I wanted to create a new component that would encapsulate both v-card-title and v-card-subtitle helper components, since they use the same text color.
<!-- CurrentFile.vue -->
<v-card color="primary">
<my-new-header textColor="secondary--text" title="Flashing title" subtitle="A fancy subtitle"/>
<v-card-text class="mt-n3">
...
</v-card-text>
</v-card>
I went on to create this child component
<!-- MyNewHeader.vue -->
<template>
<span>
<v-card-title class="text-wrap" :class="textColor">{{ title }}</v-card-title>
<v-card-subtitle>
<span class="text-h6" :class="textColor">{{ subtitle }}</span>
</v-card-subtitle>
</span>
</template>
Issue
With the inclusion of a <span> tag, the use of v-card-title and v-card-subtitle components is almost irrelevant. It seems to me that both containers lose their properties (margins and paddings).
Of course, it's logical, since it adds an undesired level of hierarchy. Once the child component is injected, the structure ends up looking like this:
<v-card>
<span>
<v-card-title/>
<v-card-subtitle>
<span/>
</v-card-subtitle>
</span>
<v-card-text/>
</v-card>
I would very much remove that <span> tag to avoid all these problems, but there must only be one element at the template root.
Is there another way of doing what I want to do that I'm missing? Or maybe is it overkill to want that many sub-components?
There are 3 possible solutions for your issue:
Using fragments - https://github.com/privatenumber/vue-frag
Using render function instead of a component template - https://v2.vuejs.org/v2/guide/render-function.html
Using CSS display: contents to effectively replace the wrapper with its content - https://developer.mozilla.org/en-US/docs/Web/CSS/display-box
Whenever the v-carousel moves onto the next image in the reel it shrinks down before loading the image, causing the carousel to 'skip'. Is there any way to prevent this? Perhaps by pre-loading the images? The static images come from a parent nuxt component using asyncData so I thought it would already be loaded.
The carousel component:
<template>
<v-container class="hero-wrapper">
<v-carousel
cycle
hide-delimiters
height="auto"
>
<v-carousel-item
v-for="(item,i) in heroImages"
:key="i"
class="pb-0 mb-0"
:href="item.link"
>
<img :src="item.image" class="hero-image">
</v-carousel-item>
</v-carousel>
</v-container>
</template>
<script>
export default {
props: ["heroImages"]
}
</script>
Try adding the eager prop to v-carousel-item.
<v-carousel-item
v-for="(item,i) in heroImages"
:key="i"
eager
class="pb-0 mb-0"
:href="item.link"
>
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
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>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
I am wondering how I can attach links to items within a Vuetify autocomplete. I would like to do this so that it would act as a search bar. As of right now, I can attach links to the v-list-item but the link won't cover the entire width of the container. It appears to just form a link around the text instead of the entire item. I've tried to wrap the entire component but that doesn't seem to work either. I've also tried looking at the docs (https://vuetifyjs.com/en/components/autocompletes/) but I can't seem to find anything on making items links there either. Thanks for any help in advance.
<v-autocomplete
v-model="model"
:items="users"
:loading="isLoading"
:search-input.sync="search"
clearable
hide-details
hide-selected
item-text="username"
item-value="symbol"
placeholder="Search"
flat
solo
dense
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item-group v-model="item">
<v-list-item-content>
<v-list-item link :to="'users/' + item.id">
{{item.username}}
</v-list-item>
</v-list-item-content>
</v-list-item-group>
</v-list>
</template>
</v-autocomplete>
The item slot should be <v-list-item/> only since the wrapping element of those item slots are <v-list/> already by default.
<v-autocomplete
...
>
<template v-slot:item="{ item }">
<v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
</template>
</v-autocomplete>
Here's a demo.
Overflow hidden not working. It creates another scroll bar like in the image
I copied the code directly from Vuetify and tried it in code pen and the results were the same.
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>`enter code here`
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)
I would guess the vuetify docs have this so the examples work on their own site.
This is happening for two reasons-
Outer Scrollbar comes from html.
bcz your contents like- v-sheet, v-container exceed your screen height
Inner Scrollbar is for v-sheet
bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.
There is no fixed height of v-card, it's flexible to it's content. So,
don't add overflow-hidden class to it. You should hidden in any of
html or v-sheet