Angular Material: 整页标签大小

Question

我试图占据整个页面的 space，但我似乎无法在 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 上运行良好

Answer 1

确实不是更好的方法。为什么您不想在 .ng-scope 上使用 100% 高度？

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

Answer 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>

笨蛋 Here

Answer 3

以下是如何让 md-tabs 占据全部可用高度。

先做一些笔记：

AFIK 我不可能通过现有的 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

我在 <ng-outlet> 和 <md-card> 中添加了 layout="column" 和 layout-fill，在 <md-tabs> 中添加了 layout="column"。但是，我找不到添加它们的方法 <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');
    };
}

Answer 4

@nitin 的解决方案对我不起作用可能是我使用的 angular material 版本的原因。我的解决方案是将 md-dynamic-height 属性添加到 md-tabs 标签。

据此issue

Answer 5

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

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

Angular Material: 整页标签大小

Angular Material: full page tabs size

html

css

angularjs

angular-material