Howto Vertical tabs ? + HowTo Vertical inside Horizontal tabs and vice-versa.

[ezzle]

Hi.

Howto vertical instead of horizontal layout?

And howto tabs (h|v) inside another tabs and vice versa ?

Best regards,

Tshitshi

[ezzle]

like this

https://codepen.io/naveenbhaskar/pen/pabqgW

[sapphi-red]

Nested tabs works but the style needs to be tweaked.

::::tabs
=== outer tab a

:::tabs
== inner tab a
foo
== inner tab b
bar
:::

=== outer tab b
b content
::::

Vertical tabs should be possible by adding a custom style.

[ezzle]

Thank you very much.

I want a vertical layout for outer tabs. Unfortunately I have no idea of style to make it happen. Any tips ?

Best regards,

Tshitshi

[sapphi-red]

You can inject a css file in the theme config or add the style tag in the md file.
https://vitepress.dev/guide/extending-default-theme#customizing-css
https://vitepress.dev/guide/using-vue#script-and-style

[ezzle]

A solution needing improvment.
https://stackblitz.com/edit/vite-8nyd7s?file=docs%2Findex.md

As you can see, the result is not exactly what expected. The tab-list should be flex-direction:column. But ... there is some conflicting style or the rule is not specific enough.

Putting the style directly in the generated html, produces the correct result

<div data-v-6a4aef84="" class="plugin-tabs" style="display:flex;flex-direction: row;"><div class="plugin-tabs--tab-list" role="tablist" style="display:flex;flex-direction: column ; width:16%; margin:62px 32px 0 0;word-break: break-all;"><button id="tab-INTRO-1" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-INTRO-1" tabindex="-1">INTRO</button><button id="tab-UML-1" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-UML-1" tabindex="-1">UML</button><button id="tab-Archimate-1" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-Archimate-1" tabindex="-1">Archimate</button><button id="tab-JSON-1" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-JSON-1" tabindex="-1">JSON</button><button id="tab-CSV-1" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-CSV-1" tabindex="-1">CSV</button><button id="tab-XML-1" role="tab" class="plugin-tabs--tab" aria-selected="true" aria-controls="panel-XML-1" tabindex="0">XML</button></div><!--v-if--><!--v-if--><!--v-if--><!--v-if--><!--v-if--><div data-v-47429141="" data-v-6a4aef84="" id="panel-XML-1" class="plugin-tabs--content" role="tabpanel" tabindex="0" aria-labelledby="tab-XML-1"><div data-v-6a4aef84="" class="plugin-tabs"><div class="plugin-tabs--tab-list" role="tablist"><button id="tab-XML-34" role="tab" class="plugin-tabs--tab" aria-selected="true" aria-controls="panel-XML-34" tabindex="0">XML</button><button id="tab-XML-DB-34" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-XML-DB-34" tabindex="-1">XML-DB</button><button id="tab-XML stack-34" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-XML stack-34" tabindex="-1">XML stack</button><button id="tab-XML-db stack-34" role="tab" class="plugin-tabs--tab" aria-selected="false" aria-controls="panel-XML-db stack-34" tabindex="-1">XML-db stack</button></div><div data-v-47429141="" data-v-6a4aef84="" id="panel-XML-34" class="plugin-tabs--content" role="tabpanel" tabindex="0" aria-labelledby="tab-XML-34"><p data-v-6a4aef84=""><strong data-v-6a4aef84="">XML View</strong></p><p data-v-6a4aef84="">Based on the Essential xml Data Model</p></div><!--v-if--><!--v-if--><!--v-if--></div></div></div>

plugin-tabs
style="display:flex;flex-direction: row;"

Outer plugin-tabs--tab-list
style="display:flex;flex-direction: column ; width:16%; margin:62px 32px 0 0;word-break: break-all;"

Can you help to optimize the solution , please ?

An enhancement should be a way to set the vertical class attribute directly on the markdown. Something like this
::::tabs {.vertical} or :::tabs {.vertical} or ===tabs {.vertical}

Thank you for your help.

Best regards,

Tshitshi

[sapphi-red]

You can wrap it in a div instead like this.
https://stackblitz.com/edit/vite-ifm42v?file=docs%2Findex.md

[ezzle]

Excellent!

Thank you for your help.

Best regards,

Tshitshi