Dear Ionic Framework Community
it is fun working with Ionic Vue for creating a mobile app but right now I am asking myself how to solve the following:
I am loading a big list of up to 200 entries/items with images from a database to detect and choose the right animal. I want to include a filter option to narrow down the results of the list. however if possible I want to have the ‘filter window’ visible all the time when one wants to filter and at the same time immediately see the best results/items in the list after clicking on the filter options (quite some checkboxes in different categories)
thus I don’t know which components I can use to fulfill this. If I use a Ionic Menu too much of the screen is covered. With a modal window I can’t see the current list neither. do you know a solution somehow?
Have you tried ion-select? This sounds exactly like what you need. Set the interface prop to alert, which it should be by default, and you’d get a dialog small enough to see what’s behind it.
On phone screens, I would opt for a search bar, and checkboxes and selects to select filters.
And underneath the thumbnails that can be selected and a tickbox on top of it if selected (css z-indexed)
Larger screens, use a menu with side-pane with the options.
Maybe express which commonly know UI you like the most (Amazon, Booking, photo app) to make the search for components easier?
Thank you @treigh - ion-select is definitely a good start. it looks like it supports multiple selection and several options to adapt. if I see it correctly I could add my resulting filtered list (with the animal thumbnails) below the ion-select which might be an ok trade-off. one only always needs to scroll up to filter again and I would thus only need a minimize and expand option for the ion-select filters area. is there such a thing?
and thank you @Tommertom as well for your suggestions. First and foremost I develop for phone screens right now. so far I only have seen what I intend via opening another page with all the search options (search bar and selects) and then returning to the filtered list page. however you don’t see the immediate results of the search which would be good by narrowing down your search.
to have both. filtering options and current filtered list might be not possible for small screen sizes (?) ion-menu covers the list results too much