I'm trying to change the bullets for a swiper instance in Elementor to dynamic, but having issues. I'm not a javascript wiz by any means so I'm piecing things together with the example show on here: https://developers.elementor.com/expose-swiper-in-elementor. when I am able to actually get the dynamic bullets to show they don't move so I think I'm doing something wrong. Any help would be great.
Related
In my app there's a page where I am showing several snackbars depending on results from server.
There can be several triggered by the server's result. They are also triggered from different components, so I don't have a single controller that could render them where I want.
So, they all display at once and overlap each other. I linked the official Vuetify docs page because the problem is clearly visible there. Just click on two of the buttons in short enough succession.
Is there any way I could render them such that they would stack one above the other instead of all bottom-centering over each other?
I was thinking I'd need a way to tell them the component that would be their rendering parent. But I can't seem to find a way to do this. Slots don't seem to be much help with this either since I can't declare global ones.
Is there any way I can do this?
I'm looking for a way to create nested lists with draggable elements in VueJs3 & Ionic
This is the result I'd like to have: https://ej2.syncfusion.com/vue/documentation/treeview/drag-and-drop/
Moreover, I'd like each item of the list to be part of "ion-sliding" tag for them to have some options when they're sliding like this: https://ionicframework.com/docs/v3/api/components/item/ItemSliding/
I tried to use "ion-reorder-group" but it doesn't allow me to create nested lists like I would like to. I also tried a bunch of librairies but I'm not able to make any of them work with my Ionic-Vue3 project.
I'm stuck on this issue and I would be very glad to have any recommendations or help !
Thank you very much
I resolved the question, I'm posting the solution I used in case it could be useful for someone.
I used this library: https://github.com/SortableJS/vue.draggable.next that supports Vuejs 3.0
There's a very useful link to look at live demos and each of them has the code attached to it available. I combined some of them and added my "ion-sliding" tags to obtain the result expected.
It works perfectly !
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
I am using Template10 with the Hamburger starting project template. I'd like to have a margin between the hamburger area on the left and all content. I tried changing the shared Shell.xaml page (by adding a margin, etc.) but couldn't figure out the best way to sort it out. Conceptually, that makes sense, but it's the specific detail of how to make it work that I'm missing.
Is there an easy way to do it without changing each content page?
Regarding the questions in the comments: I want it in the closed case of a wide view; the question doesn't make any sense in any other case. As far as what I tried, it doesn't really ultimately matter, since none of what I tried worked - I'm asking what the right way is to do it, which I never figured out.
Here's what the default looks like, without a margin:
Here's what it looks like with a margin added to the content area, which is also how the sample template contents handle this:
I don't want to have to mark up every content page with left margins to get the offset in the second picture.
1: https://i.stack.imgur.com/jUIuO.png
Okay, now I have enough information. You have a few options here. The first is just bite the bullet like the rest of the developer community and format your pages like normal. But if you simply must, you can create an implicit Page style with a setter setting Margin="16,16,16,16" but, listen, and I am not kidding, you will ultimately regret it unless your app is super-simple. The biggest problem will be the spacing will be OUTSIDE the containing ScrollViewer.
Thanks for using Template 10.
I wanted to use bootstrap switch without having the white space (data-text-label) between both data-on-label and data-off-label options. And I could probably sort this out but I must move on to other stuff due to dead-lines for the project i'm working on.
I would apreciate a lot if anyone knows how to achive this and shares it whith me.
I am pulling the answer out of your question and putting it here to help future visitors.
This can be accomplished with a few changes to the switch CSS
label width:0 the main child div width:200% and the options spans with width:50%.