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;

Ant Design入门之开始使用相关推荐

Ant Design入门之介绍
Ant Design入门什么是Ant Design? Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用. 官网:https://ant.design/in ...
Ant Design入门之布局
布局 antd布局:https://ant.design/components/layout-cn/ 在后台系统页面布局中,往往是经典的三部分布局,像这样: 下面,我们通过antd组件来完成这个布局. ...
Ant Design入门
目录一:什么是Ant Design? 二:开始使用三:布局四:表格一:什么是Ant Design? Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用 ...
Ant Design 入门-引用自己命名的组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 自己创建的组件:代码 import { Table, Divider, Tag } from 'antd'; ...
Ant Design 入门-参照官方文档使用组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 先来一个按钮组件使用的对比,官方文档的(不能直接用)和实际能用的. 官网demo: import { Tabl ...
Ant Design Pro入门之简介
Ant Design Pro入门了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案. 效果: 源码地址:htt ...
Ant Design pro入门教程
Ant Design pro入门教程最近公司再开项目又要用antd 这次刚好给大家写一个入门安装教程 ( v5 typescript版本 ) 这套模板使用了react框架为基础哦 1. 准备环境 ...
Ant Design Pro入门
目录一:了解Ant Design Pro 二:快速入门一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
后端工程师入门Ant Design Pro
本文适用于后端程序员入门ant design pro,基于官方文档,不探讨底层,仅为实用,效果预览:https://preview.pro.ant.design/dashboard/analysis ...

Ant Design入门之开始使用

引入Ant Design

小试牛刀

Ant Design入门之开始使用相关推荐

最新文章

热门文章