Page 1 of 1

pa:tab not expand and clickable to another page

Posted: 16 Jul 2020, 03:38
by samasama
Hi,

How can I make the menu icon clickable? <pa:tab>
I don't want to make it expand, just click on the menu icon and navigate to other pages
Image

Thanks

Re: pa:tab not expand and clickable to another page

Posted: 12 Sep 2020, 22:44
by mert.sincan
Hi,

Sorry for the delayed response! For now, the tab structure doesn't support this feature. Maybe, you can make the following changes in your local;

Code: Select all

// TabMenuRenderer.java

encodeEnd

    for(UIComponent child : children ){
            if(child.isRendered() && child instanceof Tab) {
                Tab tab = (Tab) child;
                UIComponent header = tab.getFacet("header"); // Add this line
                
                writer.startElement("li", tab);
                    if (header != null) { // Add this block
                        header.encodeAll(context);
                    }
                    else {
                        writer.startElement("a", tab);
                        writer.writeAttribute("href", "#", null);
                        writer.writeAttribute("class", "ripplelink tabmenuitem-link", null);
                           ....

Code: Select all

// layout.js
//line 70
    this.tabMenuNavLinks.off('click.menu').on('click.menu', function(e) {
            $this.sidebar.css('overflow','hidden');
            setTimeout(function() {
                $this.sidebar.css('overflow','');
            }, 301);
            
            var link = $(this),
            index = link.parent().index();
            
            if (link.attr('href') !== '#') { // Add this block
                return;
            }
            
            ...
Exp;

Code: Select all

<pa:tab icon="home" title="Features">
     <f:facet name="header">
         // Please add a link element has 'ripplelink tabmenuitem-link' class. 
         <a class="ripplelink tabmenuitem-link'" ...>...</a>
         OR
          <p:link styleClass="ripplelink tabmenuitem-link'" ...>..<p:link>
          OR
          ...
     </f:facet>
</pa:tab>
Best Regards,