tatic/chunks/7303-a58aa219b019649c.js","4577","static/chunks/4577-01ecb1e520abe2b7.js","1120","static/chunks/1120-bf3e823007489208.js","2181","static/chunks/2181-3c3f55f15c9ef7a3.js","8903","static/chunks/app/inspiration/%5Bslug%5D/page-5d1ddbd9301869a6.js"],"default"] 19:T61c,

Published on Dribbble / ui | Virgil Pana

Hi Guys,

Here’s another take on this custom dropdown controller that learned some new tricks this week, thank you all for your feedback(especially @[3116:Claudiu Cioba] for his pertinent comments).

I think the video is self-explanatory but here’s a quick recap of the features:

Tap: The dropdown will display a short coachmark that provides some orientation to the user about the interaction required to operate the dropdown.

Swipe: The list will open to allow full-screen scrolling and selection and will close on once the touch is ended.

Flick(quick swipe without stop at the end): The list will open and become persistent(modal behavior) with an additional confirmation button to close the list. In my opinion the flick gesture is the most natural to trigger this behavior since is what we use hundred of times per day to scroll long lists like webpages and social feeds on our phones so it feels like the most natural and intuitive thing in this situation.

DirectSelect Dropdown Take2

Cool stuff, every week

More Inspiration