• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
How to make a tabbed widget

How to make a tabbed widget

DL6

Well-known member
#1
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
Code:
<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...
 

Mr Lucky

Well-known member
#5
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

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

Well-known member
#6
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

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

Well-known member
#7
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

Well-known member
#8
Is a permissions issue, i try to see members online as guest in your site and i can't see.
1514997517755.png
The widget works with the same permission, you can see in the file src\XF\Widget\MembersOnline.php
1514997693052.png
 
#10
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