角度材质:整页标签大小

Question

角度材质:整页标签大小

Inu*_*art 10 html css angularjs angular-material

我试图占据整页的空间,但我似乎无法在角度材料0.10.0上获得标签的高度,除非我添加.ng-scope { height: 100%; }.

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

完整的测试代码:(和这里)

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

Run Code Online (Sandbox Code Playgroud)

我必须补充说它在0.9.0上工作正常

Answer 1

nit*_*tin 12

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

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

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

Run Code Online (Sandbox Code Playgroud)

穿过这里

归档时间：	10 年，1 月前
查看次数：	17019 次
最近记录：	7 年，10 月前