search

adamdawkins / react-mdl-stepper

React Component for Material Design Light Stepper.
https://adamdawkins.github.io/react-mdl-stepper/
MIT License
4 stars 3 forks source link

Responsive stepper #3

Open barrysteyn opened 8 years ago

barrysteyn commented 8 years ago

Wow. Thank you for this project, it is awesome

I would like to alter this so that for desktop, the steps are displayed horizontally. I have hardly looked at the source code, but how difficult do you think this would be to do?

adamdawkins commented 8 years ago

Hi, Thanks for commenting, it's still a bit of a WIP!

I'm using the CSS provided by @ahlechandre here https://ahlechandre.github.io/mdl-stepper, so I'm not sure how difficult it'd be either.

I'd image using it in react probably makes it easier, because we're already setting a state to keep control of which step is open, etc, but you might need to change the structure so that the step headings are in a separate place to the step content.

So, gut feel there is that it will involve some re-structuring of the HTML as well as the CSS, but the javascript should still do all of the state management for you.

@ahlechandre has followed the BEM approach of MDL very well, so you could get started on a .mdl-stepper--horizontal and see how you go!

barrysteyn commented 8 years ago

@adamdawkins - @ahlechandre has updated his stepper so that horizontal is not supported. I am going to have a first go at implementing this inside your library and send you a pull request. That is, unless you beat me to it ;)