[英]Angular Material: full page tabs size
我试图占据整页的空间,但我似乎无法在角度材料0.10.0上获得标签的高度,除非我添加.ng-scope { height: 100%; }
.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>
我必须补充说它在0.9.0上工作正常
您需要使用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>
穿过这里
来自@nitin的解决方案对我不起作用可能导致我使用的角度材料的版本。 我的解决方案是将md-dynamic-height
属性添加到md-tabs
标记。
根据这个问题
这可以通过将以下属性添加到md-tabs元素来完成:
md-tabs md-stretch-tabs =“是”
不是更好的方式。 你有没有理由不想在.ng-scope上使用100%的高度?
对于初学者来说,高度100%通常很难掌握(不是说你是)因为它很少表现得像预期的那样。 有一个使用视口单元的规范,但它并不是真的更好或更差。
以下是设置getmd-tabs以占用完整可用高度的方法。
先说一下:
AFIK我不可能通过现有的md属性做到这一点(我花了几个小时研究这个)
团队不会很快修复它(请参阅2016年6月10日ThomasBurleson的评论: https : //github.com/angular/material/issues/2254 )
解决方案:
确保每个父元素都有layout="column"
和layout-fill
属性(或layout-column
和layout-fill
类)。 这包括<ng-outlet>
如果这与您的用例相关。
关于通过组合路由器创建的定制组件的重要说明:
在我的情况下,我的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');
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.