2016-08-06 17 views
1

我尝试从角材料使用FAB按钮,不过,我有麻烦了正确定位按钮浮动我的网页上的主要内容上面,这是我的代码片段角材料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>属于我的主要观点。这是它的外观在我的浏览器

enter image description here

我读过一些关于漂浮在GitHub上的FAB按钮,但我不能找到如何实现它也不会说这是已经实现的最后一次更新是2015年

回答

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按钮浮动到 right float

这是当FAB按钮浮动到 left float

希望这有助于有人!谢谢!

+0

我刚刚用'position:absolute'回答 - http://codepen.io/camden-kid/pen/xOyrQq :-)很高兴你解决了它。 –