Vertical Tabs

[exnihilo-creatio]

For forms contain many fields and field groups, it would be nice to be able to create vertical progress tabs.
An example can be seen here

[cristijora]

Interesting idea. For now I can't set this as a high priority since I'm planning to rewrite the form-wizard in jsx due to some limitations. After doing that I will consider your proposal.

[amitneg1]

Hello There,
I am also working on this and need vertical tab support. Please let us know how soon you can roll out this support. Do you have any alternative solution for this. I need it on high basis

[cristijora]

Hi @amitneg1 I will give it a shot this week probably and see how it goes. Last time I tried, it was not very trivial to do so I left it for later on. The progress line was the tricky part

[amitneg1]

Hi @cristijora Any update on vertical tab support. As you said you will work upon it last week. I am working on vertical tab support. but it case i need any help can we sync over slack.

[cristijora]

Hey @amitneg1 @exnihilo-creatio
I will implement this step by step.
First step results
https://jsfiddle.net/bt5dhqtf/1241/

To achieve a vertical layout you need to specify 2 things

<form-wizard layout="vertical" steps-classes="stepSize">

.steps-size{
    width: 200px;
    height: 400px;
}

For now the progress bar is not shown yet as I have some troubles displaying it properly.
@amitneg1 can you give any tips on where and how should the buttons be placed?

[amitneg1]

Hey @cristijora

Thanks for quick reply, Please have a look at attached image for layout reference.

I doesn't need any progress bar and icons to show steps. Instead of icons and progress bar I will show vertical bar (as you can refer attached image) and on click of bar that specific section would get open like an accordion. That's it.

My requirement is as below:
There should be one "Save and Continue" button inside every step.
Secondly, Done/Submit button at final step.

If you have anything not clear please let me know or Feel free to contact me.

[cristijora]

@amitneg1 We would probably need a new css theme for this as it's totally different from what this plugin currently has. If you don't have too much time to wait, maybe you should consider using other components such as https://vuetifyjs.com/components/steppers

Any PR with help will make the process faster.
PS: Maybe we could start from the "tab" shape
https://jsfiddle.net/bt5dhqtf/1249/ and basically display the content inside steps

[cristijora]

Update here to everyone @amitneg1 @exnihilo-creatio
This feature is not possible to do with the current implementation.
I started working a new enhanced version (mainly technical improvements) and rewrite with render functions which will allow implementing this feature easily but that won't happen sooner than 2 weeks.

[k29]

Hi @cristijora, can you please update the status of vertical tabs?

[cristijora]

@k29 Really sorry but after trying several options, I could achieve the layout from the image above with the existing code. If you need vertical tabs please consider other options 😞 https://vuetifyjs.com/components/steppers

Closing as it will not be implemented unfortunately

[mandersondesign]

@cristijora Did you ever release a package that supported the layout you showed off in that js fiddle? I know it's been a couple of years, but I was curious about doing it vertically (even without the progress bar line).

[ghenry]

If you add layout="vertical" @mandersondesign it works. The docs haven't been updated though. Just tried it myself.

[ghenry]

I spotted it in vue devtools on the component instance data.