pa:tab not expand and clickable to another page

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
samasama
Posts: 1
Joined: 15 Jul 2020, 11:35

16 Jul 2020, 03:38

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

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Sep 2020, 22:44

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,

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests