Question about button, icon-color and flipping cards


Topic: Question about button, icon-color and flipping cards

iparker asked 5 years ago

Hello,

I have different questions about different components. Would be great to get some help with this.

1.) What is the right was to set a route to a button? I tried something like this but this does not work.

<mdb-btn tag="a" to="/favourites" class="pl-2 pr-3" color="primary" icon="heart" rounded>Favoriten</mdb-btn>

2.) What is the right way to set the color for an icon? When I set an icon-color with color="secondary" it works, but not with color="grey darken-1". Why? And which colors can be set with color and which colors via class?

3.) How can I add a dynamic icon? I tried something like this but this does not works:

4.) My most important question: I want to display multiple rotating cards on one page (like rotating-card-example at https://mdbootstrap.com/plugins/vue/card-animations/#v-1). But these cards have dynamic content - so I can't set a fix height to the cards. What is the right way to solve this?

Thanks for some help!

Best regards,

Timo


Mikołaj Smoleński staff answered 5 years ago

Hi there,

  1. I recommend to wrap mdb-btn component by a router-link, i.e.: <router-link to="/favourites"><mdb-btn>Favourites</mdb-btn></router-link>
  2. There is an ability to set icon color for seven standard Bootstrap colors. To make advanced changes I suggest to use class attribute (class="grey darken-1")
  3. I can't see an example code.
  4. Unfortunately, floating cards work only with fixed height. Only workaround is to write a custom method for getting content height of the card and setting it to the wrapper.

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: x
  • Browser: x
  • OS: x
  • Provided sample code: No
  • Provided link: Yes