Angular Material：整页标签大小答案

【问题标题】：Angular Material: full page tabs sizeAngular Material：整页标签大小
【发布时间】：2015-10-25 20:40:33
【问题描述】：

我试图占据整个页面的空间，但我似乎无法在 angular-material 0.10.0 上获得选项卡的高度，除非我添加 .ng-scope { height: 100%; }。

有没有更好的方法来实现整页标签？

完整的测试代码：（和here）

<!DOCTYPE html><meta charset="utf-8">
<html ng-app="app" ng-controller="appController">
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <script>
        var app_module = angular.module('app', ['ngMaterial']);
        var app = document.querySelector('[ng-app=app]');

        app_module.controller('appController', function ($scope) {});
        app_module.config(function($mdThemingProvider) {
            $mdThemingProvider.theme("default").primaryPalette('grey').accentPalette("indigo").dark();
        });
    </script>
</head>

<body layout="column">

<md-tabs flex layout="column" class="md-accent" style="background:red">
    <md-tab flex layout="column" label="A" style="background:green">
        <div flex style="background:blue">A</div>
    </md-tab>
    <md-tab label="B">
        <div flex style="background:cyan">B</div>
    </md-tab>
</md-tabs>

</body>
</html>

我必须补充一点，它在 0.9.0 上运行良好

【问题讨论】：

这是一个效果很好的解决方案：stackoverflow.com/questions/30314441/…

标签： html css angularjs angular-material

【解决方案1】：

并不是一个更好的方法。您是否有不想在 .ng-scope 上使用 100% 高度的原因？

对于初学者来说（不是说你是）通常很难掌握 100% 的高度，因为它很少表现得像预期的那样。有一个使用 viewport units 的规范，但实际上并没有好坏之分。

【讨论】：

【解决方案2】：

您需要使用 angular-material 的 'layout-fill' 属性。

layout-fill 强制布局元素填充其父容器

<body layout="column">

  <md-tabs flex layout="column" layout-fill class="md-accent" style="background:red" >

    <md-tab flex layout="column" label="A" style="background:green">
      <md-tab-content flex style="background:blue" layout-fill>A</md-tab-content>
    </md-tab>

    <md-tab label="B" layout-fill>
      <md-tab-content flex style="background:cyan" layout-fill>B</md-tab-content>
    </md-tab>

  </md-tabs>

</body>

PlunkerHere

【讨论】：

你使用的是 Angular Material 0.9.0，我的问题是 0.10.0
不错！所以我需要md-tab-content。谢谢你。你应该更新你的答案。
使用 v1.1.5 并复制了这个例子，但它对我不起作用。
@Guus 分享一下

【解决方案3】：

这是设法让 getmd-tabs 占据全部可用高度的方法。

先做一些笔记：

AFIK i 不可能通过现有的 md 属性来做到这一点（我已经花了几个小时研究这个）
团队不会很快修复它（请参阅 ThomasBurleson 于 2016 年 6 月 10 日在此处发表的评论：https://github.com/angular/material/issues/2254）

解决办法：

确保每个父元素都有layout="column" 和layout-fill 属性（或layout-column 和layout-fill 类）。这包括 <ng-outlet> 如果这与您的用例相关。

关于通过 COMPOENET 路由器创建的自定义组件的重要说明：

在我的例子中，我的 html 结构是 ng-outlet -> custom-component -> md-card -> md-tabs

我将layout="column" 和layout-fill 添加到<ng-outlet> 和<md-card> 并将layout="column" 添加到<md-tabs>。但是，我找不到添加它们的方法 <account-component> （因为它是由 Angular 动态创建的）所以我最终做的是将这个（有点 hacky）代码添加到我的组件控制器（ES6，但即使你写也应该是可以理解的ES5):

import template from './account.html';

export const accountComponent = {
    template: template,
    controller: accountController,
};

/*@ngInject*/
function accountController (accountService) {
    this.data = accountService.getAccountData();

    /*** THIS IS THE HACKY PART THAT SOLVED IT FOR ME: ***/
    this.$routerOnActivate = function () { // nextRoute
        const classes = document.querySelector('account-component').classList;
        classes.add('layout-column');
        classes.add('layout-fill');
    };
}

【讨论】：

【解决方案4】：

@nitin 的解决方案对我不起作用，可能是我正在使用的角材料版本。我的解决方案是将md-dynamic-height 属性添加到md-tabs 标记中。

据此issue

【讨论】：

很好。这个对我有用。我正在使用角度材料：1.1.10。

【解决方案5】：

这可以通过将以下属性添加到您的 md-tabs 元素来实现：

md-tabs md-stretch-tabs="yes"

【讨论】：

水平拉伸标签页眉。我认为这不是他们想要的。