我正在尝试在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>
答案 0 :(得分:0)
我不使用材料设计,所以我为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>
也许这个答案对您会有所帮助。