I need a new Component! (Challenge?)

Hi all!..
I’m needing a component like a horizontal picker. I drew a prototype to a better explain.

The component will be displayed like a list-item, with icons (or images), where the user will scroll the icons horizontally. When a item (icon) is selected, the item title (name) will be displayed:

Image 1 - The item “Social” is selected in the component

For a nice look and feel, when the user scroll the items in the component, It will have some transitions. The selected item will have the opacity: 1 and a big size in the center of the component. The other items will have a small size and some gradual transparency, while the item names will be sliding to the direction of the scroll. The effect is similar to the Apple Cover Flow:

Image 2 - scrolling the items in the component

The user can scroll the items in the component to select an item:

Image 3 - the new item “Games” is selected

I had some basic idea about the item parameters, like:

{
  itemIcon: '', // String. The icon of the horizontal picker item. Can be an url img
  itemTitle: '', // String. The title of the item, displayed below the icon when the item is selected.
  itemValue: '', // String. The value of the item.
  carousel: '', // Boolean. Indicates if the icons will spin like a carousel or will stop when come to the end.
}

The component will return the value of the item selected, like a select input.

I had tried to modify the slide-box component to work like my description, but without success.

Why I need all this?
I had an idea for a very simple App, and I would like to build it in just one screen, without vertical scroll. A radio button will give the same result, but it will increase the screen vertically. With this new component the height is reduced, in addition to give a better look and feel.

If someone saw something like this, or accept the challenge to create something like this, please share with us!..

Thank you all!..

1 Like

Have you tried a tabbed approach in stead of slide box?

Ok. I will start writing a directive for this. Or at least I will try.

1 Like

@saniyusuf no, I had lost some time trying to modify only the slide-box.
@siddhartha this is nice!.. thank you for your effort, any news give us a feedback …

thank you guys for your time!..

nobody had success?.. :confused:

i want this too…

A few more days. I am almost there.

2 Likes

Did you got it work?

Yes @siddhartha, did it work? I am looking for this exact thing, it is a very used pattern now

someone have looked at this: https://github.com/Rendez/st2-picker-pan

is almost what we are looking for…

Hi. Created a prototype using ionic slide box: http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/#/

Please check it out, I will create proper directives and more configurable component soon.

2 Likes

hey @saravcts, it’s very nice! :smiley:

can you provide a download link of source code?..

@fdedeh, here you go: https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox

7 Likes

Thanks very much! :blush:

that’s awesome, thanks!!
I only noticed, that the icons are a bit off when I try it on my phone (Samsung Galaxy S3).
Tried to fix it, but had no luck with the css classes…

do you know a quick fix for this? works fine for me with chrome on my desktop!

1 Like

Glad you liked it, Which android version are you using? Currently I added CSS with only “-webkit” prefixes, that might be a reason.

I’m using Android 4.3 - still couldn’t figure it out :frowning:

Awesome. Didn’t know I needed this plugin, but it fits perfectly for a use case I working with right now!

@manu, fixed this issue now. Issue was with the way I calculated the middle position of the tab. Updated git: https://github.com/saravmajestic/ionic/tree/master/tabbedSlideBox and demo: http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/#/

Would be awesome if it was possible to specify which tab was selected at the beginning and maybe easily control with an ng-model attribute.