How to make a tabbed widget

[DL6]

DL6 submitted a new resource:

How to make a Widget with tabs - This guide show you how to make a widget with tabs with more widgets inside

In this guide i show you how to make a widget with tabs.
First you need to configure the widgets you want in tabs without position (Write down the widgets keys)
Now create a widget html and in the template put something like this

<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...

Read more about this resource...

 

[Brad Padgett]

This is nice. I might give this a try sometime. Definitely thanks for sharing!

 

[maszd]

working perfect, thank you @DL6

 

[HenrikHansen]

Cool, will definitely give this a try.

 

[Mr Lucky]

I'm aware this is unmaintained, but if somebody could help with a small issue that would be great.

I have made a tabbed widget to show
in tab 1 = members online
in tab 2 = statistics

<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="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
                </h2>
                <ul class="tabPanes widget--tab">
                    <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                    <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                        <xf:widget key="forum_overview_forum_statistics" /></li>
                </ul>
            </div>
        </div>

(CSS in extra.less)

It's all working fine, except that members online is empty when viewed by unregistered/not logged in.

Can anyone please help?

 

[DL6]

I'm aware this is unmaintained, but if somebody could help with a small issue that would be great.

I have made a tabbed widget to show
in tab 1 = members online
in tab 2 = statistics

<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="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
                </h2>
                <ul class="tabPanes widget--tab">
                    <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                    <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                        <xf:widget key="forum_overview_forum_statistics" /></li>
                </ul>
            </div>
        </div>

(CSS in extra.less)

It's all working fine, except that members online is empty when viewed by unregistered/not logged in.

Can anyone please help?

The guests have permissions to see the member list?
I recommend changing the template with something like this

<xf:if is="$xf.visitor.canViewMemberList()">
    <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="/online/" class="tabs-tab is-active" role="tab" aria-controls="forum_overview_members_online">Members Online</a><a href="" class="tabs-tab" id="forum_overview_forum_statistics" role="tab">Statisiics</a></span>
            </h2>
            <ul class="tabPanes widget--tab">
                <li class="is-active" role="tabpanel" id="forum_overview_members_online">
                        <xf:widget key="forum_overview_members_online" /></li>
                <li role="tabpanel" aria-labelledby="forum_overview_forum_statistics">
                    <xf:widget key="forum_overview_forum_statistics" /></li>
            </ul>
        </div>
    </div>
<xf:else />
    <xf:widget key="forum_overview_forum_statistics" />
</xf:if>

 

[Mr Lucky]

Thanks, but that just removes the member list totally for guests.

What I want is for guests to see the member list when the widget is tabbed.

Guests see the member list when it is a normal widget (as they do on this site) it's just that just when I make it a tab, then it shows as empty to guests, neither staff nor members.

 

[DL6]

Is a permissions issue, i try to see members online as guest in your site and i can't see.

The widget works with the same permission, you can see in the file src\XF\Widget\MembersOnline.php

 

[Mr Lucky]

Thanks, yes I have found that now.

 

[Solooo]

Hi guy,
I want to build multi widgets in a block like this, but use multi dropdown to select and show widgets content instead tabs.
How can i do?
Thanks

 

[Wilouness]

Love it !! Thank you really !!

 

[kelle67]

I'm a lttle bit confused.
I create a widget html and in the template put the code.
But what i have to do to display it at Forum Overview?

 

[Wilouness]

I'm a lttle bit confused.
I create a widget html and in the template put the code.
But what i have to do to display it at Forum Overview?

Affect the position "Forum view" to your html widget. But no position to the widgets you want to put in tabs cause they are sticked to the html

 

[kelle67]

Affect the position "Forum view" to your html widget. But no position to the widgets you want to put in tabs cause they are sticked to the html

Thank you so much. That was my mistake.

 

[kelle67]

One question more, how i can show this tabbed widget only on Desktop?

 

[Creaky]

Stupid question time.

I'm going to use to show Most Replied, Most Liked & Most Viewed. How do you find the links needed for each tab?

 

[DL6]

Stupid question time.

I'm going to use to show Most Replied, Most Liked & Most Viewed. How do you find the links needed for each tab?

If the content does not have a page dedicated to that content, you can change this part

<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>

With this

                 <span class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</span>
                 <span
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</span>
                 <span  class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</span>

 

[imno007]

@DL6
I notice in your demo that the widget titles aren't displayed beneath the tab titles, and I'm wondering how this is controlled? I used your example, creating tabs for new threads, new posts, and profile posts, and on half of my styles (the UI.X ones) the widget titles are shown beneath all three tabs. On the rest, including the Xenforo style, it only shows beneath Latest threads, like so:

Is there a way to suppress this, maybe with extra.less, on all tabs for all styles?

 

[maszd]

I'm wondering how this is controlled?

you need enable advanced mode

 

[imno007]

It is: