Ant Design

简介

Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。

安装

使用npm-package安装ant-design

npm install antd --save

引用

使用create-react-app进行开发时，一般在index.js中引入antd的CSS

import 'antd/dist/antd.min.css'

修改import [需要的组件] from antd/lib/[需要的组件]，引入需要的按钮组件

import Button from 'antd/lib/button'

使用引入的组件时，直接写就可以了

<Button>点击</Button>

通过官网给出的 API 来设置属性，按钮样式也会发生改变。推荐顺序为：type -> shape -> size -> loading -> disabled

例：按钮的属性：点击查看

<div>
    <Button type="primary" shape="circle" size='large'>P</Button>
  <Button loading={this.state.loading}>Default</Button>
  <Button type="danger" onClick={()=>this.setState({loading:!this.state.loading})}>Danger</Button>
</div>

按需加载

首先需要安装依赖的包

npm i babel-plugin-import -D

然后，在自己配置的环境中的.babelrc中添加工具插件

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
  ]
}

在用 create-react-app 创建的项目中 添加工具插件

在用快速创建工具创建的项目中，配置文件在node_modules -> react-scripts中

文件位置

node_modules/react-scripts/config/webpack.config.dev.js

在配置文件的 模块（Module）中找到babel-loader的配置，将下面配置添加在options中

plugins: [
  ["import", { libraryName: "antd", style: "css" }] // `style: true` 会加载 less 文件
],

小贴士：可以直接ctrl+F调出搜索栏，在搜索栏上输入babel-loader可以快速找到

使用

然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { DatePicker } from 'antd';

• 手动引入

import DatePicker from 'antd/lib/date-picker';  // 加载 JS
import 'antd/lib/date-picker/style/css';        // 加载 CSS
// import 'antd/lib/date-picker/style';         // 加载 LESS

栅格组件：点击查看

ANTD的24等分栅格系统，flex布局的栅格系统允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序

• 通过row在水平方向建立一组column（简写col）
• 你的内容应当放置于col内，并且，只有col可以作为row的直接元素
• 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列.col-8
• 如果一个row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列

参考

• Ant-Design官网地址：点击进入