Ionic 5 ion-slides as “Virtual Slides” - ionic-framework

I'm using Ionic Framework v5 with ion-slides which are based on Swiper.js which has a virtual property that intelligently loads and unloads data from the DOM based on where in a list of items you are.
I can't find any information about how this would be implemented in Ionic though. Any pointers would be greatly appreciated. Thank you.

ion-slides has an options property which you can use to pass additional parameters to Swiper.
The second option is to use Swiper directly. I've had to do that in the past because of problems with some custom options.

Related

Can i use Tailwind CSS and Material UI in the same Next js project?

If I used both of them, could I run into conflicts? Is this a good approach to use?
It is possible and the MUI team has been resolved it.
From the documentation:
If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the Tailwind CSS example project. If you use a different framework or already have set up your project.
It is necessary to Remove Tailwind's base directive in favor of the CssBaseline component provided by #mui/material and fix the CSS injection order.
You can read how: https://mui.com/guides/interoperability/#tailwind-css
Yes you can run both ui framework. But it is not a good approach. Every ui framework has the complete solution for designing ui part. Like in tailwind css you can have the JIT compiler for compilation your custom css. Or the other hand MUI has also.
I think you can go through just only on ui framework. I have suggestion for ui. For your next js project you can use-
Tailwind Css
Theme-ui
Thank you.
Definitely, You will be in a big problem because once you initialize a styling library it applies its basic styles to the components so that if you are using more than one styling library you may not be able to change the behavior or styles of the components.
It also leads to rubbish suggestions while adding classes names and so on.
Stick to a UI libray and go with it.If you cant get it using the ui libraray do it yourself using CSS that could be more interesting and you can have more control over the components.
Use Mui base instead of Mui core.
https://mui.com/base/guides/working-with-tailwind-css/
I have tried using Mui and Tailwindcss together and it's not worth it. First, you will have to use Mui/base instead of Mui/material in order to reduce conflicts check https://mui.com/base/guides/working-with-tailwind-css. And if you really need to customize Mui components styled of the sx prop. This is just my opinion.

(Ionic V3) MapBox not Loading for a Third Time

I'm integrating MB on my Ionic 3 project.
There's a map on my 'home' page. When user touches a button another map loads which uses the Directions API and after another click by user another map is supposed to load but won't.
The map div is present on this page but the styles and js script don't seem to get applied to it.
Is there a limitation which declares you cannot load MapBox 3 times in a project or is there something from my end?
Thank you in advance.
So, sigh, the problem was I was using the same map id on all my HTML pages containing a map div, forgetting Ionic applications are called one-page-apps.
Renaming map container divs fixed it.

How to integrate react-dnd into admin-on-rest?

Has anyone tried to integrate react-dnd or another lib into admin on rest?
I wanted to make datagrid draggable inside a referencearrayfield.
Should i write my own component overriding datagrid or there's a simple way to do it?
Thanks!
You'll have to implement a custom datagrid for that
Although experimental you can have a look on this plugin: https://github.com/marmelab/react-admin/tree/master/packages/ra-tree-ui-materialui
It has as dependency react-dnd and it seems that it is editing the listing. Not sure if it can update a property used for ordering like order for example

not able to register two plugins of touch-ui rte dialog

I am using the steps given in the URL to make a color-picker rte plugin
http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html
and at the same time I am making another custom rte plugin to do some text modulation.
But only one of them is working using rte.coralui2 as categories.
and both icons are coming at the same location.
If I disable one js then another is working.
I have registered the plugin with different name and I have also used different variables.
I am not able to make the rte plugin button at different location.
Please suggest the possible solution.
it's possible you are overlaying rather than extending the rte.coralui2 category. I suspect your custom clientLibs are competing with each other and only one is available.
It seems like you are using the same steps provided in the blogpost for creating both the plugins and while doing that, you are using the below code twice with different icons :
if(items.indexOf(ExperienceAEM.TCP_UI_SETTING) == -1){
items.splice(3, 0, ExperienceAEM.TCP_UI_SETTING);
}
So, maybe, the icons are being added at the same place and only one of them is shown.
You should create ExperienceAEM.CuiToolbarBuilder Class only once and add both icons inside that class

How to use prettyPhoto plugin with ASP.NET MVC 2

I'm a total newbie in jQuery and JavaScript and need help in integrating prettyPhoto plugin into a MVC 2 application.
What I have is a view (View1) with a link "Full Screen" and a partial view rendering a galleryview plugin (PartialView1). The link "Full Screen" is calling an action method in the controller to get all the photos for a gallery. It is then returning a partial view (PartialView2) and passing the list of photos as a model. This PartialView2 is supposed to show the gallery in prettyPhoto plugin upon load.
What code do I need to put into PartialView2 to achieve this?
I've looked at prettyPhoto docs but I don't understand what I need to do. Unfortunately, I can't put this up anywhere for you guys to see. Any help would be much appreciated.
Thanks
Ok, I figured it out. I needed a strongly typed view (using a ViewModel) and I loop through my model to load the photos.