react ant icon的简单使用

refer: 快速上手 - Ant Design

1.引入ant

npm install antd --save

2.在页面引用:

import { StarOutlined } from '@ant-design/icons';

如果想要引入多个icon,可以这样书写:

import { UserOutlined, MailOutlined, PieChartOutlined } from '@ant-design/icons';

上面这行代码就是在页面引入了ant的icon StarOutlined,在页面显示的是一个空心的星星

3.在需要的位置使用这个icon

<Button type="primary" onClick={() => this.handleViewClick(record.id)}><StarOutlined />查看</Button>

上面这段代码是在查看这个button左侧增加了这个星星icon,如果你想设置css,例如居右8px等,可以使用:

<StarOutlined style={{ marginRight: 8 }} />

如果是在''中引用,可以这样书写:

{title: (<span><StarOutlined style={{ marginRight: 8 }} />所属计算方案名称</span>),dataIndex: 'calculation_plan_name',key: 'calculation_plan_name',},

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22855.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年第三届工业自动化、机器人与控制工程国际会议 | IET独立出版 | EI检索

会议简介 Brief Introduction 2023年第三届工业自动化、机器人与控制工程国际会议&#xff08;IARCE 2023&#xff09; 会议时间&#xff1a;2023年10月27 -30日 召开地点&#xff1a;中国成都 大会官网&#xff1a;www.iarce.org 2023年第三届工业自动化、机器人与控制工程国际…

SocialFi 的开发中如何利用 NFTScan API 获取 NFT 数据

SocialFi 作为社交媒体与 Web3 的创新融合&#xff0c;致力于构建更加开放去中心化的社交平台。它赋能用户拥有数据控制权、实现内容价值&#xff0c;并通过代币经济建立起激励与治理机制&#xff0c;这正是 Web3 社交的独特魅力所在。SocialFi 为我们描绘了一个更加用户驱动、…

数据安全能力框架模型-详细解读(三)

数据安全能力框架内涵 “奇安信数据安全能力框架”体现了数据安全治理从组织机构安全治理&#xff0c;到数字化环境具体管控、分析能力分层逐步落实的工程方法。 它以企业数据安全的战略目标和风险容忍度为输入&#xff0c;明确数据安全治理的组织&#xff1b;以合规与治理需…

AtcoderABC227场

A - Last CardA - Last Card 题目大意 一共 K 张卡片分发给 N 个人&#xff0c;这些人的编号为 1, 2, …, N 从第 A 个人开始&#xff0c;按照顺序依次将卡片发给以下人员&#xff1a;A, A1, A2, …, N, 1, 2, …问最后一个卡片将发给哪个人&#xff1f; 具体来说&#xff0c;…

uniapp自定义头部导航栏

有时我们需要一些特殊的头部导航栏页面&#xff0c;取消传统的导航栏&#xff0c;来增加页面的美观度。 下面我就教大家如何配置&#xff1a; 一、效果图 二、实现 首先在uniapp中打开pages.json配置文件&#xff0c;在单个路由配置style里面设置导航栏样式​​​​​​nav…

【网络基础实战之路】基于MGRE多点协议的实战详解

系列文章传送门&#xff1a; 【网络基础实战之路】设计网络划分的实战详解 【网络基础实战之路】一文弄懂TCP的三次握手与四次断开 【网络基础实战之路】基于MGRE多点协议的实战详解 【网络基础实战之路】基于OSPF协议建立两个MGRE网络的实验详解 PS&#xff1a;本要求基于…

【GitOps系列】使用 ArgoCD ApplicationSet 来实现多环境管理

文章目录 前言自动多环境管理概述自动化管理多环境实战示例应用简介ApplicationSet 简介部署 ApplicationSet访问多环境 创建新环境实验结语 前言 聊起多环境&#xff0c;通常可能会立即想到下面几个常见的环境&#xff1a; 开发环境测试环境预发布环境生产环境 为了让不同职…

JSP--Java的服务器页面

jsp是什么&#xff1f; jsp的全称是Java server pages,翻译过来就是java的服务器页面。 jsp有什么作用&#xff1f; jsp的主要作用是代替Servlet程序回传html页面的数据&#xff0c;因为Servlet程序回传html页面数据是一件非常繁琐的事情&#xff0c;开发成本和维护成本都非常高…

Apipost三方消息通知,接口变更不用愁

Apipost致力于为开发者提供更全面的API管理功能。而最近&#xff0c;Apipost又新增了一个非常实用的功能&#xff1a;第三方消息推送。这个功能可以帮助开发人员及时了解API的变更情况&#xff0c;从而更好地管理和优化自己的API。 具体来说&#xff0c;Apipost的第三方消息推…

