Vue3: Change icon for MMDBDropdown

Topic: Vue3: Change icon for MMDBDropdown

mrorabau priority asked 4 months ago

Expected behavior Have a prop or slot to modify the material dropdown arrow (or not even show one).

Actual behavior Adding an icon in the slot only adds it to the button text. There is no method I could find to remove the material icon, nor modify it.

To work around this, I thought I could just add a regular button with @click, however that does not work either as the dropdown menu auto-closes immediately.

I also researched React MDB Support, and while I would expect MDB vue3 implementation to be similar, it seems to not work the same.

Resources (screenshots, code snippets etc.)

  <MDBDropdown v-model="dropdown23">
    <button @click="dropdown23 = !dropdown23">...</button>
    <MDBDropdownToggle @click="dropdown23 = !dropdown23" slot="toggle">
      <FontAwesomeIcon :icon="['fas', 'ellipsis']"></FontAwesomeIcon>
      TEST<MDBIcon icon="mdb" iconStyle="fab" />
    </MDBDropdownToggle>
    <MDBDropdownMenu :animation="true" :fade-in="false" :dark="true">
      <MDBDropdownItem tag="button">Add Dashboard Item</MDBDropdownItem>
      <MDBDropdownItem tag="button">Another Action</MDBDropdownItem>
      <MDBDropdownItem tag="button">Something else here</MDBDropdownItem>
    </MDBDropdownMenu>
  </MDBDropdown>

https://mdbootstrap.com/support/react/change-the-icon-of-dropdown/

Add comment

Bartosz Cylwik staff answered 4 months ago

0 0 Best answer

Please insert min. 20 characters.

Hello! The arrow in dropdown is beeing added via css. You can remove the icon by setting the display property of .dropdown-toggle::after element to none

.dropdown-toggle::after {
   display: none;
}

You can also insert your own svg like this:

.dropdown-toggle::after {
  border: none;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/></svg>");
}

Hope that helps! Best Regards!

mrorabau priority commented 4 months ago

@Bartosz,

First, thanks for the quick response. The issue I have with this is that I believe it will change all of the dropdowns on the page. In this case there is only one on the page that I am attempting to change. If I provide the dropdown-toggle an element id, will #mytoggle::after{} work? (I'll try and test later today it if I don't hear back from you first).

Thanks!

mrorabau priority commented 4 months ago

Never mind. I tried it real quick with #mytoggle::after{ display: none; } and it worked. Thanks again!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: MDB5 4.1.1
Device: N/A
Browser: chrome
OS: Windows / Linux
Provided sample code: No
Provided link: Yes

mrorabau

0Support score
1Questions 0Answers 0Snippets