Angular material 设计工具栏 - 格式问题

Question

我有一个网页，其中使用了 Angular material 设计中的 md-toolbar，但我遇到了一些格式问题。这是基本代码：

<md-toolbar style="position: fixed;">
<div class="md-toolbar-tools md-whiteframe-z1">

    <md-button class="md-icon-button" aria-label="Top Toolbar" hide-gt-sm ng-click="vm.toggleSideNav()">
        <ng-md-icon icon="menu"></ng-md-icon>
    </md-button>
    <h2>
        <span>Top Toolbar</span>
    </h2>
    <span flex></span>
    <md-button class="md-raised" ng-click="vm.logout()" aria-label="Logout" show-gt-sm>
        Logout
    </md-button>
</div>

我遇到的问题是，如果我从 md-toolbar 中删除 style="position: fixed;"，工具栏只会占用屏幕宽度的一小部分。当我添加 position: fixed 它占据了整个屏幕的宽度，但注销按钮不显示。就好像它被推出了屏幕的视图。我一直无法弄清楚如何既显示注销按钮又让工具栏延伸到整个页面。

这是工具栏的父级（减去所有脚本包含等）：

<!DOCTYPE html>
<html lang="en" ng-app="otpAdminApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body ng-controller="mainController as vm" ng-cloak>

    <div ng-view flex></div>

</body>
</html>

Answer 1

如果不查看您的代码，就无法给您一个好的答案。你能创建一个 plunkr. ？作为快速修复，您可以添加 style="width : 100vw" 替换 position:fixed （由于旧浏览器中的支持问题，这不是一个很好的选择）。如果你能创建一个plunkr，我就能帮助你。

Answer 2

我猜问题出在工具栏的父级上。

<body ng-controller="mainController as vm" ng-cloak>

<div ng-view flex></div>

</body>

您正在将 div 元素与 flex 一起使用，在这种情况下，div 将仅消耗其子元素所需的 space。例子。您可以使用 background-color css 属性自行检查。 http://codepen.io/next1/pen/aNgGZa

因此您必须根据需要将 layout-fill 与 div 或 md-content 一起使用。这是工作示例。 http://codepen.io/next1/pen/EKBLyp

<md-content layout="column" layout-fill style="background-color:pink"> // in parent controller as per your code
<md-toolbar>
  <div class="md-toolbar-tools md-whiteframe-z1">

    <md-button class="md-icon-button" aria-label="Top Toolbar" hide-gt-sm ng-click="vm.toggleSideNav()">
      <ng-md-icon icon="menu"></ng-md-icon>
    </md-button>
    <h2>
    <span>BankID OTP Administration</span></h2>
    <span flex></span>
    <md-button class="md-raised" ng-click="click = 'click'" aria-label="Logout" show-gt-sm>
      Logou
    </md-button>
  </div>
</md-toolbar>
<div flex>
  Text
</div>
</md-content>

Angular material 设计工具栏 - 格式问题

Angular material design toolbar - formatting problems

html

css

angularjs

angular-material