Row

基于 Flexbox 的12栅格系统

Import: import { Row } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

基础用法

布局的栅格化系统，是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={4}>
          <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row>
7
      <Col span={4}>
8
          <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

设置栅格间距

Gutter 用于设置栅格间距，使用数组形式同时设置[水平间距，垂直间距]

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[50, 20]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row gutter={[50, 20]}>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

多行

多行排列，栅格系统默认当栅格数是十二，当没有自定义栅格数且一行当栅格超过了十二，那么剩余当栅格将会换行排列。

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row gutter={[20, 50]}>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row gutter={[20, 50]}>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
      <Col span={4}>
17
        <PlaceHolder>col-4</PlaceHolder>
18
      </Col>
19
    </Row>
20
  )
21
}
22

Grow自适应

栅格自适应宽度，在一行中，栅格数超过 12 时，剩余栅格占满一行。

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row grow>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
      <Col span={4}>
        <PlaceHolder>col-4</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row grow>
7
      <Col span={4}>
8
        <PlaceHolder>col-4</PlaceHolder>
9
      </Col>
10
      <Col span={4}>
11
        <PlaceHolder>col-4</PlaceHolder>
12
      </Col>
13
      <Col span={4}>
14
        <PlaceHolder>col-4</PlaceHolder>
15
      </Col>
16
      <Col span={4}>
17
        <PlaceHolder>col-4</PlaceHolder>
18
      </Col>
19
    </Row>
20
  )
21
}
22

Offset偏移

通过给 col 组件设置 offset，可以控制栅格偏移的距离。

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
      <Col span={3} offset={3}>
        <PlaceHolder>col-3</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row>
7
      <Col span={3}>
8
        <PlaceHolder>col-3</PlaceHolder>
9
      </Col>
10
      <Col span={3}>
11
        <PlaceHolder>col-3</PlaceHolder>
12
      </Col>
13
      <Col span={3} offset={3}>
14
        <PlaceHolder>col-3</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

Column大小

默认是十二栅格，通过给 Row 组件设置 columns，可以自定义栅格数。

() => {
  const PlaceHolder = ({ children }) => (
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
  );
  return (
    <Row columns={24}>
      <Col span={12}>
        <PlaceHolder>col-12</PlaceHolder>
      </Col>
      <Col span={6}>
         <PlaceHolder>col-6</PlaceHolder>
      </Col>
      <Col span={6}>
        <PlaceHolder>col-6</PlaceHolder>
      </Col>
    </Row>
  )
}

1
() => {
2
  const PlaceHolder = ({ children }) => (
3
    <div style={{ height: '50px', textAlign: 'center', background: 'papayawhip' }}>{children}</div>
4
  );
5
  return (
6
    <Row columns={24}>
7
      <Col span={12}>
8
        <PlaceHolder>col-12</PlaceHolder>
9
      </Col>
10
      <Col span={6}>
11
         <PlaceHolder>col-6</PlaceHolder>
12
      </Col>
13
      <Col span={6}>
14
        <PlaceHolder>col-6</PlaceHolder>
15
      </Col>
16
    </Row>
17
  )
18
}
19

布局

常规

信息录入

数据展示

反馈

Row

基础用法

设置栅格间距

多行

Grow自适应

Offset偏移

Column大小