ReactJS UI Ant Design 排版组件

什么是ReactJS UI Ant Design

ReactJS UI Ant Design是一个React的UI库，它提供了丰富的组件库，包括常见的布局排版组件、数据展示组件、交互组件等。Ant Design具有易用性和美观性，是Web开发中广泛应用的UI库之一。

布局排版组件

Ant Design提供了众多的布局排版组件，方便开发人员快速布局。下面列举几个常用的布局排版组件：

Grid

Grid布局是Ant Design中最常用的布局排版组件，它类似于Bootstrap中的栅格布局。使用Grid可以方便地实现响应式布局。

import { Grid } from 'antd';

const { Row, Col } = Grid;

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

Layout

Layout布局可以实现整体页面的布局（顶部、底部、侧边栏等）。常用的Layout组件包括Header、Content、Footer、Sider。

import { Layout } from 'antd';

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

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

数据展示组件

Ant Design提供了多种数据展示组件，方便开发人员快速的展示各种数据。下面列举几个常用的数据展示组件：

Table

Table组件可以实现数据的展示、排序和筛选等功能。

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street'
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street'
  }
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address'
  }
];

<Table dataSource={dataSource} columns={columns} />;

List

List组件可以实现各种列表展示，包括卡片列表、垂直列表、水平列表等。

import { List, Avatar } from 'antd';

const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'https://ant.design',
    title: `ant design part ${i}`,
    avatar:
      'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
  });
}

const IconText = ({ icon, text }) => (
  <span>
    {React.createElement(icon, { style: { marginRight: 8 } })}
    {text}
  </span>
);

<List
  itemLayout="vertical"
  size="large"
  dataSource={listData}
  renderItem={item => (
    <List.Item
      key={item.title}
      actions={[
        <IconText
          icon={StarOutlined}
          text="156"
          key="list-vertical-star-o"
        />,
        <IconText
          icon={LikeOutlined}
          text="156"
          key="list-vertical-like-o"
        />,
        <IconText
          icon={MessageOutlined}
          text="2"
          key="list-vertical-message"
        />
      ]}
      extra={
        <img
          width={272}
          alt="logo"
          src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
        />
      }
    >
      <List.Item.Meta
        avatar={<Avatar src={item.avatar} />}
        title={<a href={item.href}>{item.title}</a>}
        description={item.description}
      />
      {item.content}
    </List.Item>
  )}
/>

交互组件

Ant Design提供了多种交互组件，包括对话框、表单、弹出框等。下面列举几个常用的交互组件：

Modal

Modal组件可以实现弹出框的功能。它支持多种交互方式，包括点击和按ESC键等。

import { Modal, Button } from 'antd';
import { useState } from 'react';

const App = () => {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    console.log('Clicked OK');
    setVisible(false);
  };

  const handleCancel = () => {
    console.log('Clicked Cancel');
    setVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

Form

Form组件可以实现表单的功能，它提供了多种表单控件，包括输入框、下拉框、日期选择器等。

import { Form, Input, Button } from 'antd';
import { useState } from 'react';

const App = () => {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState({});

  const onFinish = values => {
    console.log('Success:', values);
    setFormData(values);
  };

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

结语

Ant Design提供了丰富的UI组件，方便Web开发人员快速开发应用。这些组件不仅易用，还拥有美观的外观，让开发人员更加专注于业务逻辑的开发。如果您正在开发Web应用，Ant Design将是一个不错的选择。