Menu
I'm am trying to implement a FAB on the bottom right corner of my web app. Is manual CSS the only way to do this? I do not see any documentation for this on https://material.angularjs.org.
This is an example of what I want to implement (the bottom right red button):
762
Add the floating action button to your layout The size of the FAB, using the app:fabSize attribute or the setSize() method. The ripple color of the FAB, using the app:rippleColor attribute or the setRippleColor() method. The FAB icon, using the android:src attribute or the setImageDrawable() method.
Floating Action Button (FAB) is a very common UI control for Android apps. Shaped like a circled icon floating above the UI, it's a tool that allows users to call out the key parts of your app. FAB is quite simple and easy to implement UI element, despite that designers often incorrectly incorporate it into layouts.
Add the big button So we add the following <div>s. So we add the CSS rules, set the position fixed, 50px from bottom and 50px from the right. Add the cursor:pointer so it will look like a button. Then we add the <div class=”button iconbutton”> to wrap the fontawesome plus icon.
The main CSS rule is "right"; in order to add to Luis's answer, add this rule to the CSS:
.md-fab-bottom-right{
position: fixed !important;
right: 15px; /* Add this and change value to set the margin you want */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
