Primeng: Tabview with custom html in the header

Created on 6 Apr 2017  路  17Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
For now the title of a tabview is a simple text.

Expected behavior
Would it be possible to add custom html to have dynamic content?

What is the motivation / use case for changing the behavior?
The objective is to implement a case with notifications on the tab title like on the following picture:
image001

Thanks in advance

new feature

Most helpful comment

Available for 6.1.3 which is due later today.

All 17 comments

i want it too.

We'll see if we can do it, I believe we can do so with templating.

+1
We are in need of this feature too. I have been trying to customize however seems no way. Is there any workaround till this feature is implemented?

+1

for the accordion panel you can simply create a custom header by adding p-header to the accordion tab

<p-accordionTab>
    <p-header>
        Header Content
    </p-header>
    Body Content
</p-accordionTab>

unfortunately this is not working for TabView.

would be great if you could make that consistent for other header components too.

I need this feature as well for my current project, where the count should be displayed in a badge.

cagataycivici, Is there a plan to implement this in nearest future, We might look for other frameworks as there is no way to achieve this in priming.

@nareshurs your choice on the framework is based on one component? you could implement your own component first and intergrate it with primeng when the functionality will be available.

@bevrard , At this point of time we have tight schedule which stopping me from creating custom component. I was just at least expecting this issue tagged to one of priming future milestones if they are serious on this. However I found a workaround for now by altering left icon with css.

FEATURE REQUEST: I'm also tasked with coming up with badge functionality for the menubar.

  1. Are there currently any plans to add that functionality in the future?
  2. Is there a way I can pass an identifier in for a top-level menu item?

Any news on this subject ?

I need this feature as well for my current project.

This feature works on premium templates , will it be available for the free ones ?

+1 like a badge

I ideally want to style the headers with a unique style, at the minute you are limited to basic text and an icon. I believe It would allow for the creation of cleaner code.

Is there any update on this?

Is there any update?

I was scrolling to the bottom expecting/hoping for this to be resolved. Seems like a popular request.

I am having trouble even implementing headerStyleClass.

Available for 6.1.3 which is due later today.

Was this page helpful?
0 / 5 - 0 ratings