React学习21----React UI框架Antd(Ant Design)的基本使用

Ant Design 现在支持：react,angular,vue 3个框架
官网地址：
https://ant.design/index-cn

具体使用：
1、antd官网：
https://ant.design/docs/react/introduce-cn

2、React中使用Antd
2.1安装antd npm install antd --save / yarn add antd / cnpm install antd --save
2.2在您的react项目的css文件中引入 Antd的css
@import ‘~antd/dist/antd.css’;

3、看文档使用：
如使用Button：
3.1、在对应的组件中引入Antd
import { Button } from ‘antd’;
3.2、

<Button type="primary">Primary</Button>

在官网中找到源码：

下面我们写一个布局：
项目结构：

效果如下：

默认已经安装antd,并引入css @import ‘~antd/dist/antd.css’;
1先找到文档：
https://ant.design/components/layout-cn/
2复制需要效果的代码：SiderDemo.js

import React from 'react';
import { Layout, Menu, Icon } from 'antd';const { Header, Sider, Content } = Layout;class SiderDemo extends React.Component {state = {collapsed: false,};toggle = () => {this.setState({collapsed: !this.state.collapsed,});}render() {return (<Layout className="app">{/*左边*/}<Sidertrigger={null}collapsiblecollapsed={this.state.collapsed}>{/* 图标 */}<div className="logo" />{/* 图标下的菜单 */}<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}><Menu.Item key="1"><Icon type="user" /><span>zhh 1</span></Menu.Item><Menu.Item key="2"><Icon type="video-camera" /><span>zhh 2</span></Menu.Item><Menu.Item key="3"><Icon type="upload" /><span>zhh 3</span></Menu.Item></Menu></Sider><Layout>{/* 头 */}<Header style={{ background: '#fff', padding: 0 }}><IconclassName="trigger"type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}onClick={this.toggle}/></Header>{/* 右边内容 */}<Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,}}>失恋的感觉就像泰森打拳，先让你打十拳，然后再一拳KO你。让你输得心服口服，死得贼不舒服。</Content></Layout></Layout>);}
}
export default SiderDemo;

3.文档中提供的css, 没有效果

自己在自己的css文件中调一下：index.css

@import '~antd/dist/antd.css';*{margin: 0px;padding: 0px;
}.app .trigger {font-size: 18px;line-height: 64px;padding: 0 24px;cursor: pointer;transition: color .3s;
}.app .trigger:hover {color: #1890ff;
}.app .logo {height: 32px;background: rgba(255,255,255,.2);margin: 16px;
}.app .ant-layout{height: 100%;
}

源码下载：
rdemo21
https://download.csdn.net/download/zhaihaohao1/10980541

React学习21----React UI框架Antd(Ant Design)的基本使用相关推荐

《PC端UI框架》Ant Design V4 中表单校验
通过 rules 校验规则: 常用的 rules 校验规则: len:字段长度. max:最大长度. min:最小长度. required:是否必选. pattern:正则表达式校验. validat ...
React学习：脚手架搭建、antd引入-学习笔记
文章目录 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建项目目录结构 antd引入 antd附加:数据可放置的三个位置 React学习:脚手架搭建.antd引入-学习笔记脚手架搭建 ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React学习(六)-React中组件的数据-state
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 ID:suibichuanji 点击下方 ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React——UI框架 Antd 、Element
[Ant Design of React] 官网:https://ant.design/docs/react/getting-started-cn 1. 安装依赖 cnpm i -S antd 2. ...
Vue、React、Angular最佳UI框架
摘要: 今天我们不聊技术,只"以貌取人". 刚入门的小伙伴问我(上面是我的自拍照),现在前端Vue.React.Angular这三个框架似乎都很好,反而不知道选择什么了,我当时开玩 ...
React学习手册 React学习手册中文版 React学习手册pdf React学习手册中文版pdf
React学习手册,React学习手册PDF React学习手册中文版,React学习手册中文版PDF React学习手册,React学习手册pdf,React学习手册-14393339,React学 ...
【React学习】React更新渲染原理
当我们调用 setState 之后发生了什么?react经历了怎样的过程将新的 state 渲染到页面上? 一次react更新,核心就是对虚拟dom进行diff,找出最少的需要变化的dom节点,然后对 ...

React学习21----React UI框架Antd(Ant Design)的基本使用

React学习21----React UI框架Antd(Ant Design)的基本使用相关推荐

最新文章

热门文章