角材料有网格系统吗? [英] 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屋！