前端封装库/工具库的组件库之antd-阿里云开发者社区

前端封装库/工具库的组件库之antd

2023-06-11 589

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在现代前端开发中，UI 组件库是一个非常重要的组成部分。其中，Ant Design 是一个备受欢迎的 React UI 组件库。

Ant Design 提供了丰富的样式和组件，可以让你更快速地构建响应式、移动友好的网站和应用程序。它支持所有主流浏览器，并提供了易于使用的模板和工具，以帮助你开始构建项目。

下面我们来看一下如何使用 Ant Design 构建一个简单的页面：

第一步：安装 Ant Design

首先，在项目中安装 Ant Design 库：

npm install antd --save

第二步：引入样式

在 App.js 文件中引入 Ant Design 样式：

import 'antd/dist/antd.css';

第三步：创建容器

在 React 中创建一个容器，作为页面的主体：

import React from 'react';
import { Button } from 'antd';
function App() {
  return (
    <div>
      <Button type="primary">Click Me</Button>
    </div>
  );
}
export default App;

在这个例子中，我们使用 Ant Design 的按钮组件创建了一个按钮。

第四步：添加组件

使用 Ant Design 的各种组件来增强页面的功能和外观。例如，可以添加导航栏、表格、对话框等。

import React, { useState } from 'react';
import { Layout, Menu, Table, Modal, Form, Input, Button } from 'antd';
const { Header, Content, Footer } = Layout;
function App() {
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const tableData = [
    { key: '1', name: 'John Doe', age: 32, address: 'New York No. 1 Lake Park' },
    { key: '2', name: 'Jane Smith', age: 28, address: 'London No. 1 Lake Park' },
    { key: '3', name: 'Jim Green', age: 36, address: 'Sidney No. 1 Lake Park' },
  ];
  const handleOk = () => {
    form.submit();
    setModalVisible(false);
  };
  const handleCancel = () => {
    form.resetFields();
    setModalVisible(false);
  };
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
  ];
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item key="1">Home</Menu.Item>
          <Menu.Item key="2">About</Menu.Item>
          <Menu.Item key="3">Contact</Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <div className="site-layout-content">
          <Button type="primary" onClick={() => setModalVisible(true)}>Add Row</Button>
          <Table dataSource={tableData} columns={columns} />
          <Modal
            title="Add Row"
            visible={modalVisible}
            onOk={handleOk}
            onCancel={handleCancel}>
            <Form form={form}>
              <Form.Item label="Name" name="name">
                <Input />
              </Form.Item>
              <Form.Item label="Age" name="age">
                <Input />
              </Form.Item>
              <Form.Item label="Address" name="address">
                <Input />
              </Form.Item>
            </Form>
          </Modal>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  );
}
export default App;