antdesign apahce 配置 antdesign 组件

Ant Design of React

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。

带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总

结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和

『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者

专注于更好的用户体验。

 

 

 

Start

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发

布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd

插件会帮你引入 antd 并实现按需编译。

---

导入umi-plugin-react插件

#添加插件

yarn add umi-plugin-react --dev

config文件中开启dva,跟ant design功能

 

 

我们以Form表单为例,官网地址 https://ant.design/components/card-cn/

官方代码

import { Card } from 'antd';

ReactDOM.render(
  <div>
    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>,
  mountNode,
);

 

效果如下

我们按照官方给的事例结合使用

创建MyCard.js文件

import React from 'react'
import { Card } from 'antd'

class MyCard extends React.Component{
    render(){
        return (
            <div>
                <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
                    <p>Card content</p>
                    <p>Card content</p>
                    <p>Card content</p>
                </Card>
                <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
                    <p>Card content</p>
                    <p>Card content</p>
                    <p>Card content</p>
                </Card>
            </div>
        )
    }
}
export default MyCard;

布局

官网https://ant.design/components/layout-cn/

常用的布局结构

 

 

 

 

 

搭建整体布局结构

在umi约定的目录结构中,/src/layouts/index.js

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

import React from 'react';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

class BasicLayer extends React.Component{


    render(){
        return (
            <Layout>
                <Sider>Sider</Sider>
                <Layout>
                    <Header>Header</Header>
                    <Content>Content</Content>
                    <Footer>Footer</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default BasicLayer;

 

配置路由 (非必须)

config/config.js

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {
    plugins: [
        ['umi-plugin-react', {
            //暂时不启用任何功能
            dva : true , //开启了dva功能,
            antd : true
        }]
    ],
    routes: [{
        path:'/',
        component:'../layouts'
    }]
};

进行页面访问：

引用子页面

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

import React from 'react';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

class BasicLayer 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 BasicLayer;

 

配置路由(采用默认路由的可以忽略)

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不采用umi默认的路由方式。

 

进行访问测试：

 

所有的页面效果都是一样的

 

美化页面

import React from 'react';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

class BasicLayer extends React.Component{


    render(){
        return (
            <Layout>
                <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>E03</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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default BasicLayer;

 

页面效果如下

 

 

左侧添加导航条

官网https://ant.design/components/menu-cn/

 

代码

import React from 'react';
import { Layout } from 'antd';
import { Menu, Icon, Button } from 'antd';


const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

class BasicLayer extends React.Component{


    constructor(props){
        super(props);

        this.state = {
            collapsed: false
        }
    }

    render(){
        return (
            <Layout>
                <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>

                    <div style={{ width: 256 ,height:'32px',margin:'16px'}}>
                    </div>

                        <Menu
                            defaultSelectedKeys={['1']}
                            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>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <Icon type="inbox" />
                                <span>Option 3</span>
                            </Menu.Item>
                            <SubMenu
                                key="sub1"
                                title={
                                    <span>
                <Icon type="mail" />
                <span>Navigation One</span>
              </span>
                                }
                            >
                                <Menu.Item key="5">Option 5</Menu.Item>
                                <Menu.Item key="6">Option 6</Menu.Item>
                                <Menu.Item key="7">Option 7</Menu.Item>
                                <Menu.Item key="8">Option 8</Menu.Item>
                            </SubMenu>
                            <SubMenu
                                key="sub2"
                                title={
                                    <span>
                <Icon type="appstore" />
                <span>Navigation Two</span>
              </span>
                                }
                            >
                                <Menu.Item key="9">Option 9</Menu.Item>
                                <Menu.Item key="10">Option 10</Menu.Item>
                                <SubMenu key="sub3" title="Submenu">
                                    <Menu.Item key="11">Option 11</Menu.Item>
                                    <Menu.Item key="12">Option 12</Menu.Item>
                                </SubMenu>
                            </SubMenu>
                        </Menu>



                </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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default BasicLayer;

 

为导航添加链接

需求:点击左侧导航栏右侧进入相应页面

创建俩个页面,用户添加,用户列表

 

配置路由(使用默认路由的可以忽略)

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {
    plugins: [
        ['umi-plugin-react', {
            //暂时不启用任何功能
            dva : true , //开启了dva功能,
            antd : true
        }]
    ],
    routes:[{
        path:'/',
        component:'../layouts',
        routes: [{
            path:'/user',
            routes:[{
                path:'/user/add',
                component: './user/UserAdd'
            },{
                path:'/user/list',
                component:'./user/UserList'
            }]
        }]
    }]
};

在路由index.js中引入链接组件

import Link from 'umi/link';//添加链接样式

<Link to="/user/list">用户列表</Link>

<Link to="/user/add">用户添加</Link>

 

代码如下

import React from 'react';
import { Layout } from 'antd';
import Link from 'umi/link';//添加链接样式


import { Menu, Icon, Button } from 'antd';



const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

class BasicLayer extends React.Component{


    constructor(props){
        super(props);

        this.state = {
            collapsed: false
        }
    }

    render(){
        return (
            <Layout>
                <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>

                    <div style={{ width: 256 ,height:'32px',margin:'16px'}}>
                    </div>

                        <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            mode="inline"
                            theme="dark"
                            inlineCollapsed={this.state.collapsed}
                        >
                            <SubMenu
                                key="sub1"
                                title={
                                    <span>
                                    <Icon type="mail" />
                                    <span>用户管理</span>
                                  </span>
                                }
                            >
                                <Menu.Item key="1">
                                    <Link to="/user/list">用户列表</Link>
                                </Menu.Item>
                                <Menu.Item key="2">
                                    <Link to="/user/add">用户添加</Link>
                                </Menu.Item>
                            </SubMenu>
                        </Menu>



                </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' }}>希望每个人身边都会有一个会带给自己带来光明的人</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default BasicLayer;

效果如图