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

aescariom pro answered 6 years ago

0 0 Best answer

You can do it this way:

scss file:

<div>
<div>
<pre>.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%;
}
}
}
}
}</pre>
</div>
</div>
<div>and in the html</div>
<div></div>
<div>
<pre><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></pre>
<div>
<div></div></div>
</div>
</div>
<div></div>

Please insert min. 20 characters.

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 6 years ago

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

Add comment

free answered 8 years ago

0 0 Best answer

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

Add comment

Delete

Michal Szymanski staff 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

GollyJer pro answered 8 years ago

0 0 Best answer

<a href="http://codepen.io/T-P/pen/zqbrBO" rel="nofollow">This codepen</a> has the exact desired behavior.  i.e. - Buttons with labels and a backdrop that, when clicked closes the button menu.

<a href="http://materialdesignblog.com/Material-Design-Floating-Action-Button/#" rel="nofollow">Here is a better visual representation</a> of the menu button pieces.

There is also <a href="https://github.com/futuresimple/android-floating-action-button" rel="nofollow">a library on github </a>that has the basic functionality.

<a href="https://github.com/Clans/FloatingActionButton" rel="nofollow">Here's a great android based library</a> that has screenshots, a <a href="https://youtu.be/XngUY3PN1IQ" rel="nofollow">video demo</a>, and a <a href="https://appetize.io/app/ffreudbwmyedw5trzhyjknd2jg" rel="nofollow">usable simulator.</a>

Here's what it looks like in Inbox by Gmail.
<img src="https://s3.amazonaws.com/insights-images-prod/importanceinvisibledesignmeglouwimage4_1f743670f003f2c1b21b5f3f64052900.png" alt="Inbox Floating action button" />

Please insert min. 20 characters.

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