Ant Design入门

目录

一：什么是Ant Design？

二：开始使用

三：布局

四：表格

---

一：什么是Ant Design？

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

        官网：https://ant.design/index-cn

 

设计语言：

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目 标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design 。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

特性：

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

二：开始使用

引入 Ant Design

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

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

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

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

小试牛刀

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

效果：

 看下官方给出的使用示例：

import { Tabs } from 'antd';

const TabPane = Tabs.TabPane;

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

ReactDOM.render(
<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>,
mountNode);

下面我们参考官方给出的示例，进行使用：

创建 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;

效果：

       到此，我们已经掌握了antd组件的基本使用。

三：布局

       antd 布局： https://ant.design/components/layout-cn/

       在后台系统页面布局中，往往是经典的三部分布局，像这样：<