Topic: Dynamic add of tab
Expected behavior I would like to add a new tab to an existing nav-tabs clicking on a button. It would show a popup to ask for the name of the tab and then create the tab.
Resources (screenshots, code snippets etc.)
MDB doesn't have such a feature. You have to go full custom, here's a snippet I prepared. You can use it as a reference:
Thanks a lot for your help.
I made more or less the same code than you but cloned a hidden tab instead of addind a raw html string as inner html and the result is quite the same.
Thank you for that part.
Then I tried to add an event listener for the 'shown' event but it doesn't work.
Here are part of code lines to add my new tab :
tabBarUl.insertBefore(clonedTabLi, addNode); // addNode is a button at the end of tabs
const tabTrigger = new mdb.Tab(clonedTabLi);
clonedTabA is inside clonedTabLi but that does not trigger the event 'shown.mdb.tab'. I also tried to reverse the last two lines but with no success.
Services & Consulting
Hire our experts to help you design or build a dedicated project.
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No