web-dev-qa-db-ja.com

Angular-Materialでフルハイトのサイドナブを取得する方法

私はAngular-Materialを使用しており、SideNavメニューを実装しています。画面サイズが小さい場合、メニューは非表示になり、[メニュー]トグルボタンをクリックすると、メニューはページ全体の高さで左からスライドします。画面が大きくなると、メニューは左側に固定されて表示されますが、ページ全体の高さでは表示されません。

固定メニューをページ全体の高さに見えるようにするにはどうすればよいですか？私はcssや他のmd属性で遊んでいますが、どうやって見つけるかわかりません。

<div ng-controller="appCtrl" layout="vertical" layout-fill>

<md-toolbar class="md.medium-tall app-toolbar">
    <div class="md-toolbar-tools" ng-click="toggleMenu()">
        <button class="menu-icon" hide-sm aria-label="Toggle Menu">
            <md-icon icon="img/icons/ic_menu_24px.svg">
                <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>
            </md-icon>
        </button>
        <h2>
            <span>Dev.Material</span>
        </h2>
    </div>
</md-toolbar>

<section layout="horizontal" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')">

        <md-toolbar md-theme="purple">
            <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>

        <md-content class="md-padding" ng-controller="menuCtrl">
            <p>
                This sidenav is locked open on your device. To go back to the default behavior,
                narrow your display.
            </p>
        </md-content>
    </md-sidenav>

    <md-content flex class="md-padding">
        Some content !!
    </md-content>

およびコントローラー：

(function () { 
'use strict';

var controllerId = 'appCtrl';
angular.module('app').controller(controllerId,
    ['$scope', '$timeout', '$mdSidenav', appCtrl]);

function appCtrl($scope, $timeout, $mdSidenav) {
    var vm = this;

    $scope.toggleMenu = function() {
        $mdSidenav('menu').toggle();
    };
};    
})();

(function () { 
'use strict';

var controllerId = 'menuCtrl';
angular.module('app').controller(controllerId,
    ['$scope', '$timeout', '$mdSidenav', menuCtrl]);

function menuCtrl($scope, $timeout, $mdSidenav) {
    var vm = this;

    $scope.close = function() {
        $mdSidenav('menu').close();
    };
};
})();
angularjsmaterial-design
29
James

角度材料0.6.0 rc1でもまったく同じ問題がありました。 （ デモサイト のコードを使用しました）。

この問題は、角度のあるマテリアルコードではなく、ページの完全な高さではない親cssコンテナに起因しています。

ページは次のような構造になっている必要があります。

<ui-view class="ng-scope">
    <div ng-controller="appCtrl" layout="vertical" layout-fill>
        ... your md sidenav code here ...
    </div>
</ui-view>

問題は、完全な高さではないng-scopeクラスに由来します。私の場合、 デモサイト からコードをコピー/ペーストし、これをcutom cssファイルに追加します

.ng-scope { height: 100%; }

その結果、ロックされたオープンモードとアンロックモードの両方で正常に機能するフルハイトのサイドナブができます。

25
Elijun

これは私のために働いた...

1）次のようにlayout = "vertical"を持つdivでsidenavをラップします...

<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>

2）サイドナフに「フレックス」を追加して、ページの高さいっぱいにフレックスします。

<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>
18
ng-darren

この同じ問題を修正するには、サイドナブにクラスを追加します

position: fixed;
12
phil_lgr

同様の問題がありました。設定スタイル「高さ：100vh;」クラスを使用することもできます。

<div layout="column" style="height:100vh;"></div>

layout = "vertical"を使用することもできます-私のコンテキストでは重要な効果はありません。

4
phil

layout-fill属性が設定されているメインmd-contentタグにui-view属性を追加してみてください。

<md-content ui-view layout-fill layout-align="center center">

</md-content>
4
sajmons

flexをサイドバーとコンテンツの両方、および最上部のコンテナで使用する必要があります。この方法では、追加のスタイルを使用する必要はありません。

コードは正常に機能しています（一部を最新のAngular Materialバージョン）に更新したことに注意してください）。

<div ng-controller="appCtrl" layout="column" flex>

<md-toolbar class="md.medium-tall app-toolbar">
    <div class="md-toolbar-tools" ng-click="toggleMenu()">
        <button class="menu-icon" hide-sm aria-label="Toggle Menu">
            <md-icon icon="img/icons/ic_menu_24px.svg">
                <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>
            </md-icon>
        </button>
        <h2>
            <span>Dev.Material</span>
        </h2>
    </div>
</md-toolbar>

