我将 FAB 工具栏组件放在屏幕的右下角。它悬停在可滚动内容上(此处由 <div> 模拟)。将鼠标悬停在内容上的行为是正确的，并且内容似乎放置正确。
但是，工具栏不会展开至其完整尺寸。我尝试将 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>最佳答案
使用此 CSS
.md-fab-toolbar.md-fab-bottom-right {
width: 100vw;
}
尝试运行以下代码片段 - 请注意 <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>关于angularjs - FAB 工具栏 - 无法完全打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41401619/