[Feature Request] Horizontal Steppers

[Daeluse]

Feature Request For Horizontal Steppers

Spec Sheet - https://material.google.com/components/steppers.html#steppers-types-of-steppers

What is the expected behavior?

Instead of leveraging the behavior of Material Lists, leveraging or extending the behavior of Material Tabs will provide a Horizontal Stepper which displays progress stacked on top of current step content in a column fashion rather than a row. Switching between steps would have some sort of 'swiping' animation and would emit the same events currently emitted by the vertical stepper.

What is the motivation / use case for changing the behavior?

Horizontal Steppers provide a much better user experience for wizards because they keep content above the fold and display progress before content. They also have better reaction to Wide Screen sizes.

What would you like to see in addition to expected behavior?

Development would be greatly simplified if a path towards switching between horizontal and vertical on the fly could be made for when the desktop layout turns to mobile.

[gnomeontherun]

I think its a great request. We've got a few other priorities to tackle first, but I wanted to acknowledge that this will stay on our radar.

[kyleledbetter]

Yeah totally agree, good request @Daeluse thx!

[kyleledbetter]

Just so we can see w/o having to click to spec:

[kyleledbetter]

I think it would be nice to have these two attributes/settings:

1. An attribute to force horizontal always
2. An attribute to change from vertical to horizontal on responsive breakpoints (using our media query service?)

[emoralesb05]

Yes, i was kinda thinking already in my mind to just add an input property that changes the stepper from vertical to horizontal depending on a value (boolean, enum or whatever). Leveraging our MediaService without actually depending on it.

[emoralesb05]

Design mock for horizontal stepper:

vs vertical stepper:

Starting to work on the code design and implementation, but might have to re-think how the stepper works internally to be able to handle both horizontal and vertical modes in the same component without too much complexity and easy to maintain.

We will try and keep the same component consumption since we like it that way.

Ideally, we would want to add just a mode input in <td-steps> so it could be changed on the fly.

Edit:

9/18/2016: New stepper mocks.

[emoralesb05]

Added with #95.

Its a first draft on horizontal vs vertical stepper with the new [mode] input in td-steps.