Google Inbox の動作と同様に、md-toolbarの左上部分を非表示にせずにサイドナビゲーションを切り替えられるようにしたい:
アニメーションがないと、md-toolbarの下にサイドナビが表示されるため、トグル機能が原因のようです。
それは可能ですか?
<body layout="column" ng-controller="mainCtrl">
<md-toolbar layout="column" class="md-medium-tall"><span flex="flex"></span>
<div class="md-toolbar-tools">
<md-button class="menu" ng-click="toggleLeft()">
<md-icon md-svg-src="assets/svg/menu.svg"></md-icon>
</md-button>
<div layout="row" flex="flex" class="fill-height">
<div class="md-toolbar-item md-breadcrumb">
<span>Title</span></div>
<span flex="flex"></span>
</div>
</div>
</md-toolbar>
<div layout="row">
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-z2 md-sidenav-left" >
<md-list>
<md-list-item>
<md-button>Hey</md-button>
</md-list-item>
</md-list>
</md-sidenav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="js/app.js"></script>
およびapp.js
var app = angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {
$scope.toggleLeft = buildToggler('left');
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function () {
$mdSidenav(navID)
.toggle()
}, 100);
return debounceFn;
}}]);
ありがとう!
私も同じ問題を抱えていて、@ WilliamSのソリューションは私にはうまくいきませんでした。 SideNavが相対位置にある場合、正しく表示されません。 SideNavとContentを<md-content flex></md-content>
に入れることで機能しました:
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
</div>
</md-toolbar>
<md-content flex>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
<md-list>
<md-list-item>
<md-item-content md-ink-ripple>
<div class="inset">Item 1</div>
</md-item-content>
</md-list-item>
</md-list>
</md-sidenav>
<md-content>Content</md-content>
</md-content>
小さな更新:この回答はAngular材料0.10.1。 Angularマテリアルはまだ非常に若いため、このソリューションは永久に機能しないか、冗長になる可能性があります。
トップバーをサイドナビとオーバーラップさせるには、サイドナビよりも高いz-indexを指定する必要があります(z-indexを超えるものはすべて:60で十分です)
[〜#〜] html [〜#〜]
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
[〜#〜] css [〜#〜]
.main-toolbar {
/* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
z-index: 61;
/* Cosmetic */
background-color: green;
}
ただし、これにより、右側のサイドナビゲーションの上部が重なるため、希望どおりにならない場合があります。
サイドナビをトップバーの下に表示するには、サイドナビゲーションを絶対位置から相対位置に変更し、表示タイプをブロックに変更する必要があります。
このためには、sidenav要素のCSSをオーバーライドし、layout = "row"に続くdiv内に右側のsidenavを配置する必要があります。
[〜#〜] html [〜#〜]
<div layout="row">
<!-- your sidenav -->
</div>
[〜#〜] css [〜#〜]
.md-sidenav-right {
/* Cosmetic, show where the fill starts */
background-color: pink;
/* Override from absolute to relative */
position: relative;
/* Change to block display */
display: block;
}
上記の両方の変更を利用したコーデックスを次に示します。 angular-materialデモ、バージョン0.10.1 から取得したベースコード。
HTMLコード
<md-toolbar hide-gt-md>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Menu Button" hide-gt-md ng-click="onClickMenu();">
<md-icon md-svg-icon="menu.svg" aria-label="Menu Icon"> </md-icon>
</md-button> <h2>Title</h2> <span flex></span>
</div>
JSコード
$scope.onClickMenu = function () {
$mdSidenav("left").toggle();
};
次のリンクでmd-toolbarの完全な詳細を検索します