react-happy-grid v1.1.3

react-happy-grid

A React component easy for grid layout.
一个易于网格布局（格栅）的 React 组件。

Playground
已经编译为 ES2015，会自动加载 polyfill，可在旧浏览器（如 IE11）使用。

特性

• 基于现代浏览器的 CSS Grid 构建，结合“固定格数的格栅系统”（如 BootStrap）的优点，提供更加简单友好的接口；
• 可根据子级的坐标自动扩展网格；
• 自动降级渲染，在不支持 CSS Grid 的浏览器上用“绝对定位布局”提供相同地表现；
• 支持 React 16.8+（推荐 17+），惰性更新，高性能，充分单测；
• 内置边框、坐标等辅助组件，可方便调试。

与 CSS Grid 的差异

• 使用用“块”代替“线”对行列定义，更加直观；
• 格子全等分，类似于“固定格数的格栅系统”，易于使用；
• 不需要配置 grid-template，也能自动扩展；
• 相比 grid-area，坐标只支持大于0的值；
• 如设置了行或列，超出格子的内容将不会渲染。

安装

npm install react-happy-grid --save

使用

import { GridContainer, GridItem } from 'react-happy-grid'

const gridContainerStyle = { width: `100%`, height: `100%`, background: '#fff' }

function App() {
  return (
    <GridContainer style={gridContainerStyle}>
      <GridItem start="r1c1">
        <div>1</div>
      </GridItem>
      <GridItem start={[5, 1]} end="r5c5">
        <div>2</div>
      </GridItem>
      <GridItem start={[8, 1]} span={[5, 2]}>
        <div>3</div>
      </GridItem>
    </GridContainer>
  )
}

export default App

API

通用

GridContainer

顶级容器组件，后续的组件都必须被该组件包裹，默认 block，建议设置宽高。
不设置 row，则会根据子级最大横向坐标设置行数。
不设置 col，则会根据子级最大纵向坐标设置列数。

GridItem

子级容器组件，既格子，用于定位包裹内容。
支持两种定位方式，end（结束点） 或 span（跨格数），二选一，同时设置时，以 end 为优先。

start 和 end 坐标支持多种格式：

[
  // 表示1行1列
  <GridItem start="r1c1">
    <div>1</div>
  </GridItem>,
  // 表示2行2列
  <GridItem start={[2, 2]}>
    <div>2</div>
  </GridItem>,
  // 表示3行3列
  <GridItem start={[3]}>
    <div>3</div>
  </GridItem>,
  // 表示4行4列
  <GridItem start={4}>
    <div>4</div>
  </GridItem>,
  // 表示从5行5列开始到6行6列
  <GridItem start={5} end={6}>
    <div>5</div>
  </GridItem>,
]

span 支持多种格式：

[
  // 表示从1行1列开始纵向跨2行横向跨2列
  <GridItem start="r1c1" span={2}>
    <div>1</div>
  </GridItem>,
  // 表示从1行1列开始纵向跨2行横向跨3列
  <GridItem start="r1c1" span={[2, 3]}>
    <div>2</div>
  </GridItem>,
  // 表示从1行1列开始纵向跨2行横向跨1列
  <GridItem start="r1c1" span={[2]}>
    <div>2</div>
  </GridItem>,
]

GridDivider

分割线，不支持 children。

GridAxios

辅助坐标轴，会在最外侧显示x轴和y轴坐标，刻度即为格子数。不支持通用属性。

GridBorder

边框，可给整个网格添加边框。不支持通用属性。
本质是调用了 GridColBorder 与 GridRowBorder，透传参数给他们。

GridColBorder

列边框。不支持通用属性。
参数同GridBorder。

GridRowBorder

行边框，不支持通用属性。
参数同GridBorder。