Vous devez d'abord configurer les widgets que vous voulez dans les onglets sans position (Notez les touches des widgets)
Maintenant, créez un widget html et dans le template mettez quelque chose comme ceci :
Contenu masqué
CSS:
<div class="block">
<div class="block-container">
<h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
<span class="hScroller-scroll">
<a href="url to the content"
class="tabs-tab is-active"
role="tab"
aria-controls="widget key 1">Tab title 1</a>
<a href="url to the content"
class="tabs-tab"
id="widget key 2"
role="tab">Tab title 2</a>
<a href="url to the content"
class="tabs-tab"
id="widget key 3"
role="tab">Tab title 3</a>
</span>
</h2>
<ul class="tabPanes widget--tab">
<li class="is-active" role="tabpanel" id="widget key 1">
<xf:widget key="widget key 1" />
</li>
<li role="tabpanel" aria-labelledby="widget key 2">
<xf:widget key="widget key 2" />
</li>
<li role="tabpanel" aria-labelledby="widget key 3">
<xf:widget key="widget key 3" />
</li>
</ul>
</div>
</div>
<xf:css>
.widget-tabs {
overflow: hidden;
.tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>
Dans mon exemple, je veux montrer les derniers sujets, le dernier message et le dernier message du profil, donc je remplace les valeurs par quelque chose comme ça :
Contenu masqué
CSS:
<div class="block">
<div class="block-container">
<h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
<span class="hScroller-scroll">
<a href="{{ link('whats-new/posts/') }}?skip=1"
class="tabs-tab is-active"
role="tab"
aria-controls="tab_lastest_threads">Latest threads</a>
<a href="{{ link('whats-new/posts/') }}?skip=1"
class="tabs-tab"
id="tab_lastest_post"
role="tab">New posts</a>
<a href="{{ link('whats-new/profile-posts/') }}?skip=1"
class="tabs-tab"
id="tab_lastest_profile_post"
role="tab">Latest profile posts</a>
</span>
</h2>
<ul class="tabPanes widget--tab">
<li class="is-active" role="tabpanel" id="tab_lastest_threads">
<xf:widget key="tab_lastest_threads" />
</li>
<li role="tabpanel" aria-labelledby="tab_lastest_post">
<xf:widget key="tab_lastest_post" />
</li>
<li role="tabpanel" aria-labelledby="tab_lastest_profile_post">
<xf:widget key="tab_lastest_profile_post" />
</li>
</ul>
</div>
</div>
<xf:css>
.widget-tabs {
overflow: hidden;
.tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>
Dans mon exemple, je veux montrer les derniers sujets, le dernier message et le dernier message du profil, donc je remplace les valeurs par quelque chose comme ça.
Contenu masqué
Vous devez aimer ce post pour à accéder à ce contenu.
Maintenant, il suffit de configurer la clé du widget, le titre, les positions, vérifier l'option du mode avancé option et enregistrer
Le résultat devrait être quelque chose comme ça :
