Topic: MdB Vue Tab with dropdown items
Hello,I'm trying to add a tab with a dropdown items to my app. The intention is that clicking on every dropdown item will display my custom HTML content in tabs using the referred slot.I am able to display the dropdown with the options (items ) I want. However, I do not know how to associate the item with an slot. See below an example of my link. Your support is greatly appreciated. See the snippet
links: \[ { text: 'File', dropdown: true, slot: 'home-slot', dropdownItems: \[ {text: 'New Case', slot: 'home-slot'}, {text: 'Open Case'}, {divider: true}, {text: 'Separeted link'}\] }, {text: 'New Case', icon: 'plus', slot: 'home-slot'}, {text: 'Open Case', icon: 'heart',}, {text: 'Secondary Product', icon: 'tint',}, {text: 'Terciary Product', icon: 'water',}\]
ok, now my question is...what kind of action can be associated with a dropdown item? can I call a modal form? If so, could you please provide a short example? Thanks
Mikołaj Smoleński staff commented 4 years ago
You can associate any action to a dropdown item using the following syntax:
<mdb-dropdown-item v-on:click.native="yourMethod">Action</mdb-dropdown-item>
The native modifier is necessary in this case, because it's a custom component.
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.1
- Device: Dell
- Browser: Chrome
- OS: Windowns10
- Provided sample code: No
- Provided link: Yes
Mikołaj Smoleński staff commented 4 years ago
Unfortunately, tab slots are designed to run for tabs only. It is not possible to link them additionally with a dropdown. Best regards