grid-matrix

matrix

自动化布局方案

安装

yarn add grid-matrix  或 npm install grid-matrix

使用

import React from 'react'
import Matrix from 'grid-matrix'
 
const Item = props => {
  const { src } = props
  return (
    <div>{src.aa}</div>
  )
}
 
const dataSources = [{aa:1}, {aa:2},{aa:1}, {aa:2},{aa:1}, {aa:2}]
 
export default class Demo extends React.Component {
  render() {
    return (
      <Matrix dataSources={dataSources}>
        <Item />
      </Matrix>
    )
  }
}

一行个数自由配置

<Matrix dataSources={dataSources} length={6}>
  <Item />
</Matrix>

增加了gutter可以自由改变间距

<Matrix dataSources={dataSources} gutter={20}>
  <Item />
</Matrix>

api

dataSources: 用于渲染的源数据，默认为空数组[]
length: 一行的长度，默认是4
Item会接受src作为props,src为dataSources的每一个数据 gutter 数字 可以设置间距 className 类名