Sam*_*rie 29 angularjs material-design angular-material
我认识到Angular Material的实施正在进行中,但我今天早上花了一些时间试图熟悉它.但是,我真的很难让演示中显示的概念在一个独立的站点中工作.
似乎当指令喜欢<md-toolbar>和<md-content>用于具有固定高度的容器时,它们工作得很好.我正在努力将它们扔进<body标签内,并且能够像本例中那样使用粘性页脚布局.
我尝试了很多变体,但是这里有一个例子,当从DOM中删除内容时它不起作用.当内容在那里时,它会超出视口,而页脚会像你期望的那样被放置.在Chrome和Firefox的最新版本中,此示例在删除内容时将页脚保持在底部,但在IE中这根本不起作用.在IE中,无论主要内容是否显示,页脚都会浮动在标题下方.
演示: http ://codepen.io/sstorie/pen/xbGgqb
<body ng-app="materialApp" layou-fill layout='column'>
<div ng-controller="AppCtrl" layout='column' flex>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
</div>
</md-toolbar>
<main class='md-padding' layout="row" flex>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
</main>
<md-toolbar class="md-medium-tall">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
</body>
使用Javascript:
angular.module('materialApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.cards = [
{text: 'Bla bla bla bla bla bla bla ',
title: 'Bla' },
...repeat 10 times...
];
$scope.displayContent = true;
$scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});
CSS:
body {
min-height: 100%;
height: auto !important;
height: 100%;
}
我绝对不是CSS大师,但感觉这应该很容易用角度材料中的布局选项,所以我希望我真的错过了一些明显的东西.
kuh*_*yal 21
你可以通过一个小的解决方法来解决这个问题.
min-height: calc(100vh - 176px)在你的main元素上使用,(对于md-toolbars,176px = 2*88px)layout='column'从根div中删除layout-fill layout='column'从身体中移除我用CDN版本0.8.3替换了材料css/js,因为我的IE10会在Codepen中与那些数量的CSS/JS一起崩溃.
我在Chrome,Firefox和IE10上对此进行了测试 - 似乎可行.
http://codepen.io/anon/pen/azgdOZ
所以我只是用角质材料进行体验,但我为此做了什么
<div layout="column" layout-fill>
<md-toolbar class="md-default-theme">
<!-- your stuff -->
</md-toolbar>
<md-content layout-fill role="main">
<!-- your main areas -->
</md-content>
<md-bottom-sheet>
<div>I am a sticky footer</div>
</md-bottom-sheet>
</div>
我没有经过足够的实验来确定这是否能按照我想要的方式完成,但到目前为止看起来很有希望.请注意,如果您的内容不受限制,则可能会不断推动底部内容.如果你在md-content上使用overflow-y:auto它可能会起作用(我没有足够的应用程序构建还没有测试)
我没有发现任何答案在没有一个缺陷或其他缺陷的浏览器中可靠地工作.
正如在这个SO答案中所指出的,这有效:
<md-toolbar></md-toolbar>
<md-content flex layout="column">
<div layout="column" flex>
<main flex="none"></main>
<div flex></div>
<footer flex="none"></footer>
</div>
<md-content>
这是一个代码的代码.
| 归档时间： |
|
| 查看次数： |
34459 次 |
| 最近记录： |