基于React的24栅格组件


Keywords
react, react-component, xy-grid
License
MIT
Install
npm install xy-grid@0.1.2

Documentation

IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-grid

xy-grid

这是antdgrid组件得直接拷贝, 内容应该放置在col内, 并且只有col可以作为row得直接元素

24 栅格布局, 基于行(row) 和 列(col)来排版.

安装

# yarn
yarn add xy-grid

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Row, Col } from "xy-grid";
ReactDOM.render(
    <Row>
        <Col span={12}>col-12</Col>
        <Col span={12}>col-12</Col>
    </Row>,
    container,
);

API

Row

属性 说明 类型 默认值
gutter 栅格间隔 number/Partial<Record<Breakpoint, number>>
type 布局模式 "flex"
justify flex 布局下的水平排列方式 "start"/"end"/"center"/"space-around"/"space-between"
align flex 布局下得垂直对齐方式 "top"/"middle"/"bottom"

Col

属性 说明 类型 默认值
span 栅格占位格数 number
pull 栅格向左移动格数 number
push 栅格向右移动格数 number
offset 栅格左侧的间隔格数,间隔内不可以有栅格 number
order flex 布局模式下得栅格顺序 number
xs <576px 响应式栅格 number/ColConfig
sm ≥576px 响应式栅格 number/ColConfig
md ≥768px 响应式栅格 number/ColConfig
lg ≥992px 响应式栅格 number/ColConfig
xl ≥1200px 响应式栅格 number/ColConfig
xxl ≥1600px 响应式栅格 number/ColConfig

ColConfig

/**
 * xs 小于 576px
 */
/**
 * sm 大于等于 576px
 */
/**
 * md 大于等于 768px
 */
/**
 * lg 大于等于 992px
 */
/**
 * xl 大于等于 1200px
 */
/**
 * xxl 大于等于 1600px
 */
export type Breakpoint = "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
export type BreakpointMap = Partial<Record<Breakpoint, string>>;

/**
 * 列布局配置
 */
export interface ColConfig {
    /**
     * 栅格占位格数
     * @description 为 0 时相当于 display: none
     */
    span?: number;
    /**
     * 栅格向左移动格数
     */
    pull?: number;
    /**
     * 栅格向右移动格数
     */
    push?: number;
    /**
     * 栅格左侧的间隔格数,间隔内不可以有栅格
     */
    offset?: number;
    /**
     * flex 布局模式下得栅格顺序
     */
    order?: number;
}

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-grid is released under the MIT license.