npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiw/react-grid

v4.22.3

Published

Grid component

Downloads

1,075

Readme

Grid 栅格

Buy me a coffee Open in unpkg NPM Downloads npm version

基于 flex 栅格系统。

import { Row, Col } from 'uiw';
// or
import { Row, Col } from '@uiw/react-grid';

基础用法

import React from 'react';
import { Row, Col } from 'uiw';

const Box = ({ num, height, width, style, background }) => <div style={{ ...style, textAlign: 'center', paddingTop: 5, paddingBottom: 5, background, width, height}}>Col {num}</div>

export default function Demo() {
  return (
    <Row>
      <Col fixed style={{ width: 150 }}> <Box num="1" background="#A5A5A5" /> </Col>
      <Col grow={2}> <Box num="2" background="#dedede" /> </Col>
      <Col grow={1}> <Box num="3" background="#A5A5A5" /> </Col>
    </Row>
  );
}

Gutter

栅格间隔,可以写成像素值

import React from 'react';
import { Row, Col } from 'uiw';

const Blank = ({ num, height, width, style, background }) => <div style={{ ...style, textAlign: 'center', paddingTop: 5,paddingBottom: 5, background, width, height}}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10}>
        <Col> <Blank background="#A5A5A5" num={1}/> </Col>
        <Col> <Blank background="#dedede" num={2}/> </Col>
        <Col> <Blank background="#A5A5A5" num={3}/> </Col>
      </Row>
      <Row style={{ marginTop: 10 }}>
        <Col> <Blank background="#A5A5A5" num={1}/> </Col>
        <Col> <Blank background="#dedede" num={2}/> </Col>
        <Col> <Blank background="#A5A5A5" num={3}/> </Col>
      </Row>
    </div>
  );
}

Flex 行设置列对齐

import React from 'react';
import { Row, Col } from 'uiw';

const colStyl = { backgroundColor: 'rgba(230, 230, 230, 0.67)', marginBottom: 10 }
const Blank = ({ num, height, style, background = '#2EA3F4' }) => <div style={{ ...style, textAlign: 'center', color: '#fff', paddingTop: 5, paddingBottom: 5, background, height}}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10} justify="center" align="top" style={colStyl}>
        <Col span="2"> <Blank height={35} num={1}/> </Col>
        <Col span="2"> <Blank height={50} num={2}/> </Col>
        <Col span="2"> <Blank height={70} num={3}/> </Col>
      </Row>
      <Row gutter={10} justify="space-around" align="middle"  style={colStyl}>
        <Col span="2"> <Blank height={35} num={1}/> </Col>
        <Col span="2"> <Blank height={50} num={2}/> </Col>
        <Col span="2"> <Blank height={70} num={3}/> </Col>
      </Row>
      <Row gutter={10} justify="space-between" align="bottom" style={colStyl}>
        <Col span="2"> <Blank height={35} num={1}/> </Col>
        <Col span="2"> <Blank height={50} num={2}/> </Col>
        <Col span="2"> <Blank height={70} num={3}/> </Col>
      </Row>
      <Row gutter={10} justify="flex-end" align="bottom" style={colStyl}>
        <Col span="2"> <Blank height={35} num={1}/> </Col>
        <Col span="2"> <Blank height={50} num={2}/> </Col>
        <Col span="2"> <Blank height={70} num={3}/> </Col>
      </Row>
      <Row gutter={10} justify="center" align="baseline"  style={{ ...colStyl, marginBottom: 0 }}>
        <Col span="2"> <Blank height={85} style={{ lineHeight: '85px' }} num={1}/> </Col>
        <Col span="2"> <Blank height={50} num={2}/> </Col>
        <Col span="2"> <Blank height={70} num={3}/> </Col>
      </Row>
    </div>
  );
}

Flex 列对齐

import React from 'react';
import { Row, Col } from 'uiw';

