如何在角度材料设计中包含网格布局？答案

【问题标题】：How to include the grid layout in angular material design?如何在角度材料设计中包含网格布局？
【发布时间】：2018-07-16 21:35:15
【问题描述】：

我正在尝试在 Angular Material 中进行网格布局。我遵循了他们的文档，并且我的一些 CSS 工作正常，例如 button 和 input，但网格没有呈现任何 CSS。它只是呈现简单的 HTML。

我关注的来源：

https://material.angularjs.org/latest/layout/options

CSS：

<!-- STYLES -->
    <!-- build:css lib/css/main.min.css -->
    <!-- <link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.css"> -->
    <link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="components/angular-material/angular-material.css"> 
    <link rel="stylesheet" type="text/css" href="components/angular-material/modules/css/angular-material-layouts.css"> 
    <!-- endbuild -->

module.js

var app = angular.module('PdbTool', ["ng","ngAnimate","ngAria",'ngMdIcons','ngMaterial', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config'])
  .config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

脚本

<!-- SCRIPTS -->
    <!-- build:js lib/js/main.min.js -->
    <script type="text/javascript" src="components/angular/angular.js"></script>
    <script type="text/javascript" src="components/angular-animate/angular-animate.js"></script>
    <script type="text/javascript" src="components/angular-aria/angular-aria.js"></script>
    <script type="text/javascript" src="components/angular-material/angular-material.js"></script>
    <script type="text/javascript" src="components/satellizer/satellizer.js"></script>
    <script type="text/javascript" src="components/angular-route/angular-route.js"></script>
    <script type="text/javascript" src="components/angular-resource/angular-resource.js"></script>
    <!-- // <script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.js"></script> -->
    <script type="text/javascript" src="components/angular-cookies/angular-cookies.js"></script>
    <script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- // <script type="text/javascript" src="components/jquery/dist/jquery.min.js"></script> -->
    <!-- endbuild -->
    <!-- Custom Scripts -->
    <script type="text/javascript" src="js/dashboard.min.js"></script>
    <script type="text/javascript" src="js/configFileLocal.js"></script>
    <!-- script type="text/javascript" src="js/configFileProd.js"></script-->
    <script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>

html代码：

<div ng-controller="AppCtrl">
  <div layout="row" layout-sm="column"> 
    <div flex>
      I'm above on mobile, and to the left on larger devices.
    </div>
    <div flex>
      I'm below on mobile, and to the right on larger devices.
    </div>
  </div>
    <md-input-container>
      <label>Search</label>
        <input ng-model="search">
    </md-input-container>
</div>

【问题讨论】：

我在这里看不出有什么问题，做了一个简单的代码笔，它似乎工作正常。两个 flex div 并排，直到您缩小窗口，然后它们堆叠：codepen.io/anon/pen/meXwzx
它如何获得所有这些东西的填充和高度，我们是否必须自定义一切，我已经在引导程序中工作，并且通过包含行和列的类包含事情变得容易，现在了解如何包含医学博士
如果我需要在页面中心包含这个搜索框，并在深蓝色主题的顶部固定一个标题栏：比如说谷歌搜索页面。

搜索

我应该如何处理

标签： javascript html angularjs material-design angular-material

【解决方案1】：

我不使用材料设计，所以我为 css 网格布局编写了自己的指令。像这样；

@Directive({
  selector: "[v-grid]"
})
export class GridDirective {
  @HostBinding("style.grid-template-columns")
  @Input() columns: string;
  @HostBinding("style.grid-template-rows")
  @Input() rows: string;
  @HostBinding("style.grid-template-areas")
  @Input() areas: string;

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, "display", "grid");
  }
}

@Directive({
  selector: "[v-grid-area]"
})
export class GridAreaDirective {
  @HostBinding("style.grid-area")
  @Input("v-grid-area") area: string;
}

我是这样用的；

<div v-grid columns="1fr 100px" rows="1fr 1fr" areas="'area1 area2' 'area1 area2'">
   <div v-grid-area="area1" style="background-color: red">
      <div style="height: 1000px"></div>
   </div>
   <div v-grid-area="area2" style="background-color: yellow"></div>
</div>

也许这个答案会对你有所帮助。

【讨论】：