Vuetify carousel - I cannot find the way to turn off the looping. I do not show images in my vuetify carousel, I use for a few steps for the user -passive steps, more like a description step by step and I don't need the loop in the carousel..
Thanks for help
[EDIT]
For those who are interested I ended up using vue-carousel
There is now a continuous (default=true) prop now.
You can turn it off by setting it like so: :continuous="false"
THe docs of Vuetify do not provide any info of such option.
But...
Since you do not use it as carousel but as stepper, why don't you use stepper..?
https://vuetifyjs.com/en/components/steppers
[EDIT]
Either I was blind yesterday or it just appeared - the docs mention now the cycle prop of carousel: https://vuetifyjs.com/en/components/carousels#api
I think you should give it a try by setting this to false. ;)
Related
I'm still pretty new to Vuetify and try to learn with the docs and forums but I've come across a problem :
I couldn't find a way to disable only one button of the pagination component.
Example :
A user is on page 2. I want them to be able to go to page 1 but to prevent them from going to page 3 until they meet certain conditions.
The problem is I saw that the "disabled" prop can only be a boolean on the pagination component (thus disabling the whole component).
Does anyone know a way to achieve that? Might it become a feature request?
Thanks in advance
I'm trying to build a form wizard, and would like to over ride the default icons / steps in the stepper, I don't seem to be able to find an option but I might be missing something. Is there anyway to customize the Icons for each step?
button that I'm trying to change
Without some "tricks", you can change 3 icons
Complete, Edit and Error. Check them here
If you need something more you'll probably need more work.
I'm trying to build a React Native app and would like to implement a component just like in Quora where upon clicking the question, the component expands and shows the remaining details (text/images of the question).
I tried using react-native-panel from https://github.com/dwicao/react-native-panel#readme, but it can only handle text in the panel before expanding. I'd like to implement a panel that has an image in it even before I press on the panel to expand. Would love it if anyone could refer me to any npm packages that use components to achieve this. Thank you!
Use this tutorial https://blog.theodo.com/2020/06/build-accordion-list-react-native/. Stick the desired image somewhere there in the code.
I'm learning Vue and Vuetify right now. And I want to develop a Calendar tool combining Vuetify with Laravel.
With v-calendar it is possible to render multiple 'event-indicators'
See example
With Vuetify 'one' event indicator is possible (example), but I don't know how to manage to make it two or even three. Is there any solution for this?
Yes we can, just pass an array for all the colors you want to assign on a particular date, using the allowed-dates prop. It has been included in the vuetify examples as well.
Refer: https://vuetifyjs.com/en/components/date-pickers/#date-pickers-events
Yeah had a play around with it but doesn't seem you can get it to display multiple events as it is :( You can submit it as a feature though here and they're usually quite quick to respond if it's possible or not. Sorry I can't help any other way.
I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
vue-waypoint could be an option.
GitHub
NPM