引用 :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的更多相关文章

  1. 十九、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 ...

  2. Python flask+react+antd实现登陆demo

    这两天在研究flask和antd,想把这俩个东西结合来使用,单独学antd的时候用的是dva来配置,但是发现这样与flask结合的话需要启动两个服务,作为flask只是作为数据的接口,并没用用到其强大 ...

  3. react项目中使用antd

    1.antd官网: https://ant.design/docs/react/introduce-cn 2.React中使用Antd 1.安装antd npm install antd --save ...

  4. antd引入普通html使用,将ant Design本地化

    一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...

  5. 前端笔记之React(三)使用动态样式表&antd&React脚手架&props实战

    一.使用动态样式表 1.1 LESS使用 全局安装Less npm install -g less 创建1.less文件,然后可以用lessc命令来编译这个文件: lessc 1.less 1.css ...

  6. antd配置config-overrides.js文件

    下载antd 包 npm install antd 下载依赖包(定义组件按需求打包) npm install react-app-rewired customize-cra babel-plugin- ...

  7. react_app 项目开发 (5)_前后端分离_后台管理系统_开始

    项目描述 技术选型 react API 接口 接口文档,url,请求方式,参数类型, 根据文档描述的方法,进行 postman 测试,看是否能够得到理想的结果 collections - 创建文件取项 ...

  8. 将ant Design本地化,可通过link以及script直接引入html中使用

    一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...

  9. react使用ant-design组件库

    新建项目并引入组件 1,全局安装脚手架 npm install -g create-react-app 2,新建项目 create-react-app reactantd 3,安装组件 npm ins ...

随机推荐

  1. (转)最新版 nginx内置变量 大全

    原文:http://www.cnphp.info/nginx-embedded-variables-lasted-version.html 在配置基于nginx服务器的网站时,必然会用到 nginx内 ...

  2. django 中间件记录所有请求及请求执行时间

    class LoggingMiddleware(object): def process_request(self, request): request.start_time = time.time( ...

  3. word-wrap和word-break的区别吗?

    word-wrap: css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象. word-break: css的 w ...

  4. touch-slide-image

    用htmls5+css3实现的在android和ios,以及wekit新版浏览器上实现手指滑动切换图片. https://github.com/navyxie/touch-slide-image

  5. java并发编程(2)线程池的使用

    一.任务和执行策略之间的隐性耦合 Executor可以将任务的提交和任务的执行策略解耦 只有任务是同类型的且执行时间差别不大,才能发挥最大性能,否则,如将一些耗时长的任务和耗时短的任务放在一个线程池, ...

  6. 兼容IE和Firefox获得keyBoardEvent对象

    <input type="text" name="words" id="search_txt" class="seachIp ...

  7. 使用union合并查询

    语法: select …..from 表1 union select ……from 表2 2. 合并查询的特点 ① 合并的表中的列的个数.数据类型必须相同或向兼容. ② union默认去掉重复值,如果 ...

  8. RUP 4+1视图

    RUP开篇之作:http://www.ibm.com/developerworks/cn/rational/r-4p1-view/index.html 百科:http://baike.baidu.co ...

  9. [javaEE] jsp的指令

    jsp的指令:jsp的指令(directive)是为jsp引擎而设计的,他们并不直接产生任何可见输出,而是告诉引擎如何处理jsp 页面中的其他部分 页面头部的page指令 <%@page imp ...

  10. SpringCloud实战之初级入门(一)— eureka注册中心

    目录 写在前面 1.资料目录 2.环境介绍 3.eureka注册中心 3.1 创建工程 3.2 启动工程 5.eureka注册中心集群高可用 6.结语 7.一点点重要的事情 写在前面 我在软件行业浸泡 ...