Ant Design

简介

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

安装

使用npm-package安装ant-design

  1. npm install antd --save

引用

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

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

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

  1. import Button from 'antd/lib/button'

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

  1. <Button>点击</Button>

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

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

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

按需加载

首先需要安装依赖的包

  1. npm i babel-plugin-import -D

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

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

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

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

文件位置

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

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

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

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

使用

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

  1. // babel-plugin-import 会帮助你加载 JS 和 CSS
  2. import { DatePicker } from 'antd';
  • 手动引入
  1. import DatePicker from 'antd/lib/date-picker';  // 加载 JS
  2. import 'antd/lib/date-picker/style/css';        // 加载 CSS
  3. // 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会作为一个整体另起一行排列

参考