Question

我试图使用角度素材中的FAB按钮，但是，我无法正确定位按钮以浮动在我页面上的主要内容之上，这是我的代码段

<div layout="row" ng-cloak>
     <div layout="column">
         <div flex>
            <md-fab-speed-dial md-open="false" md-direction="down" ng-class="'md-scale'">
                <md-fab-trigger>
                    <md-button aria-label="menu" class="md-fab md-warn" >
                        <md-icon class="material-icons">menu</md-icon>
                    </md-button>
                </md-fab-trigger>
                   <md-fab-actions>
                    <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
                        <md-icon class="material-icons" aria-label="Twitter">format_list_bulleted</md-icon>
                    </md-button>
                    <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
                        <md-icon class="material-icons" aria-label="Facebook">insert_chart</md-icon>
                    </md-button>
                    <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
                        <md-icon class="material-icons" aria-label="Google Hangout">face</md-icon>
                    </md-button>
                </md-fab-actions>
            </md-fab-speed-dial>    
         </div>
     </div>
     <div layout="row" style="width: 100%">
        <div flex>
            <ui-view></ui-view>
        </div>
     </div>
</div>

字段<ui-view>与我的主视图相关。这就是它在浏览器上的显示方式

我已经阅读了有关在github中浮动FAB按钮的内容，但我找不到如何实现它，也没有说它已经实现了上次更新是2015年。

Answer 1

刚刚得到它，对于任何想要实现此类解决方案的人，请参阅代码片段

<div layout="row" ng-cloak>
     <div layout="row" style="width: 100%;">
        <div flex>
            <div style="float: <right or left>;">
                <THIS IS WHERE MY FAB BUTTON CODE GOES>
            </div>   
            <ui-view></ui-view>
        </div>
     </div>
</div>

，结果是

当FAB按钮浮动到右侧时

当FAB按钮浮动到左侧时

希望这能有所帮助！谢谢！

角度材料FAB按钮浮动位置

1 个答案: