antd button
引用 :import { Button } from 'antd';
<Button
type = "primary" //按钮样式颜色
shape = "circle" //按钮圆角(默认为方形)
icon = "search" //加图标 ,string (search : 搜索 ,download : 下载 ),也可以直接插入Icon 标签
size = "large" //按钮大小,string 默认 middle
loading //加载状态 ,布尔值 ,默认false
block //将宽度设为父元素的宽度 ,布尔值 ,默认false
disabled //按钮失效,布尔值(默认false)
ghost //按钮背景透明,一般用在父元素有背景色,按钮为白色情况下 ,布尔值 (默认值false)
href = "baidu.com" //设置此属性将按钮转换为a标签 ,string
htmlType = "button" //按钮原生type属性 ,string
target = "_blank" //需要设置href属性,具有超链接target属性
onClick ={this.onclick} //点击事件,需要注意this指向
>
按钮讲解
</Button>
1. 可以直接插入Icon标签
<Button>按钮<Icon type="team"/></Button>
2. type 值包括 : primary(蓝色) ,dashed(虚线),danger(红色),不写type情况下为白色背景,黑字,边框
antd button的更多相关文章
- 十九、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 ...
- Python flask+react+antd实现登陆demo
这两天在研究flask和antd,想把这俩个东西结合来使用,单独学antd的时候用的是dva来配置,但是发现这样与flask结合的话需要启动两个服务,作为flask只是作为数据的接口,并没用用到其强大 ...
- react项目中使用antd
1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...
- antd引入普通html使用,将ant Design本地化
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战
一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...
- antd配置config-overrides.js文件
下载antd 包 npm install antd 下载依赖包(定义组件按需求打包) npm install react-app-rewired customize-cra babel-plugin- ...
- react_app 项目开发 (5)_前后端分离_后台管理系统_开始
项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...
- 将ant Design本地化,可通过link以及script直接引入html中使用
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- react使用ant-design组件库
新建项目并引入组件 1,全局安装脚手架 npm install -g create-react-app 2,新建项目 create-react-app reactantd 3,安装组件 npm ins ...
随机推荐
- 【ExtJS】FormPanel 布局(二)
周末2天好好学习了下布局,现在都给实现了吧. 5.border布局: Border布局将容器分为五个区域:north.south.east.west和center.除了center区域外,其他区域都需 ...
- 鹅厂优文|主播pk,如何实现无缝切换?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者,rexchang(常青),腾讯视频云终端技术总监,2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手 ...
- Mybatis-动态SQL语句
有些时候,sql语句where条件中,需要一些安全判断,例如按某一条件查询时如果传入的参数是空,此时查询出的结果很可能是空的,也许我们需要参数为空时,是查出全部的信息.使用Oracle的序列.mysq ...
- Mac OS X安装OpenGL
Mac OS X安装OpenGL 安装最新的cmake brew install cmake brew upgrade cmake 安装glew brew install glew 安装GLTools ...
- 此请求的URL的长度超过配置的maxUrlLength值
aps.net 网站的url长度默认限制为260个字符. 修改web.config即可 <system.web> <httpRuntime maxUrlLength=" ...
- JAVA异常与异常处理详解
一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...
- 阿里云、青云、腾讯云服务器,Mysql数据库,Redis等产品性能对比
阿里云.青云.腾讯云服务器,Mysql数据库,Redis等产品都使用过,对比维度很多就不一一放出.直接放结论吧:买的腾讯(金融专区)服务器,Mysql(TDSql)把所有项目转到腾讯云,但是没有用腾讯 ...
- Oracle Spatial GIS相关研究
1.Oracle Spatial 概念相关 Oracle Spatial 是Oracle 数据库强大的核心特性,包含了用于存储矢量数据类型.栅格数据类型和持续拓扑数据类型的原生数据类型.Oracle ...
- C10K问题摘要
本文的内容是下面几篇文章阅读后的内容摘要: http://www.kegel.com/c10k.html (英文版) http://www.oschina.net/translate/c10k (中文 ...
- java.lang.NullPointerException: Attempt to invoke virtual method 'java.util.List com.yunweather.app.db.YunWeatherDB.loadProvinces()' on a null object reference
NullPointerException:查看自己的什么地方是否对空指针进行了操作 Attempt to invoke virtual method 'java.util.List com.yunwe ...