@aaronuu/react-layout 中文文档教程

Question

react-layout

用于 React 的 CSS 网格和 flexbox 辅助组件。 使用情感进行 css 注入。

Features

• Declarative layout - having layout properties on the component makes page layout easier to reason about while not sacrificing performance by inlining all styles
• Class construction is memoized based on props
• Aliased css properties - less typing required
• All properties (except position which is shortened to pos) are shortened to the first letter of each word of the property
• Some of the more common properties also have easier to remember aliases (e.g. rows for gridTemplateRows)
• You can either use the full prop name or any of it's aliases.
• Flexible breakpoints
• Given an integer as the key (or a string that can be parsed to an integer) the breakpoint will default as @media (max-width: <key>px)
• Anything else will simply use the key as the media query
• Inspired by react-native styling, flex-direction defaults to column

Getting Started

Installing

使用 yarn

yarn add @aaronuu/react-layout emotion

安装 使用 npm 安装 subgrid 属性

npm i @aaronuu/react-layout emotion

Usage

import { Box, Grid, GridItem } from '@aaronuu/react-layout';

const BREAKPOINT_MOBILE = '768';
const BREAKPOINT_TABLET = '@media(min-width: 768px and max-width: 1024px)';

class YourComponent extends Component {
  render() {
    return (
      <Grid
        rowGap="20px"
        columnGap="10px"
        rows="auto 1fr auto"
        columns="repeat(10, 100px)"
        breakpoints={{
          [BREAKPOINT_TABLET]: {
            rows: 'auto minmax(150px, 500px) auto'
          },
          [BREAKPOINT_MOBILE]: {
            rows: '1fr'
          }
        }}
      >
        <GridItem
          subgrid
          rows="100px 100px 100px"
          columns="auto"
          tag="span"
          area="1 / 1 / 4 / 3"
          breakpoints={{
            [BREAKPOINT_MOBILE]: {
              area: '1 / 1 / 2 / 3'
            }
          }}
        >
          <Box padding="10px">
            <h1>Heading</h1>
          </Box>
        </GridItem>
        <GridItem
          flex
          flexDirection="row"
          area="1 / 3 / 4 / 11"
          breakpoints={{
            [BREAKPOINT_MOBILE]: {
              area: '1 / 3 / 2 / 11'
            }
          }}
        >
          <Box ai="center" jc="center">
            <p>Content</p>
          </Box>
        </GridItem>
      </Grid>
    );
  }
}

Props

Shared

Prop	Alias
tag	-
position	pos
top	t
right	r
bottom	b
left	l
height	h
width	w
maxHeight	maxh
maxWidth	maxw
minHeight	minh
minWidth	minw
padding	p
paddingTop	pt
paddingRight	pr
paddingBottom	pb
paddingLeft	pl
margin	m
marginTop	mt
marginRight	mr
marginBottom	mb
marginLeft	ml
overflow	o

Box

Prop	Alias
flexDirection	fd, direction
flexWrap	fw, wrap
alignItems	ai
alignContent	ac
justifyContent	jc
flexGrow	fg
flexShrink	fs
flex	f
flexAuto	fa
flexNone	fn

Grid

Prop	Alias
gridGap	gg, gap
gridRowGap	grg, rowGap
gridColumnGap	gcg, columnGap
gridTemplateRows	gtr, rows
gridTemplateColumns	gtc, columns
justifyItems	ji
alignItems	ai
placeItems	pc
justifyContent	jc
alignContent	ac
placeContent	pc
gridAutoColumns	gac
gridAutoRows	gar
gridAutoFlow	gaf

GridItem

Prop	Alias
subgrid
flex
gridRowStart	grs, rowStart
gridRowEnd	gre, rowEnd
gridColumnStart	gcs, columnStart
gridColumnEnd	gce, columnEnd
gridRow	gr, row
gridColumn	gc, column
gridArea	ga, area
justifySelf	js
alignSelf	as
placeSelf	ps

将使 GridItem 也成为 Grid 并且 flex 属性将使它也成为 Box

Caveats

仅 React 16目前。

只公开了 flexbox 容器属性，所有 flexbox 子属性仍然必须直接添加到子元素中。

由于 CSS Grid 的工作方式，Grid 组件的所有子项在技术上都是“网格项”，因此您不仅限于使用 GridItem 组件来设置 Grid 子项的样式。

Refs 将使用 forwardRef API 转发到内部元素，因此 ref 将返回对底层 DOM 节点的引用，而不是组件的实例。

Authors

• Aaron Williams - aaronnuu

License

该项目根据 MIT 许可证获得许可 - 有关详细信息，请参阅 LICENSE.md 文件