Floating Action Button labels?

Topic: Floating Action Button labels?

GollyJer pro asked 8 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!

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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

Add comment

GollyJer pro answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff pro premium priority answered 8 years ago

0 0 Best answer

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.

Add comment

answered 8 years ago

0 0 Best answer

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

Add comment

aescariom pro answered 6 years ago

0 0 Best answer

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 Szymanska staff pro premium commented 6 years ago

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

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

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

GollyJer

Pro User

10Support score
1Questions 1Answers

0Snippets likes 0Snippets