08-Ant Design的基本使用

andt 的介绍

Ant Design 是基于 React 实现，开发和服务于企业级后台产品。

支持环境

  • 现代浏览器和 IE9 及以上（需要 polyfills）。

  • 支持服务端渲染。

  • Electron

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。

很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 —> 切换开发人员工具”，就会看到类似于 chrome的调试工具。

相关链接

andt 的使用

环境安装

  1. npm install antd --save

代码示例

我们需要什么组件，就导入该组件即可。

（1）index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  13.   <div id="app"></div>
  14. </body>
  16. </html>

（2）main.js:

  1. // JS打包入口文件
  2. // 1. 导入包
  3. import React from "react";
  4. import ReactDOM from "react-dom";
  6. import MyComponent from "./components/MyComponent.jsx";
  8. // 使用 render 函数渲染 虚拟DOM
  9. ReactDOM.render(<MyComponent></MyComponent>, document.getElementById("app"));

(3)MyComponent.jsx:

  1. import React from "react";
  3. // 导入 日期选择组件
  4. import { DatePicker } from "antd";
  6. export default class MyComponent extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {};
  10.   }
  12.   render() {
  13.     return (
  14.       <div>
  15.         <h3>在组件中引入 andt</h3>
  17.         <DatePicker />
  18.       </div>
  19.     );
  20.   }
  21. }

代码运行效果：

20190217_1500.png

AntD组件

表格

pagination属性可以用来分页。

loading框

需求：在数据显示之前，展示 loading；在数据显示之后，关闭loading。

相关问题的链接

AntD pro，跳转到详情页，携带参数

AntD pro ，必填项前面，显示星号

其他问题