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;

效果如圖

React組件_Ant Design

Ant Design of React

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

大齡程序員思考

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

nuget添加readme

reactjs_ant design pro前端框架入門

springboot 整合GraphQL-java

ReactJs快速入門

React組件_Ant Design

GraphQL快速入門-JAVA

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結