React中使用antd組件的方法
更新時間：2022年09月05日 16:01:12 作者：Icy?Hunter
antd?是基于?Ant?Design?設計體系的?React?UI?組件庫，主要用于研發(fā)企業(yè)級中后臺產品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下
antd
antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產品。
國內鏡像為：https://ant-design.gitee.io/docs/react/introduce-cn
速度很快
進入網頁點擊組件就可以看到網頁需要的各種配件，如按鈕、導航欄等等，并且配有各種使用方法的API，目前已經更新到4.22版本，原本是只支持react不過后來也支持vue了。
3.幾版本的文檔說明會更加詳細
antd還可以更改主題顏色，按需引入組件的css，不過得小小操作一下，以后需要了再來補。
這里就簡單展示一下antd的使用。
使用antd
首先需要安裝antd
yarn add antd
即可
進入組件選一個比較好看的組件，比如我覺得這個導航欄不錯。
然后copy代碼就行了。
點擊顯示代碼
然后選擇js的代碼，copy到App組件就行了。
App.js:
import {
AppstoreOutlined,
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('Option 3', '3', <ContainerOutlined />),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
]),
];
const App = () => {
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div
style={{
width: 256,
}}
>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
/>
</div>
);
};
export default App;
index.js中還需要引入antd自己的樣式
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./App"
import "antd/dist/antd.min.css"
ReactDOM.render(<App/>,document.getElementById('root'))
然后啟動腳手架
npm start
這樣就引入成功了。
但是美中不足的就是大小有點不爽
我想讓他全屏。
f12打開開發(fā)者工具
發(fā)現可能是root div太小了
設置成100%但是還是不行
里面那個div設置100%還是不行
終于，ul設置一下就可以了。
那么按上面的步驟代碼里改下樣式就行了
要改的地方如下：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root" style="height:100%"></div>
</body>
</html>
App.js:
import {
AppstoreOutlined,
ContainerOutlined,
DesktopOutlined,
MailOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';
import React, { useState } from 'react';
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
type,
};
}
const items = [
getItem('Option 1', '1', <PieChartOutlined />),
getItem('Option 2', '2', <DesktopOutlined />),
getItem('Option 3', '3', <ContainerOutlined />),
getItem('Navigation One', 'sub1', <MailOutlined />, [
getItem('Option 5', '5'),
getItem('Option 6', '6'),
getItem('Option 7', '7'),
getItem('Option 8', '8'),
]),
getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
getItem('Option 9', '9'),
getItem('Option 10', '10'),
getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
]),
];
const App = () => {
const [collapsed, setCollapsed] = useState(false);
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
return (
<div
style={{
width: 256,
height: '100%'
}}
>
<Button
type="primary"
onClick={toggleCollapsed}
style={{
marginBottom: 16,
}}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={collapsed}
items={items}
style={{height:'100%'}}
/>
</div>
);
};
export default App;
刷新頁面
是想要的效果。
到此這篇關于React中使用antd組件的方法的文章就介紹到這了,更多相關React antd組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
虛擬列表是現在比較常用的前端渲染大數據列表的方案,目前也有很多組件庫和工具庫也都有對應的實現,本文將給大家介紹一下如何用React實現一個簡單的虛擬列表,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關于React.Js添加與刪除onScroll事件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章講述了React的基本介紹,基本使用和React相關js庫.通過這篇文章可以入門React的使用,可以快速上手使用React進行代碼的編寫2021-06-06
這篇文章主要介紹了create-react-app降低react的版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了詳解如何在React組件“外”使用父組件的Props，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了react-router4 嵌套路由的使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
使用 React 和 Threejs 創(chuàng)建一個VR全景項目的過程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個VR全景項目的過程詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家詳細介紹了react實現動態(tài)表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了React 父組件和子組件的數據傳輸的相關資料，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下2021-04-04