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.hqwc.cn/news/54060.html

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

相关文章

学习gRPC (三)

测试gRPC例子 编写proto文件实现服务端代码实现客户端代码 通过gRPC 已经编译并且安装好之后&#xff0c;就可以在源码目录下找到example 文件夹下来试用gRPC 提供的例子。 在这里我使用VS2022来打开仓库目录下example/cpp/helloworld目录 编写proto文件 下面是我改写的exa…

前端主题切换方案——CSS变量

前言 主题切换是前端开发中老生常谈的问题&#xff0c;本文将介绍主流的前端主题切换实现方案——CSS变量 CSS变量 简介 编写CSS样式时&#xff0c;为了避免代码冗余&#xff0c;降低维护成本&#xff0c;一些CSS预编译工具&#xff08;Sass/Less/Stylus&#xff09;等都支…

使用ChatGPT编写技术文档

技术文档对于任何项目都是至关重要的&#xff0c;因为它确保所有利益相关者都在同一层面上&#xff0c;并允许有效的沟通和协作。创建详细而准确的技术文档可能既耗时又具有挑战性&#xff0c;特别是对于那些不熟悉主题或缺乏强大写作技巧的人来说。ChatGPT 是一个强大的人工智…

go编译文件

1.编译go文件 go build [go文件]2.执行文件编译文件 ./demo [demo为go文件名称]

4个顶级的支持消费级硬件的NeRF软件平台

似乎每天都有大量的创新发布&#xff0c;人们很容易感到不知所措。因此&#xff0c;让我们放慢脚步&#xff0c;看看4个主流的支持消费级硬件的NeRF 平台。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 1、Instant-NGP&#xff08;Instant-NeRF&#xff09; 2022 年…

Word中如何断开表格中线段

Word中如何断开表格中线段_word表格断线怎么弄_仰望星空_LiDAR的博客-CSDN博客有时候为了美观&#xff0c;需要实现如下的效果&#xff0c;即第2条线段被断开成3段步骤如下&#xff1a;选中需要断开的格网&#xff0c;如下&#xff0c;再选择段落、针对下框标即可。_word表格断…

VR全景在建筑工程行业能起到哪些作用?

在建筑工程领域&#xff0c;数字化技术为行业的发展起到巨大的推动作用&#xff0c;虽然建筑施工行业主要是依赖于工人劳动力和施工设备&#xff0c;但是VR全景在该行业中方方面面都能应用&#xff0c;从设计建模到项目交付&#xff0c;帮助建筑师以及项目方更好的理解每个环节…

使用nativephp开发桌面应用测试

2023年7月21日10:29:03 官网&#xff1a;https://nativephp.com/ 源码&#xff1a;https://github.com/NativePHP/laravel 看起像laravel团队的作品 安装&#xff1a;注意需要php8.1以上&#xff0c;laravel10以上 composer create-project laravel/laravel example-app或者&am…

(四)Node.js - npm与包

1. 什么是包 Node.js中的第三方模块又叫做包。 不同于Node.js中的内置模块与自定义模块&#xff0c;包是由第三方个人或团队开发出来的&#xff0c;免费供所有人使用。 由于Node.js的内置模块进提供了一些底层的API&#xff0c;导致在基于内置模块进行项目开发时&#xff0c…

【Linux后端服务器开发】poll/epoll多路转接IO服务器

目录 一、poll原理 二、poll实现多路转接IO服务器 三、epoll函数接口 四、epoll的工作原理 五、epoll实现多路转接IO服务器 一、poll原理 poll函数接口 #include <poll.h> int poll(struct pollfd *fds, nfds_t nfds, int timeout);// pollfd结构 struct pollfd …

使用Gunicorn+Nginx部署Flask项目

部署-开发机上的准备工作 确认项目没有bug。用pip freeze > requirements.txt将当前环境的包导出到requirements.txt文件中&#xff0c;方便部署的时候安装。将项目上传到服务器上的/srv目录下。这里以git为例。使用git比其他上传方式&#xff08;比如使用pycharm&#xff…

代码随想录算法训练营day25 | 216. 组合总和 III,17. 电话号码的字母组合

目录 216. 组合总和 III 17. 电话号码的字母组合 216. 组合总和 III 难度&#xff1a;medium 类型&#xff1a;回溯 思路&#xff1a; 与77组合类似的题目。 代码随想录算法训练营day24 | 回溯问题&#xff0c;77. 组合_Chamberlain T的博客-CSDN博客 注意两处剪枝。 代码…