Панель инструментов FAB - не открывается весь путь

Я помещаю компонент панели инструментов FAB в нижнем правом углу экрана. Он нависает над прокручиваемым контентом (эмулируется здесь <div>). Поведение, зависающее над контентом, является правильным, и оно, кажется, правильно размещено.Панель инструментов FAB - не открывается весь путь

Однако панель инструментов не расширилась до ее размера. Я попытался поместить HTML в <md-content>, но это приводит к поломке позиционирования. Здесь что-то не хватает?

Заранее благодарен!

//app.js 
 
angular.module('BlankApp', ['ngMaterial']) 
 
.controller('BasicDemoCtrl', function DemoCtrl() { 
 
    
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
 
</head> 
 

 
<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak> 
 
    <!-- Page Window --> 
 
    <md-content flex> 
 
     <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div> 
 
    </md-content> 
 
    <md-fab-toolbar md-direction="left" class="md-fab-bottom-right"> 
 
     <md-fab-trigger class="align-with-text"> 
 
      <md-button aria-label="menu" class="md-fab md-primary"> 
 
       <md-icon>menu</md-icon> 
 
      </md-button> 
 
     </md-fab-trigger> 
 
     <md-toolbar> 
 
      <md-fab-actions class="md-toolbar-tools"> 
 
       <md-button class="md-icon-button" ng-click="reviewTable()"> 
 
        <md-icon>launch</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button" ng-click="showActionToast()"> 
 
        <md-icon>edit</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button"> 
 
        <md-icon>arrow_back</md-icon> 
 
       </md-button> 
 
      </md-fab-actions> 
 
     </md-toolbar> 
 
    </md-fab-toolbar> 
 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    <!-- Your application bootstrap --> 
 
    <script type="text/javascript" src="app.js"></script> 
 
</body> 
 

 
</html>

источник

2016-12-30 Diode Dan

Похоже, что компонент FAB Toolbar не полностью соответствует классам FAB button. Мне удалось получить что-то близкое к тому, что я хотел с помощью кода ниже. По существу, я использовал класс .md-is-open, чтобы переместить панель инструментов FAB в нужное положение. Это удерживает стилистическое положение FAB на месте (.md-fab-bottom-right). Это не идеально, и положение резко меняется при закрытии.

//app.js 
 
angular.module('BlankApp', ['ngMaterial']) 
 
.controller('BasicDemoCtrl', function DemoCtrl() { 
 
    
 
});

md-fab-toolbar { width: 100vw; } 
 

 
md-fab-toolbar.md-is-open { right: 0 !important; bottom: 0 !important; }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
 
</head> 
 

 
<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak> 
 
    <!-- Page Window --> 
 
    <md-content flex> 
 
     <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div> 
 
    </md-content> 
 
    <md-fab-toolbar md-direction="left" class="md-fab-bottom-right"> 
 
     <md-fab-trigger class="align-with-text"> 
 
      <md-button aria-label="menu" class="md-fab md-primary"> 
 
       <md-icon>menu</md-icon> 
 
      </md-button> 
 
     </md-fab-trigger> 
 
     <md-toolbar> 
 
      <md-fab-actions class="md-toolbar-tools"> 
 
       <md-button class="md-icon-button" ng-click="reviewTable()"> 
 
        <md-icon>launch</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button" ng-click="showActionToast()"> 
 
        <md-icon>edit</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button"> 
 
        <md-icon>arrow_back</md-icon> 
 
       </md-button> 
 
      </md-fab-actions> 
 
     </md-toolbar> 
 
    </md-fab-toolbar> 
 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    <!-- Your application bootstrap --> 
 
    <script type="text/javascript" src="app.js"></script> 
 
</body> 
 

 
</html>

источник

2016-12-31 06:38:40

Используйте этот CSS

.md-fab-toolbar.md-fab-bottom-right { 
    width: 100vw; 
}

Попробуйте выполнить следующее snippet- заметить <style>

//app.js 
 
angular.module('BlankApp', ['ngMaterial']) 
 
.controller('BasicDemoCtrl', function DemoCtrl() { 
 
    
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 
 
    <style> 
 
    .md-fab-toolbar.md-fab-bottom-right { 
 
     width: 100vw; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body ng-app="BlankApp" ng-controller="BasicDemoCtrl" layout="column" ng-cloak> 
 
    <!-- Page Window --> 
 
    <md-content flex> 
 
     <div style="position:absolute;left:48px;top:115px;width:1507px;height: 500px;"></div> 
 
    </md-content> 
 
    <md-fab-toolbar md-direction="left" class="md-fab-bottom-right"> 
 
     <md-fab-trigger class="align-with-text"> 
 
      <md-button aria-label="menu" class="md-fab md-primary"> 
 
       <md-icon>menu</md-icon> 
 
      </md-button> 
 
     </md-fab-trigger> 
 
     <md-toolbar> 
 
      <md-fab-actions class="md-toolbar-tools"> 
 
       <md-button class="md-icon-button" ng-click="reviewTable()"> 
 
        <md-icon>launch</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button" ng-click="showActionToast()"> 
 
        <md-icon>edit</md-icon> 
 
       </md-button> 
 
       <md-button class="md-icon-button"> 
 
        <md-icon>arrow_back</md-icon> 
 
       </md-button> 
 
      </md-fab-actions> 
 
     </md-toolbar> 
 
    </md-fab-toolbar> 
 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 
    <!-- Your application bootstrap --> 
 
    <script type="text/javascript" src="app.js"></script> 
 
</body> 
 

 
</html>

источник

2016-12-30 20:20:08 bhantol

Спасибо за быстрый ответ! Это фиксировало проблемы с шириной, но когда панель инструментов открывается, я заметил, что правая и нижняя границы не совпадают с экраном. Это исправление? –

Yeah..add 'right: 0; bottom: 0; 'в эту таблицу стилей после ширины – bhantol

Я отправил свое решение, импровизированное вне ваших предложений. Кажется, что панель инструментов FAB не полностью перекрестно работает с стилями FAB (как md-button). –

Панель инструментов FAB - не открывается весь путь

ответ

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