Angular 材料设计布局自定义尺寸答案

【问题标题】：Angular Material Design Layout custom sizesAngular 材料设计布局自定义尺寸
【发布时间】：2015-09-15 17:12:35
【问题描述】：

如何为不同尺寸的屏幕添加自定义的 flex 属性？参考这里的规范：https://material.angularjs.org/latest/#/layout/options

例如flex属性 flex-gt-lg 在宽度大于 1200 像素的设备上设置 flex。我想再添加一个属性，比如flex-gt-lgx，它在大于 1600px 宽的设备上设置 flex，而 angular material 不提供支持。怎么会做这样的事情？

【问题讨论】：

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

【解决方案1】：

代码人，

您将不得不以某种方式更改 CSS。

复杂的方式

转到他们的 css 资源并根据您的需要进行更改

更简单的方法

创建您自己的 CSS 更改，用 !important 覆盖他们的更改

@media screen and (min-width:1200px) {     
.yourclass { 
      width:100% !important; 
      background:#ccc !important; 
      float:none !important;     }  
}

干杯！

【讨论】：

感谢 bobleujr！我开始创建自己的 css 编写媒体查询来选择 span 标签的 flex-gt-lgx 属性并使用 css flex 属性。

【解决方案2】：

我写了一个媒体查询如下：

@media only screen and (min-width: 1601px) {
    [flex-gt-lgx="25"] {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}

并使用了以下span标签

<span flex-md="10" flex-sm="5" flex-lg="15" flex-gt-lg="20" flex-gt-lgx="25" ></span>

它按预期工作！

注意：这样做的缺点是flex-gt-lgx 应始终设置为25 值。

【讨论】：

【解决方案3】：

基于带有媒体查询的@codeMan answer ...

@media only screen and (min-width: 1601px) {
    [flex-gt-lgx="25"] {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}

自定义 Angular 指令

您可以为flex-gt-lgx 编写一个自定义指令，该指令将生成要在style 属性中应用的CSS，并从指令参数传递所需的弹性值。

这样您就不会受限于硬编码的 CSS 值。

模仿 Angular 材质 CSS

您可以制作与 Angular Material 相同的东西，并为可能的 flex 值创建 all CSS，如其文档中所述，而不是像任何其他标签一样在所需的 HTML 标记上使用 flex-gt-lgx 属性flex 指令。

目前，flex 指令的值被限制为 5、33 或 66 的倍数。

例如：flex="5", flex="20", flex="33", flex="50", flex="66", flex="75", ... flex="100" .

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

【讨论】：