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!..
