Xy-grid NPM | npm.io


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

NPM version npm download

xy-grid

这是antd中grid组件得直接拷贝, 内容应该放置在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;
}