ReactJS UI Ant Design 行列组件

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。行组件 提供了一种在网格系统中表示行的方式，用于以行的形式显示数据。列组件 提供了一种在网格系统中表示Col的方式，用于以列的形式显示数据。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Row 和 Col 组件。

行道具：

• align：用于垂直对齐内容。
• gutter：用于表示网格之间的间距。
• justify：用于内容的水平排列。
• wrap：用于自动换行。

上校道具：

• flex：用于表示flex布局样式。
• offset：用于表示从左侧偏移Col的单元格数。
• order：用于栅格化顺序。
• pull：用于表示栅格向左移动的像元个数。
• push：用于表示栅格向右移动的像元个数。
• span：用于栅格化要占用的像元个数。
• xs：用于表示在分辨率 < 576 像素的超小型设备上跨越的列数。
• sm：用于表示分辨率≥576像素的小型设备上跨越的列数。
• md：用于表示在分辨率≥ 768像素的中型设备上跨越的列数。
• lg：用于表示在分辨率≥ 992 像素的大型设备上跨越的列数。
• xl：用于表示分辨率≥1200像素的超大设备上跨越的列数。
• xxl：用于表示分辨率≥1600像素的超大设备上跨越的列数。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

• 第 3 步：创建 ReactJS 应用程序后，安装 必需的 模块使用以下命令：

  npm install antd

项目结构：它将如下所示。

项目结构

行组件示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Row } from 'antd';
  
export default function App() {
  
  return (
    

      
ReactJS Ant-Design Row Component
      
      
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

列组件示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

应用程序.js

import React from 'react'
import "antd/dist/antd.css";
import { Row, Col } from 'antd';
  
export default function App() {
  
  return (
    

      
ReactJS Ant-Design Column Component
      
        
          1st Column
        
        
          2nd Column
        
        
          3rd Column
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考：

• https://ant.design/components/grid/#Row
• https://ant.design/components/grid/#Col