Using ::: inside tab
Closed this issue · 1 comments
PeppeL-G commented
I'm new to the ::: syntax, but I tried to use it inside tabs (nested usage):
# Tabs test
:::: tabs
::: tab Aaaaaa
Aaaaaaa...
::: tip Aaaa...
Aaaa....
:::
Aa....
:::
::: tab Bbbbbbb
Bbbbb...
:::
::::
And it does not work the way I intended. The result is (note the screwed up sections at the bottom):
<div class="tabs-component">
<ul role="tablist" class="tabs-component-tabs">
<li role="presentation" class="tabs-component-tab is-active"><a aria-controls="#aaaaaa" href="#aaaaaa" role="tab"
class="tabs-component-tab-a" aria-selected="true">Aaaaaa</a></li>
<li role="presentation" class="tabs-component-tab"><a aria-controls="#bbbbbbb" href="#bbbbbbb" role="tab"
class="tabs-component-tab-a">Bbbbbbb</a></li>
</ul>
<div class="tabs-component-panels">
<section id="aaaaaa" role="tabpanel" class="tabs-component-panel" style="">
<p>Aaaaaaa...</p>
<div class="tip custom-block">
<p class="custom-block-title">Aaaa...</p>
<p>Aaaa....</p>
</div>
</section>
<p>Aa....</p>
<p>:::</p>
<section id="bbbbbbb" role="tabpanel" class="tabs-component-panel" style="display: none;" aria-hidden="true">
<p>Bbbbb...</p>
</section>
</div>
</div>
Is what I'm trying to do impossible, or am I using the wrong syntax?
PeppeL-G commented
Ah, I thinks I get it now. You can use whichever number of :
you want, but the inner ones needs to be fewer than the surrounding ones. So in my case I can use:
# Tabs test
::::: tabs
:::: tab Aaaaaa
Aaaaaaa...
::: tip Aaaa...
Aaaa....
:::
Aa....
::::
:::: tab Bbbbbbb
Bbbbb...
::::
:::::
Can someone confirm this? And if possible also suggest a link to where I can learn more about this syntax (have tried to search for it without any luck).
EDIT
But an example on Vuepress suggests differently :/
EDIT 2
Seems like this confirms what I first wrote, but it must be better described somewhere?