각도 재료 레이아웃 - 창을 채우도록 확장
Angular 재료 레이아웃을 작성하려고 합니다.세로 스크롤 바를 만들지 않고 브라우저 창 전체를 채우는 페이지를 만드는 것이 목표입니다.페이지 맨 위에는 페이지 폭의 100%를 차지하는 툴바가 있습니다.툴바 아래에는 너비의 100%를 소비하는 타이틀 영역이 있습니다.제목 영역 아래 왼쪽에 있는 네비게이션 메뉴와 오른쪽에 있는 클라이언트 영역을 원합니다.목표는 브라우저 창 전체를 네비게이션 메뉴와 클라이언트 영역 모두 수직으로 채우는 것입니다.
제가 달성하고자 하는 것을 보여드리기 위해:
레이아웃 행과 열과 속성 플렉스 및 레이아웃 채우기를 실험해 왔습니다.제가 발견한 다른 모든 게시물에는 올바른 조합으로 이것이 가능해야 한다고 나와 있지만, 해결 방법이 없었습니다.문제를 설명하기 위해 Plunker를 만들었습니다.
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
인덱스는 다음과 같습니다.html:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>adasd</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-toolbar layout="row" class="md-hue-3">
<div flex="15" layout layout-align="center center" >
<span>Logo</span>
</div>
<div flex="85" layout layout-align="center center" >
<span>Toolbar Header</span>
</div>
</md-toolbar>
<div flex >
<div ng-view flex layout-fill></div>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
main.html(ng뷰에 표시되는 gets):
<div layout="column" flex layout-fill>
<div layout="row" flex layout-fill>
<md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;">
<div flex="100"><span id="site-name">Some sort of a title goes here...</span></div>
</md-whiteframe>
</div>
<div layout="row" flex layout-fill>
<md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia('gt-sm')">
<md-content layout-fill role="navigation">
<ul class="docs-menu">
<li ng-repeat="section in sections" class="parent-list-item">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
</li>
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle>
</li>
</ul>
</li>
</ul>
</md-content>
</md-sidenav>
<md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content">
<div flex layout-fill>
<h2>Home Content</h2>
<ul>
<li>Page Content goes here...</li>
<li>and here...</li>
<li>and here...</li>
</ul>
</div>
</md-content>
</div>
</div>
물론 Plucker를 보고 모든 것이 연결되어 있는지 확인하고 문제를 시각적으로 확인합니다.
어떤 도움이라도 주시면 감사하겠습니다!
PS. 방금 IE 11에서 이 플런커를 테스트했는데, 다른 디스플레이에 문제가 있습니다.하지만 그건 다음 날 또 다른 질문입니다.Chrome에서는 정상적으로 동작합니다.또한 600px 미만의 창에서는 메뉴가 자동으로 숨겨집니다.창을 표시하려면 플런커 디스플레이 창을 넓힙니다.
또한 Angular Material 요소만 사용하여 스타일을 추가하지 않고도 작업을 수행할 수 있습니다.
기본적으로 추가가 필요합니다.layout수직으로 채울 요소의 모든 부모에게 전달합니다.또, 너무 많은 것을 사용할 필요는 없습니다.layout-fills.
데모: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview
세로 방향으로도 채워지는 것을 보여주기 위해 사이드바에 배경색을 추가했습니다.
<div flex style="height: -webkit-calc(100% - 76px)">
<div ng-view flex layout-fill style="height: 100%">
</div>
</div>
그냥 다른 사람들이 쉽게 대답할 수 있도록 이 답이 대답에 들어가야 한다고 생각했어요.
간단한 예:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="MyApp" layout="column" ng-cloak>
<div flex layout="row" layout-align="center center" style="background: plum;">
<div>page filled and content centered</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("MyApp", ["ngMaterial"]);
</script>
</body>
</html>
출력:
언급URL : https://stackoverflow.com/questions/29655242/angular-material-layout-expand-to-fill-window
'programing' 카테고리의 다른 글
| angularjs의 다른 모듈에 정의된 공장 출하시 접근 (0) | 2023.03.03 |
|---|---|
| IE9 JSON 데이터 "이 파일을 열거나 저장하시겠습니까?" (0) | 2023.03.03 |
| 리액트 앱에서 CSS 모듈을 사용하여 글로벌 스타일을 적용하는 방법은 무엇입니까? (0) | 2023.03.03 |
| 어떻게 하면 php의 JSON 응답 내의 문자열 안에 큰따옴표를 넣을 수 있을까요? (0) | 2023.03.03 |
| CLOB와 NCLOB의 차이점은 무엇입니까? (0) | 2023.03.03 |