角度材質：整頁標簽大小
[英]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上工作正常
5 個解決方案
解決方案1
12 已采納 2015-08-04 07:38:23
您需要使用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>
穿過這里
解決方案2
4 2016-10-22 01:04:02
來自@nitin的解決方案對我不起作用可能導致我使用的角度材料的版本。 我的解決方案是將md-dynamic-height屬性添加到md-tabs標記。
根據這個問題
解決方案3
1 2017-10-26 06:21:27
這可以通過將以下屬性添加到md-tabs元素來完成：
md-tabs md-stretch-tabs =“是”
解決方案4
0 2015-08-04 02:14:55
不是更好的方式。 你有沒有理由不想在.ng-scope上使用100％的高度？
對於初學者來說，高度100％通常很難掌握（不是說你是）因為它很少表現得像預期的那樣。 有一個使用視口單元的規范，但它並不是真的更好或更差。
解決方案5
-1 2016-06-16 10:48:17
以下是設置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');
};
}
Zozo Tabs - 整頁寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.