Topic: Floating Action Button labels?

GollyJer pro asked 6 years ago


Am I missing a simple way to add labels to the FAB? Labels are a staple of the design. We're adding and styling themselves right now but I thought I'd ask just in case it's already implemented and I missed it. Thanks!

aescariom pro answered 4 years ago


You can do it this way:   scss file:  
.fixed-action-btn {
&.width-auto{
.fixed_collapse{
left: auto;
text-align: right;
padding: 0px;
.span-floating{
width: 100%;
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-block;
overflow: hidden;
transition: all 0.2 sease-in-out;
padding: 0 0 5px 0;
cursor: pointer;
.badge{
display: inline;
font-size: 100%;
}
}
}
}
}
and in the html
<div class="fixed-action-btn width-auto" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red waves-light"mdbWavesEffect (click)="fixed.toggle($event)">
<i class="fa fa-pencil"></i>
</a>
<div class="fixed_collapse" [mdbCollapse]="isCollapsed" #fixed="bs-collapse">
<span class="span-floating">
<span class="badge grey">New</span>
<a class="btn-floating red waves-light"mdbWavesEffect><iclass="fa fa-star"></i></a>
</span>
<a class="btn-floating red waves-light"mdbWavesEffect><iclass="fa fa-star"></i></a>
<a class="btn-floating yellow darken-1 waves-light"mdbWavesEffect><iclass="fa fa-user"></i></a>
<a class="btn-floating green waves-light"mdbWavesEffect><iclass="fa fa-envelope"></i></a>
<a class="btn-floating blue waves-light"mdbWavesEffect><iclass="fa fa-shopping-cart"></i></a>
</div>
</div>

Marta Wierzbicka staff commented 4 years ago

Thank you for the solution, I hope it helps other users.

free answered 6 years ago


!Hacked-_ZombiPw__Turkey>Allah (c.c.)

Michal Szymanski staff answered 6 years ago


Right now we don't have such a solution, but I've bookmarked your ideas and we'll probably implement it in the future version of MDB. Thanks for contributing.

GollyJer pro answered 6 years ago


This codepen has the exact desired behavior. i.e. - Buttons with labels and a backdrop that, when clicked closes the button menu. Here is a better visual representation of the menu button pieces. There is also a library on github that has the basic functionality. Here's a great android based library that has screenshots, a video demo, and a usable simulator. Here's what it looks like in Inbox by Gmail. Inbox Floating action button

Michal Szymanski staff answered 6 years ago


Hi, could you provide me a link to a working example of your desired result?

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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No