Naprawiono pasek narzędzi Angular Material ORAZ lepką stopkę
Od jakiegoś czasu walę głową w ten problem i znalazłem rozwiązanie. Chciałbym mieć stały pasek narzędzi (pasek nawigacyjny) oraz lepką (pływającą) stopkę. Stopka powinna unosić się na dole głównej sekcji, ale powinna być lepka, gdy nie ma treści. Wygląda na to, że mogę zrobić jedną lub drugą rzecz, ale nie obie. W przypadku tej metody pasek narzędzi jest naprawiony, ale stopka nie jest lepka. Jest dołączany do paska narzędzi, gdy sekcja główna jest pusta.
<body ng-controller="MainCtrl" layout="row"> <div layout="column" flex>
<md-toolbar class="md-medium-tall">
<div class="md-toolbar-tools">
<span>HEADER</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
<span flex></span>
<md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
</md-toolbar>
<md-content>
<div layout="column" flex>
<div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}
<div style="background-color: red;" flex>
<div style="background-color:orange;color:white;" >footer item
</md-content>
</body>
Poniższy kod działa jak lepka stopka, ale pasek narzędzi również jest przewijany.
<body ng-controller="MainCtrl" layout="row"> <div layout="column" flex>
<md-toolbar class="md-medium-tall">
<div class="md-toolbar-tools">
<span>HEADER</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">onOff</md-button>
<span flex></span>
<md-button class="md-raised" ng-click="toggleNum()">half/full</md-button>
</md-toolbar> <div layout="column" flex>
<div ng-if="displayContent" style="background-color:SteelBlue;color:white;" ng-repeat="card in cards|limitTo: displayLim">body {{card.title}}
<div style="background-color: red;" flex>
<div style="background-color:orange;color:white;" >footer item
</body>
Wydaje się, że jest to właściwy, elastyczny sposób na osiągnięcie tego, co próbuję zrobić, ale po prostu nie mogę tego zrobić idealnie.
Oprócz tej metody przyjąłem również bardziej tradycyjne podejście polegające na implementacji lepkiej stopki przy użyciu obliczonej wysokości sekcji bazowej z
calc (100vh - header - footer). Prawie się zorientowałem, kiedy BAM .. angular-material zdecydował się zmienić rozmiar paska narzędzi wraz z rozmiarem rzutni. Prawdopodobnie mam zamiar przesłać żądanie zmiany, aby użyć spacji wypełniającej
& < div flex & > & </div & >w
md-content, ale najpierw chciałem wiedzieć, czy ktoś ma lepsze rozwiązanie.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Działa to tylko w Chrome:
Działa to w Chrome i Safari:
Anonimowy użytkownik
Potwierdzenie od:
https://material.angularjs.org ... ldren
Witryna CodePen
http://codepen.io/kuhnroyal/pen/YwrdLx
Anonimowy użytkownik
Potwierdzenie od:
<div class="snippet-code">
<div class="snippet" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">