const Blank = ({ num, style, background = '#2EA3F4' }) => <div style={{ ...style, textAlign: 'center', color: '#fff', paddingTop: 5, paddingBottom: 5, background }}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10} style={{height: 130}}>
        <Col align="top"> <Blank num={1}/> </Col>
        <Col align="middle"> <Blank num={2}/> </Col>
        <Col align="bottom"> <Blank num={3}/> </Col>
      </Row>
    </div>
  );
}

对齐内容

import React from 'react';
import { Row, Col } from 'uiw';

const rowStyl = { backgroundColor: 'rgba(230, 230, 230, 0.67)', marginBottom: 10 }
const Blank = ({ num, height, width, style, background = '#2EA3F4' }) => <div style={{ ...style, textAlign: 'center', color: '#fff', paddingTop: 5, paddingBottom: 5, background, width, height}}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10} justify="flex-start" style={rowStyl}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} justify="center" style={rowStyl}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} justify="flex-end" style={rowStyl}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} justify="space-between" style={rowStyl}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} justify="space-around" style={rowStyl}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} justify="space-evenly" style={{...rowStyl, marginBottom: 0 }}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
      </Row>
    </div>
  );
}

24栅格

可以通过指定 24 列中每列的宽度来创建基本网格系统。

import React from 'react';
import { Row, Col } from 'uiw';

const Blank = ({ num, height, width, style, background = '#2EA3F4' }) => <div style={{ ...style, textAlign: 'center', color: '#fff', paddingTop: 5, paddingBottom: 5, background, width, height}}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col span="2"> <Blank num={1}/> </Col>
        <Col span="2"> <Blank num={2}/> </Col>
        <Col span="2"> <Blank num={3}/> </Col>
        <Col span="2"> <Blank num={4}/> </Col>
        <Col span="2"> <Blank num={5}/> </Col>
        <Col span="2"> <Blank num={6}/> </Col>
        <Col span="2"> <Blank num={7}/> </Col>
        <Col span="2"> <Blank num={8}/> </Col>
        <Col span="2"> <Blank num={9}/> </Col>
        <Col span="2"> <Blank num={10}/> </Col>
        <Col span="2"> <Blank num={11}/> </Col>
        <Col span="2"> <Blank num={12}/> </Col>
      </Row>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col span="16"> <Blank num={1}/> </Col>
        <Col span="8"> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col span="8"> <Blank num={1}/> </Col>
        <Col span="8"> <Blank num={2}/> </Col>
        <Col span="8"> <Blank num={3}/> </Col>
      </Row>
      <Row gutter={10}>
        <Col span="12"> <Blank num={1}/> </Col>
        <Col span="12"> <Blank num={2}/> </Col>
      </Row>
    </div>
  );
}

动态列增长

import React from 'react';
import { Row, Col } from 'uiw';

const Blank = ({ num, style, background = '#2EA3F4' }) => <div style={{ ...style, textAlign: 'center', color: '#fff', paddingTop: 5, paddingBottom: 5, background }}>Col {num}</div>

export default function Demo() {
  return (
    <div>
      <Row gutter={10} style={{ marginBottom: 10 }}>
        <Col> <Blank num={1}/> </Col>
        <Col grow={2}> <Blank num={2}/> </Col>
      </Row>
      <Row gutter={10}>
        <Col> <Blank num={1}/> </Col>
        <Col grow={2}> <Blank num={2}/> </Col>
        <Col grow={5}> <Blank num={3}/> </Col>
      </Row>
    </div>
  );
}

Row

| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | gutter | 栅格间隔间距 | number | - | | justify | flex 布局下的水平排列方式 | Enum{flex-start, flex-end, center, space-between, space-around, space-evenly} | - | | align | flex 布局下的垂直对齐方式 | Enum{top, middle, bottom, baseline} | - |

Col

| 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | | fixed | 如果为 true,则列宽固定为其内容的宽度 | boolean | - | | grow | 列的宽度相对于同一网格中其他列的比率 | number | - | | align | 网格中列的对齐方式 | Enum{top, middle, bottom, baseline} | - |