角度材质：整页标签大小
[英]Angular Material: full page tabs size
问题描述
I am trying to occupy the space of the full page but I can't seem to get the height of the tabs right on angular-material 0.10.0, unless I add .ng-scope { height: 100%; } 
我试图占据整页的空间，但我似乎无法在角度材料0.10.0上获得标签的高度，除非我添加.ng-scope { height: 100%; } .ng-scope { height: 100%; } . .ng-scope { height: 100%; } 。
Is there a better way to achieve full page tabs? 有没有更好的方法来实现整页标签？
Full test code: (and 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>
I must add that it works fine on 0.9.0 我必须补充说它在0.9.0上工作正常
5 个解决方案
解决方案1
12 已采纳 2015-08-04 07:38:23
You need to use angular-material's 'layout-fill' attribute. 您需要使用angular-material的'layout-fill'属性。
layout-fill forces the layout element to fill its parent container 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>
解决方案2
4 2016-10-22 01:04:02
解决方案3
1 2017-10-26 06:21:27
This can be accomplished by adding the following attribute to your md-tabs element: 这可以通过将以下属性添加到md-tabs元素来完成：
md-tabs md-stretch-tabs="yes" md-tabs md-stretch-tabs =“是”
解决方案4
0 2015-08-04 02:14:55
Not really a better way. 不是更好的方式。 Is there a reason why you do not want to use 100% height on .ng-scope? 你有没有理由不想在.ng-scope上使用100％的高度？
A height of 100% is usually pretty hard to grasp for beginners (not saying you are) because it rarely behaves as expected. 对于初学者来说，高度100％通常很难掌握（不是说你是）因为它很少表现得像预期的那样。 There is a spec for use of viewport units but it isn't really better or worse per say. 有一个使用视口单元的规范，但它并不是真的更好或更差。
解决方案5
-1 2016-06-16 10:48:17
Here is how managed to to getmd-tabs to take up full available height. 以下是设置getmd-tabs以占用完整可用高度的方法。
Some notes first: 先说一下：
AFIK i is impossible to do this via existing md attributes (and I've spent hours researching this)
AFIK我不可能通过现有的md属性做到这一点（我花了几个小时研究这个） It will not be fixed by the team anytime soon (see comment from ThomasBurleson on June 10, 2016 here: https://github.com/angular/material/issues/2254 )
团队不会很快修复它（请参阅2016年6月10日ThomasBurleson的评论： https ： //github.com/angular/material/issues/2254 ）
The solution: 解决方案：
Make sure every parent element has layout="column" and layout-fill attributes (or layout-column and layout-fill classes). 确保每个父元素都有layout="column"和layout-fill属性（或layout-column和layout-fill类）。 This includes <ng-outlet> if that's relevant for your use case. 这包括<ng-outlet>如果这与您的用例相关。
IMPORTANT NOTE ABOUT CUSTOM COMPONENTS CREATED VIA COMPOENET ROUTER: 关于通过组合路由器创建的定制组件的重要说明：
In my case my html structure is ng-outlet -> custom-component -> md-card -> md-tabs 在我的情况下，我的html结构是ng-outlet - > custom-component - > md-card - > md-tabs
I added layout="column" and layout-fill to <ng-outlet> and <md-card> and added layout="column" to <md-tabs> . 我将layout="column"和layout-fill到<ng-outlet>和<md-card> ，并将layout="column"添加到<md-tabs> 。 However, I could not find a way to add them <account-component> (because it's created dynamically by Angular) so what I ended up doing is adding this (somewhat hacky) code to my component controller (ES6 but should be understandable even if you write ES5): 但是，我找不到添加它们的方法<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.