iron-grid, 一种用于聚合物的反应式网格

分享于 

8分钟阅读

GitHub

  繁體 雙語
Materialize.css Grid System for Polymer
  • 源代码名称:iron-grid
  • 源代码网址:http://www.github.com/The5heepDev/iron-grid
  • iron-grid源代码文档
  • iron-grid源代码下载
  • Git URL:
    git://www.github.com/The5heepDev/iron-grid.git
    Git Clone代码到本地:
    git clone http://www.github.com/The5heepDev/iron-grid
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/The5heepDev/iron-grid
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    #Demo Plunker

    <iron-grid>
     <divclass="xs12 s9 m6 l3 xl3"></div>
     <divclass="xs12 s9 m6 l3 xl3"></div>
     <divclass="xs12 s9 m6 l3 xl3"></div>
     <divclass="xs12 s9 m6 l3 xl3"></div>
    </iron-grid>

    iron-container 不是iron的一部分,但在布局内容方面很重要。 它使你可以将页面内容居中。 iron-container 默认值设置为窗口宽度的~90%。 它帮助你居中并包含你的页面内容。 我们使用容器来包含我们的身体内容。

    样式

    以下自定义proporties可以用于样式设置:

    自定义属性说明默认值
    --iron-container-width容器的宽度90%
    --iron-grid-element-style允许覆盖网格样式元素null
    Iron

    iron-grid 可以帮助你按顺序,轻松的方式布局聚合物元素。 我们正在使用标准 12柱流体响应网格系统。 iron-grid 现在被设计为在每个要响应的元素中使用,而不仅仅是完整的页面。 因此,如果你希望每个元素都有不同的屏幕大小,你可以。 现在每个compoment都可以管理自己的响应能力。

    iron-grid 是使用flexboxes创建的。

    请注意 below的所有示例都在它们上面有'范例'类。 类 包含在组件中。 此类为每个网格列提供 1px 个白色边框,以便你可以看到分离。

    12列

    我们的标准网格有 12列。 无论浏览器的大小如何,这些列都将始终具有相同的宽度。

    1

    来了解网格在HTML中是如何使用的。 看一下这个代码 below,它将产生与上面相同的结果。

    <iron-grid>
     <divclass="s1">1</div>
     <divclass="s1">2</div>
     <divclass="s1">3</div>
     <divclass="s1">4</div>
     <divclass="s1">5</div>
     <divclass="s1">6</div>
     <divclass="s1">7</div>
     <divclass="s1">8</div>
     <divclass="s1">9</div>
     <divclass="s1">10</div>
     <divclass="s1">11</div>
     <divclass="s1">12</div>
    </iron-grid>

    偏移

    为了偏移,只需将 offset-s2 添加到 s 表示屏幕类前缀( s = 小,m = medium,l = 大) 和后面的数字是要偏移的列数的类。

    2

    <iron-grid>
     <divclass="s12">
     <span>This div is 12-columns wide on all screen sizes</span>
     </div>
     <divclass="s6 offset-s6">
     <span>6-columns (offset-by-6)</span>
     </div>
    </iron-grid>

    订单

    你可以在屏幕上更改外观元素的正常顺序。 要做到这一点,只需向 s 添加 order-s1,其中表示屏幕类前缀( s = 小,m = medium,l = 大),数字是外观顺序( 从 1到 12 )。 默认元素顺序为 6,因此页将按数字顺序加载( IE。 order-s1 order-s2 order-s3 等等 ),如果有元素相同的顺序号,那么如下所示,如下所示。

    3

    <iron-grid>
     <divclass="s1">1</div>
     <divclass="s1">2</div>//Without the order tag, the `div` will default to order-s6.
     <divclass="s1">3</div>
     <divclass="s1">4</div>
     <divclass="s1">5</div>
     <divclass="s1">6</div>
     <divclass="s1">7</div>
     <divclass="s1">8</div>
     <divclass="s1">9</div>
     <divclass="s1">10</div>
     <divclass="s1">11</div>
     <divclass="s1 order-s1">12</div>
    </iron-grid>

    隐藏元素

    你可以使用 s0m0 或者 l0 创建隐藏元素。

    <iron-grid>
     <divclass="s0 m12">
     <span>This div is hidden on small screen sizes and 12-columns wide on medium and large screen sizes.</span>
     </div>
    </iron-grid>

    创建响应式布局

    上面我们向你展示了如何使用网格系统来布局元素。 现在我们将向你展示如何设计布局,使它的在所有屏幕尺寸上都能。

    移动设备 <= 480px 移动设备 <= 960px 平板设备 <= 1280px 桌面设备 <= 1600px 桌面设备> 恶意 1600
    类前缀xxl
    的列数1212121212

    添加响应性

    在前面的示例中,我们只使用 s12 定义了小屏幕的大小。 如果我们想要一个固定的布局,这很好,因为规则propogate向上。 只要说 s12,我们基本上说的是 s12 m12 l12。 但是,通过明确定义我们的规模,我们的网站可以。

    4

    <iron-grid>
     <divclass="s12">
     <span>I am always full-width (s12)</span>
     </div>
     <divclass="s12 m6">
     <span>I am full-width on mobile (s12 m6)</span>
     </div>
    </iron-grid>

    自定义屏幕大小格式

    每个铁网格的使用都可以更改屏幕格式管理( x,s,m,l,xl )的默认屏幕大小。 因此,每个seprate组件都可以拥有它自己的断点。

    <iron-gridxs-max-width="400"s-max-width="600"m-max-width="900"l-max-width="1150"> 
     <divclass="s12">
     <span>I am always full-width (s12)</span>
     </div>
     <divclass="s12 m6">
     <span>I am full-width on mobile (s12 m6)</span>
     </div>
    </iron-grid>

    请注意,xl没有设置,因为它是 上面'l'最大宽度的。

    日志记录

    你可以在开发过程中记录一个铁网格添加 log 网格标签。

    <iron-gridlog> 
     <divclass="s12">
     <span>I am always full-width (s12)</span>
     </div>
     <divclass="s12 m6">
     <span>I am full-width on mobile (s12 m6)</span>
     </div>
    </iron-grid>

    打开你的开发控制台,你将在 zomm/dezoom期间看到:

    宽度:375 screenFormat = s

    一次只将日志记录在铁网格上是 recomended。 如果没有,你会受到干扰,因为每个铁网都可以管理它的屏幕格式。 由于元素具有自己的断点,因这里控制台可能会混乱并令多个日志混乱。


    SYS  系统  GRID  Polymer  IRON  网格系统  
    相关文章