Ant Design of React 框架使用总结1
一. 为什么要用UI 框架
- 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的。
- 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标准浏览器的兼容性,举个例子:一个checkbox复选框在IE上显示一个样式,谷歌上又是一个样子,火狐上又是一个样子,这个时候框架开发者们就会对它的样式进行统一,并兼容各种小问题。
- 快速性 ,快速性很好理解,就是快速高效开发的意思,因为各种ui框架会封装很多我们常用的各种组件,这样我们就不用重复的去开发那些 html 结构和功能了。
二. UI框架的功能
几乎是所有ui框架绝对都有以下的组件类型,唯一的差别有可能是各个ui框架对该类型命名的不同而已了,而功能也几乎一样,而所有组件都是封装出来的小组件,根据功能需求都会提供:**“属性,方法,事件”**这几个接口出来供我们使用,因此我们在调用组件时,对应的去查看它的api就OK了,使用也就如此简单了.
每个ui框架都有自己特有的组件,也正是因为这个原因,在项目技术选型时,这也是对ui框架的一个选择标准,我们需要它的某个功能来实现我们的需求,当然也涉及到实际应用和可扩展性
- 布局型组件:主要指栅格系统组件,layout布局组件等
- 基础型组件:主要指按钮,图标,字体,颜色等
- 导航型组件:主要指菜单,tab标签,分页控件组件,下拉列表组件等
- 表单型组件:input输入框,checkbox复选,radio单选,评分,日期,form表单等
- 对话框型组件:主要指确认对话框,信息提示框
- 数据视图组件:主要指table表格,list列表等
任何一个ui框架的组件的api,官网都有属性的作用,方法的调用,以及使用注意事项。建议先去看这个组件的api,了解用法和注意事项,这样开发过程才会事半功倍。
三. antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
特点:
1.提炼自企业级中后台产品的交互语言和视觉风格。
2.开箱即用的高质量 React 组件。
3.使用 TypeScript 构建,提供完整的类型定义文件。
4.全链路开发和设计工具体系。
所需的环境:
1.主流浏览器和 IE9 及以上(需要 polyfills)。
2.支持服务端渲染。
3.Electron(翻译: 电子) 将已开发好的WEB前端,直接转化为windows上的可执行程序。( ?? 具体作用 )
Ant Design of React 框架使用总结1的更多相关文章
- Ant Design(ui框架)
官方文档:https://ant.design/docs/react/introduce-cn 说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架.里面的组件很完善, ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架基础】
全部章节 >>>> 文章目录 一.Ant Design of Vue框架 1.Ant Design介绍 2.Ant Design of Vue安装 3.Ant Design o ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- 同时使用 Ant Design of React 中 Mention 和 Form
使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能. 具体效果为: 遇到的问题: 1.希望 ...
- Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】
全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...
- button JS篇ant Design of react
这篇看ant Desgin of react的button按钮的js代码,js代码部分是typescript+react写的. button组件里面引用了哪些组件: import * as React ...
- button JS篇ant Design of react之二
最近更新有点慢,更新慢的原因最近在看 <css世界>这本书,感觉很不错 <JavaScript高级程序设计> 这本书已经看了很多遍了,主要是复习前端的基础知识,基础知识经常会过 ...
- Ant Design使用问题记录
公司的测试管理平台前端使用的是Ant Design of React框架,后台使用的是python,数据库用的是mysql.没有参与前期的开发,听说是工作了10年积累下来的一个暂且可用的管理平台,开发 ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
随机推荐
- MySql修改数据表的基本操作(DDL操作)
1.查看数据库的基本语句:show databases; 2.选择相应的数据库进入语法:use 数据库名; 3.查看数据库中的表语法:show tables; 4.查看表的基本结构语句:desc 表名 ...
- Grunt搭建自动化web前端开发环境--完整流程
Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...
- django框架配置mysql数据库
django配置mysql数据库: 1.首先更改django项目文件中的settings.py的数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.d ...
- Django session/cookie
一.cookie 常用方法: 获取: 需要在消息体设置值 1:设置cookie def login(request): if request.method == "POST": ...
- 20175208『Java程序设计』课程 结对编程练习_四则运算
20175208 结对编程练习_四则运算(第一周) 结对成员:20175208张家华,20175202葛旭阳 一.需求分析: 实现一个命令行程序,要求: (1)自动生成指定数量的小学四则运算题目(加. ...
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- CCF CSP 201612-1 中间数
题目链接:http://118.190.20.162/view.page?gpid=T52 问题描述 试题编号: 201612-1 试题名称: 中间数 时间限制: 1.0s 内存限制: 256.0MB ...
- JavaScript--鼠标滚动改变图片大小
鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值: <!DOCTYPE HTML> <html> <head> <title>通过鼠标滚轮 ...
- 利用phpspider爬取网站数据
本文实例原址:PHPspider爬虫10分钟快速教程 在我们的工作中可能会涉及到要到其它网站去进行数据爬取的情况,我们这里使用phpspider这个插件来进行功能实现. 1.首先,我们需要php环境, ...
- MyElasticsearch
目录 那些必须要知道的事儿 搭建elasticsearch环境 快速上手 elasticsearch分析数据的过程漫谈 建议器:Suggester IK中文分词器 elasticsearch for ...