React--》UI组件库ant-design的介绍与使用

Ant Design的介绍与使用

安装与使用

自定义主题

Ant Design的介绍与使用

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用。其官方网址为：官方网址。以下可以看到antd的特性与介绍，可以看出antd的生态已经很完善了，可以说大部分的公司的项目都能找到使用antd的影子。

博主撰写此文时，antd已经更新5版本，如果是初次使用的新手可以点击网站导航区的研发选项，了解一下里面的对antd这个组件库的安装以及一些进阶技能的使用：

安装与使用

安装步骤如下，npm或yarn安装都可以。

编译器终端执行命令安装即可，完成之后，点击网页的组件选择，然后随便找个组件试着引用一下，如下：

import React, { Component } from 'react'
import { Button } from 'antd';
export default class App extends Component {render() {return (<div><Button type="primary">Primary Button</Button><Button>Default Button</Button><Button type="dashed">Dashed Button</Button><Button type="text">Text Button</Button><Button type="link">Link Button</Button></div>)}
}

如果你当初下载的antd是低版本的，需要还需要单独引入样式，当然现在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

如果想更改组件的样式，可以参考每个组件下的API，里面详细介绍了各种样式的引用：

举个例子，如果想使用Icon图标，可以点击相关组件，查看其代码演示然后进行使用，如下：

antd为了减少代码的负重，将有的组件样式单独抽离出来，如果想使用需单独引用：

import React, { Component } from 'react'
import { Button } from 'antd';
import {HomeOutlined,LoadingOutlined,SettingFilled,SmileOutlined,SyncOutlined,
} from '@ant-design/icons';
export default class App extends Component {render() {return (<div><Button type="primary">Primary Button</Button><Button>Default Button</Button><Button type="dashed">Dashed Button</Button><Button type="text">Text Button</Button><Button type="link">Link Button</Button><HomeOutlined /><SettingFilled /><SmileOutlined /><SyncOutlined spin /><SmileOutlined rotate={180} /><LoadingOutlined /></div>)}
}

自定义主题

在 5.0 版本的 Ant Design 中，提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强。

通过以下代码进行是否引入主题的介绍：

import React, { Component } from 'react'
import { Button,ConfigProvider } from 'antd';
export default class App extends Component {render() {return (<div><ConfigProvidertheme={{token: {colorPrimary: '#008c8c',},}}>{/* 引入主题 */}<Button type="primary">Primary Button</Button></ConfigProvider><hr />{/* 原主题 */}<Button type="primary">Primary Button</Button></div>)}
}

antd还有一些其它好玩的组件，这里就不在过多讲解，你可以自行探索，本文不在讨论。当然如果你还想了解一些其它组件库的使用，推荐看一下我之前的文章：基于Vue的UI组件库