角材料有网格系统吗? [英] does angular material have a grid system?
问题描述
我正在开始一个使用角材料的项目.它是否有像引导程序那样在响应式网格中定位元素的本机系统?
否则可以将材料设计与网格系统的引导程序结合起来吗?
也许我对这个问题采取了错误的方法.
如果你使用的是 Material2,你可以使用 Angular Flex Layout 用于响应.它与 Angular2 相得益彰,而且重量轻.
基本上 Material2 + Flex-layout 相当于 Bootsrap 库.
这是一个 示例,说明如何将 flex-layout 用于网格系统/响应性使用 Angular/Material2.
显示使用 flex-layout API 的示例代码:
<div fxShow.xs="true" fxShow="false" >屏幕尺寸<h1>XS</h1></div><div fxShow.sm="true" fxShow="false" >屏幕尺寸 <h1>SM</h1></div><div fxShow.md="true" fxShow="false" >屏幕尺寸<h1>MD</h1></div><div fxShow.lg="true" fxShow="false" >屏幕尺寸 <h1>LG</h1></div><div fxShow.xl="true" fxShow="false" >屏幕尺寸 <h1>XL</h1></div><div fxLayout="row"fxLayout.xs="列"fxLayoutGap="10px"fxLayoutAlign.xs="中心居中"fxLayoutWrap><div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div><div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div><div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div><div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div><div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div><div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div><div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div><div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ?
Otherwise is it ok practice to combine material design with bootstrap for the grid system ?
Maybe I am taking the wrong aproach to the problem.
If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight.
Basically Material2 + Flex-layout is equivalent to Bootsrap library.
Here's an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2.
Sample Code showing use of flex-layout API:
<div fxShow.xs="true" fxShow="false" >Screen size <h1>XS</h1></div>
<div fxShow.sm="true" fxShow="false" >Screen size <h1>SM</h1></div>
<div fxShow.md="true" fxShow="false" >Screen size <h1>MD</h1></div>
<div fxShow.lg="true" fxShow="false" >Screen size <h1>LG</h1></div>
<div fxShow.xl="true" fxShow="false" >Screen size <h1>XL</h1></div>
<div fxLayout="row"
fxLayout.xs="column"
fxLayoutGap="10px"
fxLayoutAlign.xs="center center"
fxLayoutWrap>
<div class="sample-div" fxFlexOrder.lt-md="7">Div 1</div>
<div class="sample-div" fxFlexOrder.lt-md="6">Div 2</div>
<div class="sample-div" fxFlexOrder.lt-md="5">Div 3</div>
<div class="sample-div" fxFlexOrder.lt-md="4">Div 4</div>
<div class="sample-div" fxFlexOrder.lt-md="3">Div 5</div>
<div class="sample-div" fxFlexOrder.lt-md="2">Div 6</div>
<div class="sample-div" fxFlexOrder.lt-md="1">Div 7</div>
<div class="sample-div" fxFlexOrder.lt-md="0">Div 8</div>
</div>
这篇关于角材料有网格系统吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!