bootstrap
bootstrap copied to clipboard
twbs
Add a Steppper component
I'd suggest to add a Stepper component, similar to the component of MDB. Steppers provide a convenient way of breaking a complex form down to smaller steps. Benefits:
- Smaller space required (since it uses a collapse-like style)
- Easier to read (since you always just see a part of the whole)
Example: You have a registration which requires you to fill out a form of 16 input fields which can be overwhelming for a user. With a stepper you could create 4 steps and group it logically, e. g. contact data, interests etc.
URL: https://mdbootstrap.com/docs/jquery/components/stepper/
Example Screenshots taken from the MDB component page
There is also a similar component in Semantic UI: https://semantic-ui.com/elements/step.html
Are there any criteria to get counted as a "full component"? For example the component breadcrumb has way less content to offer than this feature suggestion.
If you look at the MDB component page you see working examples with different variations.
I've used a stepper with a simple jQuery plugin ( the pages were separated by a fieldset element )
Later as that particular website migrated, I had to make a Bootstrap 4 usable component. Besides the responsive issues (dropping the fieldset requirement amongst other things), there was the need for page by page validation, which required hooks. There was also the need for adding or removing steps dynamically, which required quite some messing with the core code plugin, and more hooks. Then there were async callbacks needed that required form validation too, and disabling and enabling components, which meant more hooks.
While still in use, I think that stepper component of my own has too many hooks to get hooked ( pardon the pun ).
Having just a barebone stepper, would be quite limiting in userland, as I found out, when the demand came to add more responsive stuff to my version.
So a stepper can be done, but I would not recommend it to include it as core component into Bootstrap, as it requires much more JS than we see for the average Bootstrap component.
Just my 2 cents.
@Johann-S has a stepper plugin you can use https://github.com/Johann-S/bs-stepper
Are there any criteria to get counted as a "full component"? For example the component breadcrumb has way less content to offer than this feature suggestion.
Very fair question. Don't have an answer just yet, but thanks for asking that. Maybe we can do more here. Thoughts @ffoodd on including this in the core? Or having an example with @Johann-S's project?
I guess @Johann-S stepper is closer from what's being asked. Maybe could we add an integration example, at least?
To add something to our core, I think it should be requested several times. This is the only way to not completely bloat the output, and ensure a component would be helpful.
Did we have other requests for this kind of things?
After the recent changes and depending if we drop Legacy Edge support, I think we'll have room for new components. Remember we have the #29017 that should land at some point (I need to rebase it probably).
to be honest, this component could be very useful for me, i just don't open issues requesting it because i'm always afraid of someone close it and say: 'no' lol
BS is a CSS framework but, why not add more JS based components?
bootstrap can start making components as separate from the core and plugable through npm.
eg: @bootstrap/stepper, @bootstrap/carousel
We don't plan to split the packages at this point. Maybe things will be better eventually and we'll get to do it. I'm in favor but I don't want to have to use yarn.
Back to the point, TBH you are the only one who expressed this request AFAICT. @Johann-S could look into it, assuming everyone agrees with adding said component, he has time and we check how much it adds to the project.
We could at least mention bs-stepper in our docs, assuming it works with v5.
@mdo: your call about adding bs-stepper in core. Not sure how much it will increase our size. I see some use cases for sure, but it seems this is the first time it was requested.
@XhmikosR I think many people are like @leandroruel and rather than requesting it, they simply google for a plugin. I also made the experience that my suggestions often get declined and I can understand, that people don't want to request new features.
Besides that I like the modular approach he suggested. So in the future there could be a "core" module which doesn't include components like a Stepper and if you want it, then you opt-in.
It would be amazing if we could merge @Johann-S 's Stepper component. It has all the basic necessary features and designs for a Stepper. Maybe for v5.1.0 ?
Clearly no progress has been made as there are no further updates from any of the maintainers ;).
That said, as I'm reviewing old issues and PRs, I'm wondering if we can create something here after all. I've been rather hesitant, but for JS functionality, I feel like this could be accomplished as an extension to our tab plugin. Thoughts from @twbs/js-review?
There's also the question of what kind of styling to offer as there's lots of potential for variation in how these look—tabs, breadcrumbs, circles with numbered indicators, etc.
please create it.
if stepper is already in bootstrap why should we use other libraries.
you guys are doing great job.
dawg cant believe this issue is still active.
Just waiting for you to open the pull request to add it ;).
In some recent idle time, I put together a quick HTML/CSS mockup together for a potential stepper component. Obviously not based on @Johann-S's own plugin, but wanted to try my hand at something. Looking at the opening comment again, it's also going to be impossible I think to make the same component work for both examples given from MDB and Semantic UI. Just two different scenarios IMO.
Thoughts on the below?
that's awesome. How about to put this into next bootstrap 5.2 version.
that's awesome. How about to put this into next bootstrap 5.2 version.
Nope, would've be the version after that at the earliest. And I'm unsure yet what (if any) JS we include here. Just a fun first pass.
dawg cant believe this issue is still active.
Just waiting for you to open the pull request to add it ;).
sorry for my comment
@mdo Great proposal! My team and I would definitely use it in different projects. Would it be possible to share a live example? It could allow people to give better feedback.
This would be an amazing component, and it seems there are already decent implementations/suggestions. Is it on any near future goals?
I am trying to implement something similar using a nav pills override.
Any updates on this? That's awesome and will remove unecessary libs/code.
