Ant Design入门之开始使用

引入Ant Design 

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。

在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd 插件会帮你引入 antd 并实现按需编译。

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

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

小试牛刀

接下来，我们开始使用antd的组件，以tabs组件为例，地址：https://ant.design/components/tabs-cn/

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 antd wo de 第一个 tabs</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;