JVM分析工具JProfiler介绍及安装

目录 一、什么是JProfiler&#xff1f; 二、JProfiler 功能结构 1、分析代理 2、记录数据 3、快照 三、安装 一、什么是JProfiler&#xff1f; JProfiler是一个专业的工具&#xff0c;用于分析运行中的JVM内部发生的事情。当您的生产系统出现问题时&#xff0c;您可以…

【项目 线程3】3.8 线程同步 3.9互斥锁 3.10死锁 3.11读写锁

文章目录 3.8 线程同步3.9互斥锁互斥量互斥量相关操作函数 3.10死锁3.11读写锁读写锁读写锁相关操作函数 3.8 线程同步 问题&#xff1a;卖第0张、第-1张门票&#xff0c;三个线程买同一张门票等等。 原因&#xff1a;三个线程并发执行去抢占线程资源&#xff0c;A进来休眠600…

【JavaEE初阶】了解JVM

文章目录 一. JVM内存区域划分二. JVM类加载机制2.1 类加载整体流程2.2 类加载的时机2.3 双亲委派模型(经典) 三. JVM垃圾回收机制(GC)3.1 GC实际工作过程3.1.1 找到垃圾/判定垃圾1. 引用计数(不是java的做法,Python/PHP)2. 可达性分析(Java的做法) 3.1.2 清理垃圾1. 标记清除2…

数据结构——单链表OJ题

单链表OJ题 前言一、删除链表中等于给定值 val 的所有节点二、反转一个单链表三、返回链表的中间结点四、输出该链表中倒数第k个结点五、将两个有序链表合并六、链表的回文结构七、将链表分割成两部分八、找出第一个公共结点九、判断链表中是否有环总结 前言 在前面的博客中我…

jenkins的cicd操作

cicd概念 持续集成&#xff08; Continuous Integration&#xff09; 持续频繁的&#xff08;每天多次&#xff09;将本地代码“集成”到主干分支&#xff0c;并保证主干分支可用 持续交付&#xff08;Continuous Delivery&#xff09; 是持续集成的下一步&#xff0c;持续…

智能优化算法——哈里鹰算法(Matlab实现)

目录 1 算法简介 2 算法数学模型 2.1.全局探索阶段 2.2 过渡阶段 2.3.局部开采阶段 3 求解步骤与程序框图 3.1 步骤 3.2 程序框图 4 matlab代码及结果 4.1 代码 4.2 结果 1 算法简介 哈里斯鹰算法(Harris Hawks Optimization&#xff0c;HHO)&#xff0c;是由Ali As…

高并发与性能优化的神奇之旅

作为公司的架构师或者程序员&#xff0c;你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢&#xff1f;笔者在出道那会为此是吃尽了苦头的&#xff0c;不过也得感谢这段苦&#xff0c;让笔者从头到尾去探索&#xff0c;找寻解决之法。 目录 第一站…

android AIDL 学习使用

在android studio 2023.2中使用 1、在buidl.gradle增加以下配置&#xff0c;然后同步。不增加这些配置&#xff0c;创建aidl时显示为灰色&#xff0c;不能创建 buildFeatures {compose true// Disable unused AGP featuresbuildConfig falseaidl truerenderScript falseresVal…

Flink学习教程

最近因为用到了Flink&#xff0c;所以博主开了《Flink教程》专栏来记录Flink的学习笔记。 【Apache Flink v1.16 中文文档】 【官网 - Apache Flink v1.3 中文文档】 一、基础 参考链接如下&#xff1a; Flink教程&#xff08;01&#xff09;- Flink知识图谱Flink教程&…

使用即时消息缩短 B2B 销售周期

在B2B销售中&#xff0c;时间就是一切。所以企业需要做的就是尽可能快地回复客户的咨询&#xff0c;否则会造成严重的客户流失。什么是 B2B 销售&#xff1f;它就是企业对企业销售&#xff0c;企业主要或仅向其他企业销售其产品或服务&#xff0c;这些产品或服务可以是从软件到…

安卓:BottomNavigationBar——底部导航栏控件

目录 一、BottomNavigationBar介绍 二、BottomNavigationBar的常用方法及其常用类 &#xff08;一&#xff09;、常用方法 1. 添加菜单项 2. 移除菜单项 3. 设置选中监听器 4. 设置当前选中项 5. 设置徽章 6. 样式和颜色定制 7. 动画效果 8. 隐藏底部导航栏。 9、设…