Ant Design 4.6.2 入门学习

1.Ant Design入门

1.1 介绍

Ant Design 是阿里蚂蚁金服团队基于React 开发的ui组件,主要用于后台系统使用
官网

特性:

• 提炼企业级中后台产品的交互语言和视觉风格
• 开箱即用的高质量React组件
• 使用TypeScript构建,提供完整的类型定义文件
• 全链路开发和设计工具体系

1.2 使用

在config.js中,配置如下:

export default {
   
  dva:true,
  antd:true //开启Ant Design 功能
};

***********创建一个 MyTabs.js
import React from "react";
import {
    Tabs } from 'antd';

const TabPane= Tabs.TabPane;

function callback(key) {
   
  console.log(key);
}

class MyTabs extends React.Component{
   
  render() {
   
    return (
      <Tabs defaultActiveKey="1" onChange={
   callback}>
        <TabPane tab="Tab 1" key="1">
          Hello
        </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;

1.3 布局

后台经典三或四 布局

• Layout:布局容器，其下可嵌套 $Header$ ,$Sider$ ,$Content$, $Footer,或Layout$本身，可以放在任何父容器中。
• Header:顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
• sider: 侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。
• Content:内容部分，自带默认样式，其下可嵌套任何元素，只能放在(Layout中。
• Footer:底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
  

1.3.1 全局布局

在src下,创建一个layouts/index,js文件,在umi约定中,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;

config.js 配置路由(先不配置,):

routes: [{
	path: '/',
	component : '../layouts'  //配置路由   
}]

1.3.2 子页面使用布局

全局布局如何使用子页面的布局呢?
首先,在全局布局文件,将Content 内容替换成{this.props.children},引入子页面的布局

*****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>{
   
            this.props.children
          }</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    )
  }
}
export default BasicLayout;

接下来配置路由,在全局路由下设置,(有约定式路由,所以就不配了)

 routes: [
    {
    path: '/', component: '../layouts' , //布局路由
      routes:[
        {
   
          path:'/myTabs',
          component:'./myTabs'
        }<