目錄

Ant Design的介紹與使用

安裝與使用

自定義主題

---

Ant Design的介紹與使用

Ant Design是阿里螞蟻金服團(tuán)隊(duì)基于React開(kāi)發(fā)的ui組件,主要用于中后臺(tái)系統(tǒng)的使用。其官方網(wǎng)址為：官方網(wǎng)址 。以下可以看到antd的特性與介紹，可以看出antd的生態(tài)已經(jīng)很完善了，可以說(shuō)大部分的公司的項(xiàng)目都能找到使用antd的影子。

博主撰寫此文時(shí)，antd已經(jīng)更新5版本，如果是初次使用的新手可以點(diǎn)擊網(wǎng)站導(dǎo)航區(qū)的研發(fā)選項(xiàng)，了解一下里面的對(duì)antd這個(gè)組件庫(kù)的安裝以及一些進(jìn)階技能的使用：

安裝與使用

安裝步驟如下，npm或yarn安裝都可以。

編譯器終端執(zhí)行命令安裝即可，完成之后，點(diǎn)擊網(wǎng)頁(yè)的組件選擇，然后隨便找個(gè)組件試著引用一下，如下：

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>)} }

如果你當(dāng)初下載的antd是低版本的，需要還需要單獨(dú)引入樣式，當(dāng)然現(xiàn)在的5版本是不需要的，如下：

import 'antd/dist/antd.css'

如果想更改組件的樣式，可以參考每個(gè)組件下的API，里面詳細(xì)介紹了各種樣式的引用：

舉個(gè)例子，如果想使用Icon圖標(biāo)，可以點(diǎn)擊相關(guān)組件，查看其代碼演示然后進(jìn)行使用，如下：

antd為了減少代碼的負(fù)重，將有的組件樣式單獨(dú)抽離出來(lái)，如果想使用需單獨(dú)引用：

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 的加持后，動(dòng)態(tài)主題的能力也得到了加強(qiáng)。

通過(guò)以下代碼進(jìn)行是否引入主題的介紹 ：

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還有一些其它好玩的組件，這里就不在過(guò)多講解，你可以自行探索，本文不在討論。當(dāng)然如果你還想了解一些其它組件庫(kù)的使用，推薦看一下我之前的文章：基于Vue的UI組件庫(kù)

總結(jié)

以上是生活随笔為你收集整理的React--》UI组件库ant-design的介绍与使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。