<section layout="row" flex>
    <md-sidenav flex class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">

        <md-toolbar md-theme="purple">
            <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>

        <md-content class="md-padding" ng-controller="menuCtrl">
            <p>
                This sidenav is locked open on your device. To go back to the default behavior,
                narrow your display.
            </p>
        </md-content>
    </md-sidenav>

    <md-content flex class="md-padding">
        Some content !!
    </md-content>
</section>
</div>
2
Jesús Carrera

<div>の外側にサイドナブを作成するだけです。たとえば、<body>タグの直後に、次のように記述できます。

<body layout="row">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')">
   <md-toolbar md-theme="deep-orange">
       <h2 class="md-toolbar-tools">Menu</h2>
   </md-toolbar>
   <md-content ng-controller="menuBar" md-theme="deep-orange">
       <md-button layout-align="left" ng-repeat="item in items" ui-sref="{{item.location}}" class="menu-item"
       md-ink-ripple="#bbb" aria-hidden="false"> 
<!-- the above <md-button> just repeats buttons created in the JS -->
        <span>{{item.label}}</span>
       </md-button>
   </md-content>
</md-sidenav>
<!-- Other content ... -->
</body>

このコードは、完全に垂直なサイドバーを提供します。

1
A. J. Alger

上記のどれもangular material ver：1.1.0-RC.5でうまくいきませんでした。このようにしました：

_<body layout="column">

<div layout="row" ng-controller="reviewController" ng-cloak flex>

    <div layout="row">
            <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column">
            <md-toolbar class="md-theme-Indigo" class="md-medium-tall">
                <h1 class="md-toolbar-tools">Sidenav Left</h1>
            </md-toolbar>
            <div ng-controller="LeftCtrl">
                <md-button ng-click="close()" class="md-primary" hide-gt-sm>
                    Close Sidenav Left
                </md-button>
                <p hide show-gt-sm flex>
                    This sidenav is locked open on your device. To go back to the default behavior, narrow your display.
                </p>
                <p flex>
                    hi
                </p>
                <p flex>
                    there!
                </p>
            </div>
        </md-sidenav>
        <div layout-column flex>

            <p flex>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
            </p>
            <p flex>
                The right sidenav will focus on a specific child element.
            </p>
            <div flex>
                <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-sm>
                    Toggle left
                </md-button>
            </div>
            <div flex>
                <md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
                    Toggle right
                </md-button>
            </div>

            <md-content ui-view layout="column" flex></md-content>
        </div>
        <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
            <md-toolbar class="md-theme-light">
                <h1 class="md-toolbar-tools">Sidenav Right</h1>
            </md-toolbar>
            <md-content ng-controller="RightCtrl" layout-padding>
                <form>
                    <md-input-container>
                        <label for="testInput">Test input</label>
                        <input type="text" id="testInput" ng-model="data" md-autofocus>
                    </md-input-container>
                </form>
                <md-button ng-click="close()" class="md-primary">
                    Close Sidenav Right
                </md-button>
            </md-content>
        </md-sidenav>
    </div>
</div>
_

上記のコードは、angular material docsで与えられたものとほぼ同じであり、Jsファイルもdocsで与えられたものに似ています:)
EDIT：
その他の参照：
1。 https://Gist.github.com/epelc/6aa345f44967765698 。 $media('gt-lg')の減価償却値を$mdMedia('gt-sm')に修正します
2。 https://github.com/angular/material/issues/1092

0
jAYANT YADAV

上記の問題は、cssを変更することでのみ解決され、コードをまったく変更する必要はありません。

ソリューション-.ng-scope {height：100％; }

0
Manpreet
<div layout="column" layout-fill>
<section layout="row" flex>
    <md-sidenav class="md-sidenav-left"
                md-component-id="left"
                md-is-locked-open="$mdMedia('gt-md')"
                md-disable-backdrop
                md-whiteframe="4">

        <md-content>
            <div layout="row" layout-align="center center">
                <md-button ng-click="closeSideNav()" class="md-primary">
                    Agregar Zona +
                </md-button>
            </div>

            <p hide show-gt-md>
                This sidenav is locked open on your device. To go back to the default behavior,
                narrow your display.
            </p>
        </md-content>
    </md-sidenav>
</section>

テスト

0
Vesper

私はディレクティブを使用して他の修正を試みませんでしたが、この単純なcssを使用して必要なものを取得しました。このCSSに関する修正やアドバイスは歓迎します。

md-sidenav {
  height: -webkit-fill-available;
}
0
Mohammed Salman Shaikh

この問題を解決するために多くのことを試してみましたが、ついにメニューコンポーネントにuiviewを直接追加することで修正できました：<menu uiview layout="column" class="menu"> </menu>

0
cheesydoritosandkale