ReactJS UI Ant Design布局组件介绍

Ant Design是一个ReactJS组件库，提供了许多UI组件，使Web开发更加高效和便捷。其中布局组件是Ant Design的核心组件之一，用于构建各种网站页面。

Ant Design布局组件列表

Ant Design提供了以下布局组件：

• Row
• Col
• Layout
• Grid
• Space

Row

<Row> 组件用于定义一行元素，内部可以包含多个 <Col> 组件。该组件支持水平和垂直方向的间隔。

接收以下props：

| Prop | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------------------------------ | ------------------ | ------ | | gutter | 栅格间隔 | number | object | - | | align | flex 布局下的垂直对齐方式，可选值为 top、middle、bottom | string | top | | justify | flex 布局下的水平排列方式，可选值为 start、end、center、space-around、space-between | string | start| | nowrap | 是否自动换行，当nowrap为true时，子元素不换行，超出部分不显示 | boolean | false | | wrapReverse | 是否翻转子元素的排列顺序（与nowrap结合使用） | boolean | false | | className | 样式类名 | string | - | | style（v2.9+）| 自定义样式 | CSSProperties | - | | children | 子元素 | ReactNode | - |

示例代码：

import { Row, Col } from 'antd';

<Row>
  <Col span={8}>col-8</Col>
  <Col span={8}>col-8</Col>
  <Col span={8}>col-8</Col>
</Row>

Col

<Col> 是 <Row> 的子组件，用于定义行内的列。支持设置栅格占位数、偏移量和响应式布局。

接收以下 props：

| Prop | 说明 | 类型 | 默认值 | | ---------- | ------------------------------------------ | --------------- | ------ | | order | 栅格排序权重 | number | 0 | | flex | 栅格是否自动拉伸 | string | number | 0 1 auto | | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | pull | 栅格向左移动格数 | number | 0 | | push | 栅格向右移动格数 | number | 0 | | span | 栅格占位格数 | number | - | | xs | <768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | sm | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | md | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | lg | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | xl | ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | xxl | ≥1920px 响应式栅格，可为栅格数或一个包含其他属性的对象 | number | object | - | | className | 样式类名 | string | - | | children | 子元素 | ReactNode | - |

示例代码：

import { Row, Col } from 'antd';

<Row>
  <Col span={8}>col-8</Col>
  <Col span={8} offset={8}>col-8</Col>
</Row>

Layout

<Layout> 组件是一种页面布局，常用于网站主体结构设计。包含三种子组件：

接收以下 props：

| Prop | 说明 | 类型 | 默认值 | | ---------- | ------------------- | --------------- | ------ | | style | 自定义样式 | CSSProperties | - | | className | 样式类名 | string | - | | hasSider | 后代中有Sider组件的标记 | boolean | false | | children | 子元素 | ReactNode | - |

示例代码：

import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

<Layout>
  <Header>Header</Header>
  <Layout>
    <Sider>Sider</Sider>
    <Content>Content</Content>
  </Layout>
  <Footer>Footer</Footer>
</Layout>

Grid

<Grid> 组件是一个响应式网格系统，以断点方式设置列宽、小于断点处的列数和偏移量。

接收以下 props：

| Prop | 说明 | 类型 | 默认值 | | --------- | -------- | --------------- | ------ | | style | 自定义样式 | CSSProperties | - | | className | 样式类名 | string | - | | children | 子元素 | ReactNode | - |

示例代码：

import { Grid } from 'antd';

const { useBreakpoint } = Grid;

const lg = useBreakpoint('lg');
const xl = useBreakpoint('xl');

const colSpan = xl ? 6 : lg ? 8 : 12;

<Grid>
  <Grid.Row>
    <Grid.Col span={24}>col</Grid.Col>
  </Grid.Row>
  <Grid.Row>
    <Grid.Col span={12}>col-12</Grid.Col>
    <Grid.Col span={12}>col-12</Grid.Col>
  </Grid.Row>
  <Grid.Row>
    <Grid.Col span={8}>col-8</Grid.Col>
    <Grid.Col span={8}>col-8</Grid.Col>
    <Grid.Col span={colSpan}>col-{colSpan}</Grid.Col>
  </Grid.Row>
</Grid>

Space

<Space> 组件是一个间距组件，用于在一堆元素之间添加一个带有间距的容器。

接收以下 props：

| Prop | 说明 | 类型 | 默认值 | | ---------- | ------------------------------------------------------------ | ------------------- | ------ | | size | 间距大小，可选值为 small、middle、large | string | middle | | direction | 排列方向，可选值为 horizontal、vertical | string | horizontal | | wrap | 是否自动换行，true 为自动换行，false 为不换行 | boolean | true | | align | 对齐方式，可选值为 start、end、center、baseline | string | start | | className | 样式类名 | string | - | | children | 子元素 | ReactNode[] | - |

示例代码：

import { Space } from 'antd';

<Space>
  <Button type="primary">Primary</Button>
  <Button type="primary" danger>
    Danger
  </Button>
  <Button type="primary">Primary</Button>
</Space>

结语

以上就是Ant Design的布局组件的详细介绍，可以根据业务需求和设计风格选择合适的组件。Ant Design还提供了许多其他组件，欢迎探索使用。