2016-08-06 2 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, но я не могу найти, как реализовать это и не говорят, что это уже было реализовано последнее обновление было 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 :-) Рад, что вы это решили. –

Смежные вопросы