react ant icon的简单使用

news2024/12/23 12:53:38

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.coloradmin.cn/o/832028.html

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

相关文章

智慧~经典开源项目数字孪生智慧商场——开源工程及源码

深圳南山某商场的工程和源码免费赠送&#xff0c;助您打造智慧商场。立即获取&#xff0c;提升商场管理效能&#xff01; 项目介绍 凤凰商场作为南山地区的繁华商业中心&#xff0c;提供多样化的购物和娱乐体验。通过此项目&#xff0c;凤凰商场将迈向更智能的商业模式。 本项目…

【2023 华数杯全国大学生数学建模竞赛】 C题 母亲身心健康对婴儿成长的影响 Python代码实现

【2023 华数杯全国大学生数学建模竞赛】 C题 母亲身心健康对婴儿成长的影响 1 题目 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c; 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、压力等…

Stable Diffusion教程(8) - X/Y/Z 图表使用

1. 介绍 这项功能可以在 文生图/图生图 界面的左下角种 “脚本” 一栏内选择 “X/Y/Z 图表” 以启用。 它创建具有不同参数的图像网格。使用 X 类型和 Y 类型字段选择应由行和列共享的参数&#xff0c;并将这些参数以逗号分隔输入 X 值 / Y 值字段。支持整数、浮点数和范围。…

【辨析】投影到高维空间 VS 嵌入到高维空间

虽然"投影到高维空间"和"嵌入到高维空间"都涉及将数据映射到高维空间&#xff0c;但它们在深度学习和机器学习领域中有着不同的含义和应用。 投影到高维空间&#xff08;Project to High-Dimensional Space&#xff09;&#xff1a; 投影是指将低维空间中…

三种方式创建对象的几种方式及new实例化时做了什么?

创建对象的几种方式 利用对象字面量创建对象 const obj {}2.利用 new Object创建对象 const obj new Object()3.使用 构造函数实例化对象 function Fn(name) {this.name name} const obj new Fn(张三) console.log(obj.name); //张三为什么要用构造函数的形式&#xff1…

基于STM32F103C8T6的温湿度控制系统(从PCB制作到成品展示)

很久就想写一篇入门级的硬件项目流程介绍&#xff0c;最近终于有了机会&#xff0c;接下来会从PCB设计到成品展示&#xff0c;一步一步地记录&#xff0c;如果对你有帮助&#xff0c;那便是最好。大白话记录我的整个开发流程&#xff0c;有点无聊&#xff0c;各位看官多多担待。…

POLARDB -- Ausitndatabases 历年的文章集合

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

模糊照片怎么修复清晰?教你轻松修复照片清晰度

照片记录着我们生活中的美好瞬间&#xff0c;然而&#xff0c;由于拍摄时手抖或对焦不准等原因&#xff0c;我们常常会遇到模糊的照片。你们通常都会怎么处理这些照片呢&#xff1f;是直接删掉吗&#xff1f;其实我们可以不用删掉&#xff0c;只需要使用一些图修复工具来修复这…

操作系统启动后网络还需要比较慢的时间才启动(差不多二分钟)

环境 linux 4.14.61 systemd version 247.3 问题 启动时发现网络其实很快就起来了&#xff0c;但是mqtt和docker启动的很慢&#xff0c;导致相关依赖启动很慢。 问题分析 实际通过systemctl list-units发现systemd-networkd-wait-online启动失败 而且从字面上看也有延时…

VB6中FSO具体应用详解

文前申明:原文为通用版实例代码,本菜鸟在每例之后加入一个简单的实例(均验证通过),供有需要的朋友参考. 您正在看的VB教程是:VB入门基础认识VB的文件系统对象FSO。 在 VB 编程中经常需要和文件系统打交道&#xff0c;比如获取硬盘的剩余空间、判断文件夹或文件是否存在等。在…

【JDK 11】【JDK 8】项目 jdk 版本升级,修改方案与实践

前言 工作中&#xff0c;难免会遇到升级版本的事情。这次由于两个系统中&#xff0c;系统 A 是用的 JDK8 版本&#xff0c;系统 B 是用 JDK11 版本&#xff1b;要求同步 JDK 版本&#xff0c;也就是升级到11版本。那么接下来将进行介绍~ 问题与解决 1. .sh 脚本启动无法启动…

状态模式——对象状态及其转换

1、简介 1.1、概述 在软件系统中&#xff0c;有些对象也像水一样具有多种状态&#xff0c;这些状态在某些情况下能够相互转换&#xff0c;而且对象在不同的状态下也将具有不同的行为。为了更好地对这些具有多种状态的对象进行设计&#xff0c;可以使用一种被称为状态模式的设…

SAS-数据集SQL水平合并

一、SQL水平合并基本语法 sql的合并有两步&#xff0c;step1&#xff1a;进行笛卡尔乘积运算&#xff0c;第一个表的每一行合并第二个表的每一行&#xff0c;即表a有3行&#xff0c;表b有3行&#xff0c;则合并后3*39行。笛卡尔过程包含源数据的所有列&#xff0c;相同列名会合…

JavaScript的单元挑战

Steven想要建立一个非常简单的小费计算器&#xff0c;以便他去餐厅吃饭时使用。在他的国家&#xff0c;如果账单金额在50到300之间&#xff0c;通常会给15%的小费。如果金额不同&#xff0c;小费就是20%。 您的任务是根据账单金额计算小费。为此创建一个名为’tip’的变量。不允…

2023天猫休闲零食市场分析(天猫数据分析软件)

基于较大的人口基数以及人们对休闲零食的需求&#xff0c;我国的休闲零食市场始终保持着稳健的增长趋势&#xff0c;行业整体的规模也比较大。根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;2023年1月份至4月份&#xff0c;天猫平台上休闲零食行业的销量为6亿&#xff…

对模版以及模版中参数的理解

所谓模板&#xff0c;实际上是建立一个通用函数或类&#xff0c;其类内部的类型和函数的形参类型不具体指定&#xff0c;用一个虚拟的类型来代表。 就比方说你想要实现 一个Add的加法函数&#xff0c;面对不同的类型&#xff0c;你是否要进行多次函数重载呢&#xff0c;其实这多…

网络安全(黑客)自学的误区

一、自学网络安全学习的误区和陷阱 1.不要试图先成为一名程序员&#xff08;以编程为基础的学习&#xff09;再开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而…

许战海咨询方法论系列白皮书在京隆重发布

新时代&#xff0c;面对剧烈变化的竞争环境&#xff0c;企业如何实现结构性增长&#xff1f; 7月31日&#xff0c;许战海咨询最新研究成果——《主品牌进化战略》、《第二招牌增长战略》、《链主品牌&#xff1a;制造业的竞争之王》三本核心方法论白皮书&#xff0c;重磅发布。…

移动端网页div下滑消失、上滑出现(附带闪烁效果)

<div :class "IconShow ? mhomeIcon : IconOff"><img src"/assets/news.svg" alt""></div>// 距离顶部的距离const top ref(0) // 图标向上还是向下滑动const IconShow ref(true)// 滑动监听&#xff0c; 注意如果只有doc…