浮动操作按钮
优质
小牛编辑
142浏览
2023-12-01
Floating Action Button is supported only in Material Theme
Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Layout
Layout of floating action button is very simple. Just put it as the direct child of page
or view
:
<!-- Page-->
<div class="page navbar-fixed">
<!-- Navbar-->
<div class="navbar">
<div class="navbar-inner">
<div class="center">Floating Action Button</div>
</div>
</div>
<!-- Floatin Action Button -->
<a href="#" class="floating-button color-pink">
<i class="icon icon-plus"></i>
</a>
<!-- Scrollable Page Content-->
<div class="page-content">
<div class="content-block">
Lorem ipsum dolor sit amet, ....
</div>
</div>
</div>