rgx, 基于最小和最大宽度的网格系统

分享于 

3分钟阅读

GitHub

  繁體 雙語
React grid system based on minimum and maximum widths
  • 源代码名称:rgx
  • 源代码网址:http://www.github.com/jxnblk/rgx
  • rgx源代码文档
  • rgx源代码下载
  • Git URL:
    git://www.github.com/jxnblk/rgx.git
    Git Clone代码到本地:
    git clone http://www.github.com/jxnblk/rgx
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jxnblk/rgx
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Rgx

    响应网格系统- 无CSS和无媒体查询的基于约束的响应网格。

    Build Status

    Rgx是一个基于最小和最大宽度的实验性的。响应式的网格系统,用于内容的布局。 Rgx的构建纯粹是在React和使用 inline 样式,没有CSS和媒体查询。 当网格宽足够适合所有单元格的最小宽度时,每个网格行都将它的子单元格设置为显示 inline block。 设置 inline 后,每个单元格的宽度都基于它的最小宽度和每行最小宽度之和。 单元格一旦到达它的max-width,剩余的空间将分布到行中的其他单元格。 由于这不是基于基于viewport的媒体查询,所以网格响应它的自身的宽度,类似于元素查询。

    正在启动

    npm i rgx
    importReactfrom'react'import { Grid, Cell } from'rgx'classDemoextendsReact.Component {
     render () {
     return (
     <Grid gutter={8}><Cell min={256} max={320}>Min 256 Max 320</Cell><Cell min={768}>Min 768</Cell></Grid> )
     }
    }React.render(<Demo />, document.querySelector('#demo'))

    网格组件

    道具
    • gutter - 在网格组件上设置负边距并在单元组件上设置 padding 以创建檐沟的像素值。
    • min - 为子单元格设置默认 min prop的像素值

    单元格组件

    道具
    • min - 设置单元格以内联方式显示的min-width的像素值。
    • max - 单元格不应展开的像素值。 剩余空间分布到其他单元格。
    • padding - 设置左和右 padding。 当设置 gutter 支持器并且单元格没有 padding 设置时,网格组件使用这里方法。
    • width - 网格组件用来设置宽度的分数值。 当独立于网格组件使用时,也可以手动设置
    • inline - 网格组件用来显示单元格的布尔值。

    性能

    我还没有做任何性能审核,因为网格组件监听窗口调整大小事件,这可以能有些性能问题。 区域的任何帮助都将得到极大的赞赏。

    MIT许可证


    BASE  SYS  系统  react  GRID  Minim  
    相关文章