IT

앵귤러 소재로 풀 하이트 사이드나브를 얻는 방법

itgroup 2023. 3. 19. 18:04
반응형

앵귤러 소재로 풀 하이트 사이드나브를 얻는 방법

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();
    };
};
})();

angular-material 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%; }

그 결과 풀 하이트 사이드나브가 잠금 해제 모드와 잠금 해제 모드 모두에서 정상적으로 작동합니다.

이건 나한테 효과가 있었어...

1) sidenav를 layout="layout"이 있는 div로 감습니다. 

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

2) sidenav에 "flex"를 추가하여 페이지 높이를 모두 채우도록 합니다.

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

이 같은 문제를 수정하기 위해 sidenav에 class를 추가했습니다.

position: fixed;

나도 비슷한 문제가 있었다."높이: 100vh;" 설정 스타일은 나에게 효과가 있었다.클래스를 사용할 수도 있습니다.

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

layout="layout"도 사용할 수 있지만, 제 컨텍스트에서는 큰 영향은 없습니다.

번 더 써보세요.layout-fill 속성md-content" " 가 붙은 ui-viewAtribute set(속성 집합)

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

</md-content>

'어울리다'를 써야 요.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>

sidenav 만 하면 .<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.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>

위의 코드는 각도 재료 문서에서 지정된 코드와 거의 동일하며 Js 파일도 문서에서 지정된 코드와 유사합니다.
편집:
기타 레퍼런스:
1. https://gist.github.com/epelc/6aa345f4496776569830.감가상각가치를 정정하다$media('gt-lg')로.$mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092

위의 문제는 css를 수정하는 것만으로 해결되었으며 코드를 변경할 필요가 없습니다.

솔루션 - .ng-scope { 높이: 100%;}

<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>

시험

이 문제를 해결하기 위해 여러 가지 방법을 시도했지만 메뉴 컴포넌트에 uiview를 직접 추가하여 해결할 수 있었습니다.<menu uiview layout="column" class="menu"> </menu>

디렉티브로 다른 수정을 시도하지 않았지만 이 간단한 css를 사용하여 필요한 것을 얻었습니다.이 css에 대한 어떠한 수정이나 조언도 환영합니다.

md-sidenav {
  height: -webkit-fill-available;
}

언급URL : https://stackoverflow.com/questions/26689816/how-to-get-a-full-height-sidenav-with-angular-material

반응형

'IT' 카테고리의 다른 글

org.springframework.filenamework에 액세스할 수 없습니다Configurable Application Context 클래스 파일  (0) 2023.03.19
WP REST API v2: 게시 ID별로 게시물 가져오기  (0) 2023.03.19
여러 요소에 ng-if(또는 기타 조건)를 적용하면서 드라이 상태를 유지하는 방법  (0) 2023.03.19
오류로 인해 플러그인을 삭제할 수 없습니다. my-plugin/my-plugin을 완전히 제거할 수 없습니다.php  (0) 2023.03.19
className 프로펠의 React + TypeScript 사용  (0) 2023.03.19

'IT'의 다른글

  • 현재글앵귤러 소재로 풀 하이트 사이드나브를 얻는 방법

관련글

댓글

티스토리툴바