Question

如何为不同尺寸的屏幕添加自定义弹性属性？请参阅此处的规范：https://material.angularjs.org/latest/#/layout/options

例如，flex属性 flex-gt-lg在大于1200px宽的设备上设置flex。我想添加一个属性，例如flex-gt-lgx，它在大于1600px宽的设备上设置flex，对于这些设备，角度材料不提供支持。怎么会做这样的事情？

Answer 1

codeMan，

您必须以某种方式更改CSS。

复杂的方式

转到他们的css资源，改变它以满足您的需求

更轻松

创建自己的CSS更改，用!important

覆盖他们的CSS更改

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

干杯！

Answer 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值。

Answer 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%;
    }
}

自定义角度指令

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

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

模仿Angular Material CSS

你可以和Angular Material做同样的事情，并为他们的文档中所述的可能的flex值创建 all CSS，而不是在所需的HTML标签上使用flex-gt-lgx属性就像任何其他flex指令。

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

例如：flex =＆＃34; 5＆＃34;，flex =＆＃34; 20＆＃34;，flex =＆＃34; 33＆＃34;，flex =＆＃34; 50＆＃34;， flex =＆＃34; 66＆＃34;，flex =＆＃34; 75＆＃34;，... flex =＆＃34; 100＆＃34;。

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

角度材料设计布局自定义尺寸

3 个答案:

自定义角度指令

模仿Angular Material CSS