Ant Design入门、Ant Design Pro入门

最新推荐文章于 2024-09-10 19:50:21 发布

peacezhi

最新推荐文章于 2024-09-10 19:50:21 发布

阅读量703

点赞数

本文链接：https://blog.csdn.net/peacezhi/article/details/125990049

版权

本文介绍了Ant Design的入门，包括开始使用、布局、表格的基本用法以及如何美化页面。接着，文章详细讲解了Ant Design Pro的部署安装、菜单和路由配置、新增页面以及model执行流程。此外，还提供了源代码链接供读者参考。

摘要由CSDN通过智能技术生成

Ant Design入门

在这里插入图片描述

开始使用

引入Ant Design

在config.js文件中进行配置：

export default {
   
plugins: [
['umi‐plugin‐react', {
   
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
]
};

小试牛刀

创建MyTabs.js文件：

import React from 'react'
import {
   Tabs} from 'antd'
const TabPane = Tabs.TabPane;
const callback = (key) => {
   
console.log(key);
}
class MyTabs extends React.Component {
   
render() {
   
return (
<Tabs defaultActiveKey="1" onChange={
   callback}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane
1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane
2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane
3</TabPane>
</Tabs>
)
}
}
export default MyTabs;

在这里插入图片描述

布局

在这里插入图片描述

搭建整体框架

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容：

import React from 'react'
import {
    Layout } from 'antd';
const {
    Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
   
render(){
   
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;

需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全
局的布局文件
接下来，配置路由：（非必须）
config.js文件

export default {
   
plugins: [
['umi‐plugin‐react', {
   
dva: true, // 开启dva功能
antd: true // 开启Ant Design功能
}]
],
routes: [{
   
path: '/',
component: '../layouts' //配置布局路由
}]
};

在这里插入图片描述

子页面使用布局

首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传
递的内容。

import React from 'react'
import {
    Layout } from 'antd';
const {
    Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
   
render(){
   
return (
<Layout>
<Sider>Sider</Sider>
<Layout>
<Header>Header</Header>
<Content>{
   this.props.children}</Content>
<Footer>Footer</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;

接下来配置路由（注意，在布局路由下面进行配置）
说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不
采用umi默认路由
在这里插入图片描述

美化页面

import React from 'react'
import {
    Layout } from 'antd';
const {
    Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
   
render(){
   
return (
<Layout>
<Sider width={
   256} style={
   {
    minHeight: '100vh', color:
'white' }}>
Sider
</Sider>
<Layout>
<Header style={
   {
    background: '#fff', textAlign:
'center', padding: 0 }}>Header</Header>
<Content style={
   {
    margin: '24px 16px 0' }}>
<div style={
   {
    padding: 24, background: '#fff',
minHeight: 360 }}>
{
   this.props.children}
</div>
</Content>
<Footer style={
   {
    textAlign: 'center' }}>后台系统 ©2018
Created by 黑马程序员</Footer>
</Layout>
</Layout>
);
}
}
export default BasicLayout;

在这里插入图片描述

引入导航条

import React from 'react'
import {
   Layout, Menu, Icon} from 'antd';
const {
   Header, Footer, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends React.Component {
   
constructor(props){
   
super(props);
this.state = {
   
collapsed: false,
}
}
render() {
   
return (
<Layout>
<Sider width={
   256} style={
   {
   minHeight: '100vh', color:
'white'}}>
<div style={
   {
    height: '32px', background:
'rgba(255,255,255,.2)', margin: '16px'}}/>
<Menu
defaultSelectedKeys={
   ['2']}
defaultOpenKeys={
   ['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={
   this.state.collapsed}
>
<Menu.Item key="1">
<Icon type="pie‐chart"/>
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="desktop"/>
<span>Option 2</span>
<