Topic: MdB Vue Tab with dropdown items

alana_vue free asked 3 years ago

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',}\]

Mikołaj Smoleński staff commented 3 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

alana_vue free answered 3 years ago

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 3 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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: 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