react UI 組件庫(kù) Ant-design 螞蟻金服UI組件庫(kù)
流行的開(kāi)源 React UI 組件庫(kù)
material-ui (國(guó)外)
官網(wǎng)：https://mui.com/zh/material-ui/getting-started/installation/
這是國(guó)外非常流行的 react UI 組件庫(kù)，但是在國(guó)內(nèi)并不是很常用。
Ant-design UI組件庫(kù)
官網(wǎng)：https://ant.design/index-cn
這是國(guó)內(nèi)比較流行 react UI 組件庫(kù)，又螞蟻金服團(tuán)隊(duì)開(kāi)發(fā)。這一篇博客主要來(lái)講解在 react 項(xiàng)目中使用這一套組件庫(kù)。
Ant-design UI組件庫(kù)
安裝
安裝很簡(jiǎn)單，一句命令完事！
npm install antd --save
基本使用
使用 antd 其實(shí)很簡(jiǎn)單，學(xué)習(xí)過(guò) vue 的寶子們一定使用過(guò) vue 的 element-ui 組件庫(kù)，其實(shí)是一樣的用法。
上一步我們已經(jīng)完成了 antd 的安裝，然后使用的超級(jí)簡(jiǎn)單。
我們暫時(shí)不管別的他說(shuō)啥，我們直接點(diǎn)擊組件頁(yè)面，比如我們需要一個(gè) button 按鈕，我們就點(diǎn)擊左側(cè)導(dǎo)航菜單，查看一下 Button 按鈕 部分下的 button 使用方法。
他里面提供了很多按鈕供我們使用，我們選擇一個(gè)和我們系統(tǒng)需要的按鈕最相似的使用一下，比如說(shuō)上圖第一個(gè)按鈕，我們點(diǎn)擊下面紅色框的圖標(biāo)打開(kāi)代碼：
每一個(gè) ui 組件都需要我們引入，他們都在我們安裝的 antd 庫(kù)里面，引入的方式就是我第一個(gè)紅色框標(biāo)識(shí)的方式，然后直接把第一個(gè)代碼復(fù)制過(guò)來(lái)就可以了。
// 創(chuàng)建外殼組件
import React, { Component } from "react";
// 引入 antd Button 組件
import { Button } from 'antd';
// 創(chuàng)建并暴露APP組件
export default class App extends Component {
render() {
return (
<div>
<h1>我是????.</h1>
<button>點(diǎn)我呀</button>
{/* 使用 antd 按鈕組件 */}
<Button type="primary">Primary Button</Button>
</div>
)
}
}
OK，保存查看一下效果。
發(fā)現(xiàn)這個(gè)按鈕沒(méi)有官網(wǎng)的樣式，這是因?yàn)楣倬W(wǎng)在使用組件的時(shí)候沒(méi)有說(shuō)明白，我們引入庫(kù)之后，還需要引入 antd 組件庫(kù)的樣式：
import 'antd/dist/antd.css'
最后呢，我們?cè)偎⑿乱幌马?yè)面，就看到我們想用的按鈕成功引入進(jìn)來(lái)了。
// 創(chuàng)建外殼組件
import React, { Component } from "react";
import { Button } from 'antd';
import 'antd/dist/antd.css'
// 創(chuàng)建并暴露APP組件
export default class App extends Component {
render() {
return (
<div>
<h1>我是????.</h1>
<button>點(diǎn)我呀</button>
<Button type="primary">Primary Button</Button>
</div>
)
}
}
好了，這就是我們這個(gè) antd 組件庫(kù)的基本使用。
其實(shí)呢，我們看的話，antd 給我們提供了很多的組件，我們只需要按照她的文檔會(huì)用就可以，沒(méi)有必要背過(guò)。
我們看到哈，在每頁(yè)組件右側(cè)菜單的最后面，都有一個(gè) Api 的菜單項(xiàng)，我們點(diǎn)擊，就可以前往最后查看這個(gè)類(lèi)型的組件具體的配置參數(shù)和回調(diào)方法等信息。
antd 很適合用來(lái)實(shí)現(xiàn)經(jīng)典的后臺(tái)管理系統(tǒng)頁(yè)面。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-476404.html
【本部分相關(guān)代碼資料】：我是????. 的 gitee文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-476404.html
antd的按需引入+自定主題
- 安裝依賴：
npm i react-app-rewired customize-cra babel-plugin-import less less-loader - 修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
- 根目錄下創(chuàng)建config-overrides.js
//配置具體的修改規(guī)則
const { override, fixBabelImports,addLessLoader} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
lessOptions:{
javascriptEnabled: true,
modifyVars: { '@primary-color': 'green' },
}
}),
);
- 備注：不用在組件里親自引入樣式了，即：import 'antd/dist/antd.css’應(yīng)該刪掉
到了這里，關(guān)于26、react UI 組件庫(kù) Ant-design 螞蟻金服UI組件庫(kù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
