文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo

1 先上完成效果图 2 上代码（粘贴复制可以直接运行） import React, { useState } from 'react' import { Tree } from 'antd'; import...autoExpandParent, setAutoExpandParent] = useState(true); const [isRoot, setIsRoot] = useState(true)//控制主节点打开、关闭图标...{autoExpandParent} //是否自动展开父节点 onSelect={onSelect} //点击树节点触发 selectedKeys...设置选中的树节点 treeData={treeData} showIcon={true} blockNode //是否节点占据一行.../>} ) } export default IsTree; 上面树左侧的图片是调用antd里面的图片，如果想上传自己个人设计的图标可以参考这篇将展示如何更换高级自定义图标

98110

「前端组件化」以Antd为例，快速打通UI组件开发的任督二脉

如果刚开始不是很擅长设计参数，可以参考Antd的参数设计，Antd的组件丰富且功能强大，所以参数考虑的也很周全。边学边练，效果更佳。...我一般学习之前先做三方面准备：先明确组件要实现什么功能，比如输入框是否不可操作，是否回显数据等；然后看组件参数，把参数分为控制UI布局、控制内容展示、控制操作功能等几种；比如通过disabled的值控制输入框是否可以操作...不同展示类型，数值类、自定图标类、点状类。内容展示，标题、子标题、详情描述。rc-steps我在看Antd的源码时发现，有些组件底层用的第三方react-component中的组件。...自定义图标，参数icon表示步骤图标的类型，当它有值的时候，步骤条会显示成它的值。有两个特殊的图标：成功状态、失败状态，这两个状态的图标如果使用组件时没有进行自定义，会取内部定义的图标。...总结多看一些优秀的项目源码，可以帮助拓展开发思路，提升技术设计思维。现在有Antd等优秀的UI组件库，好像是不用重复造轮子了。但是奔着学习的目的，去开发一套UI组件还是可以帮助提升技术的。

2.3K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Ant Design 按钮和图标的使用

    ---- theme: smartblue highlight: vs2015 ---- 这是我参与8月更文挑战的第四天 活动详情查看：8月更文挑战 1.安装 很简单npm安装一下包就可以使用。...命令： npm install antd --save 或 yarn add antd 在package.json文件中可以找到对应的依赖，最新版本是4.16.10 2.引入按钮组件 首先需要引入...这也就是图标的使用 图标的使用请看另一篇文章 SearchOutlined是搜索的图标 import { SearchOutlined } from '@ant-design/icons';...可以为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置) }> <SearchOutlined...官网代码 4.1 点击 large、default、small 按钮变换所有按钮的大小 import { Button, Radio } from 'antd'; // 引入的图标 import {

    2.5K30

    从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载

    内容（点击展开/收起） 这一步我们来优化部分冗余的旧SVG图标被打包进去的情况，一般项目中SVG使用方式都是在iconfont生成JS然后引入。...这种做法 不直观，每次都得去iconfont复制名称使用 每次增删改图标需要重新替换整个JS 不能按需加载，没使用到的也会一起打包，特别是UI换图标时一般不会将旧图标删除.......这里去掉不常用和没用到的全局引入，改为页面内import()引入 ⚡优化Ant-design-icon体积 内容（点击展开/收起） 这一部分，由于我们在项目中只使用了几个Ant内置图标，不可能有530+.../src/icons/antd-icon.js') } } // src/icons/antd-icon.js export { default as LoadingOutline } from '...，不过需要调整一些配置 使用antd-dayjs-webpack-plugin[4] // vue.config.js const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin

    3.3K20

    给 Pokers 加上 HTML5 Web Notification

    antd.open_mes(0, antd.push.thread, antd.push.classid, 1); antd.opened_mes_info.thread_info...Notification.requestPermission().then(function(permission) { ... }); 新建推送通知： new Notification(title, options); /* dir 默认值是auto, 可以是...通知面板左侧那个图标地址。 data 任意类型和通知相关联的数据。 vibrate 通知显示时候，设备震动硬件需要的振动模式。 renotify 布尔值。新通知出现的时候是否替换之前的。...通知出现的时候，是否要有声音。默认false, 表示无声。 sound 字符串。音频地址。表示通知出现要播放的声音资源。 noscreen 布尔值。是否不再屏幕上显示通知信息。...是否通知具有粘性，这样用户不太容易清除通知。默认false, 表示没有粘性。

    63510

    Ant Design 是怎么管 Icon 的？

    Ant Design 的 Icon，是在"确定"和"自然"的设计价值观影响下的一套美观、一致、易用、便于延展的图标体系； 注：antd 设计价值观 https://ant.design/docs/spec...Ant Design 的 Icon 使用的是 SVG 格式图标； —— 《antd 官网》 注：为什么选 SVG 而不是 IconFont https://blog.github.com/2016-02...如何使用 antd 的 Icon？ 3.1. 常规用法 直接通过 的 type 和 theme 指定图标。 3.2. 引用 iconfont.cn 中的定制图标 3.3....自行引入 SVG 图标 标签也可以通过 component 引入自定义的 SVG React 组件； 注：svgr 可以完成 svg 文件到 react 组件的转换； 4....用途、目录结构 对外提供 Icon 接口； 整合 icons 和 icons-react，自动将 icons 中的所有 IconDefinition 注册到 icons-react 中，以便可以通过

    4.7K30

    技巧 - 快速定制生成 Ant Design 主题 CSS 文件

    温馨提示：因微信中外链都无法点击，请通过文末的 “阅读原文” 到技术博客中完整查阅版； 1、起因 因为项目的缘故，Antd 的样式 CSS 文件通过 link 标签引入，而该项目又要求自定义 Antd...2、寻找方案 自定义 CSS 样式主题的需求估计并不是我自己独有的，所以 就先到网上找找是否有现成的解决方案 。...LESS 主文件 随后自定义一份 LESS 文件，引入该主文件后，根据需求指定的样式变量进行覆盖 利用 lessc 工具最终编译出所需要的 CSS 文件 整个流程简单易操作，并且灵活度高，接下来我们具体展开看一下具体操作步骤和过程...4、小结 从上可看到整个过程一次就能上手，后续想要生成另外一份定制的 CSS 文件就更简单了： 修改自定义的 my-theme.less 文件中的样式变量 执行 lessc --js my-theme.less...REFERENCE 参考文档 antd live theme：在线工具，可以预览样式更改后的 antd ，相应说明文章参考 Ant Design , Live Theme Simple way

    3.1K20

    精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

    , 也可以组合其他组件.并且我们可以配置提醒框出现的位置，就像antd的组件一样，我们有左上，左下，右上，右下这几个位置可以配置，也可以配置基于这几个位置的偏移量。...通过这种渐进式的设计思路，能让我们逻辑更严谨，更清晰。具体代码如下： import Notification from 'rc-notification' import '....这点和antd的使用方式有点不同，笔者是把通知框类型放到pop的config来处理了，比如说要渲染一个成功的通知框，我们可以这么做： xNotification.pop({type: 'success'...icon图标部分采用笔者已经实现的Icon组件，具体用法和antd的Icon组件类似，如果想学习如何封装属于自己的Icon组件可以参考笔者源码。...，那么我们就可以根据用户传入的类型来展示不同icon图标了： <Icon type={iconType

    2K10

    Ant Design 4.0 正式版来了！

    此外，我们对阴影进行了调整，使其更符合真实阴影，也同时将信息层级更好体现。 ? 暗色主题 我们基于 v3 版本的色彩系统进行了升级，v4 提供了暗色主题。...因而我们提供了一种新的无边框样式，让开发者可以更简单的嵌入这些组件而不用额外覆盖样式。 ? 兼容性调整 Ant Design 3.0 为了兼容旧版 IE 做出了非常多的努力。...更小的尺寸 在 antd@3.9.0 中，我们引入了 svg 图标（为何使用 svg 图标？[3]）。...使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。...在 4.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少 antd 默认包体积约 150 KB(Gzipped)。

    3.3K30

    electron入门指南

    app.quit() } }) 如果想用Electron实现完美的跨平台一致体验，还要费不少功夫，甚至某些方面不可能做到一致（可能需要自己做一些C++模块来完成适配），就API体验来看，比ionic移动端跨平台更费劲...后发现npm scripts构建脚本很难解决自动引入css的问题（webpack可以添loader解决），暂时先拿cp顶着，后续考虑切换到webpack： "private:style": "cp -f...node_modules/antd/dist/antd.css build/antd.css; cp -rf app/css build/css" P.S.在安装依赖时，也会遇到electron下载超时的问题...有现成模块，相当好用： menubar 先获取托盘图标的位置，再根据窗口大小计算居中 2.系统托盘图标尺寸 For OS X, create icons: icon.png (for best results...摘自：Proper tray icon Mac顶部菜单栏高度是22px，可以用22px或者16px的png格式图标 P.S.gif格式图片不可以用做图标 3.Mac系统通知中文乱码 HTML需要通过meta

    1.6K30

    Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    项目使用 Umi 开发，Umi 是集成了 Antd Pro 的，但是在使用 ProLayout 生成菜单时遇到亿点点问题，记录一下。...在网上查了，其中有一个是菜单图标用的 他说自带的 icon 改造起来更麻烦，其实不是的。...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...遇到了使用 ProLayout 左侧菜单不显示、图标显示异常、点击菜单无反应等一系列问题。 如果本文对你有用，欢迎点赞、分享，也可以扫描文章左侧的二维码给我打赏，有任何问题可以在文章下方评论交流。...未经允许不得转载：w3h5-Web前端开发资源网 » Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    4.3K20

    Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    项目使用 Umi 开发，Umi 是集成了 Antd Pro 的，但是在使用 ProLayout 生成菜单时遇到亿点点问题，记录一下。...在网上查了，其中有一个是菜单图标用的 他说自带的 icon 改造起来更麻烦，其实不是的。...在 props 中可以取到 umirc.ts 中配置的信息，直接拿到 routes 。 这里的图标如果直接取官方的 type (如 HomeFilled )是不行的。...遇到了使用 ProLayout 左侧菜单不显示、图标显示异常、点击菜单无反应等一系列问题。 如果本文对你有用，欢迎点赞、分享，也可以扫描文章左侧的二维码给我打赏，有任何问题可以在文章下方评论交流。...未经允许不得转载：w3h5 » Uni&antd的ProLayout布局动态菜单实现及踩坑记录

    14.6K31

    Ant-Design-Vue 3.x 图标库如何实现自动引入？

    （打包工具的插件应该可以实现）； 当然可以直接在开始运行的时候导入整个图标模板，然后循环注册到Vue的组件，但是这样的缺点就是使用图标只能在模板内写死，例如： <message-outlined :style...* as $icon from '@ant-design/icons-vue'; /* * 自动引入antd icon图标 * */ export default { props:['icon'...，但也有不够用的时候，这时候就可以考虑，让这个JSX组件兼容 iconfont图标了； 众所周知，阿里巴巴图标库一般都是统一class前缀，@ant-design/icons-vue的名字则是五花八门，...如果传递的icon属性是icon开头，就渲染一个class位图标的i标签，其它的照常作为antd标签渲染；代码如下： import {h} from 'vue' import * as...$icon from '@ant-design/icons-vue'; import config from '@/config' /* * 自动引入antd icon图标 * */ export

    2.1K20

    使用React Buddy辅助React开发

    打开组件文件，然后按当前编辑器右上角的树图标。...树图标 大纲 大纲面板允许进行下列操作 点击跳转到指定的元素 拖拽排序元素节点 右键操作元素 操作元素 使用「生成处理程序」可以快速编写操作函数,例如onClick 生成处理程序 import React...,所以我取消勾选mui 调色板 打开调色板后就可以看到antd中的组件了 image-20240219161614169 如果出现下面的错误,是因为配置了ESlint规则,需要在/src/dev中的palette.jsx...和previews.jsx文件头部添加 import React from 'react'; 预览报错 再次查看后就可以看到 预览 结合刚才的「大纲」就可以直接拖拽调色板中的组件到当前文件中 例如拖拽.../button'; import { useForm } from 'antd/es/form/Form'; import { Form } from 'antd'; const MyComponent

    39510

    《精通reactvue组件设计》之5分钟实现一个Tag(标签)组件和Empty(空状态)组件

    由图可以知道tag组件可以自定义颜色主题(color theme), 可以手动关闭标签, 空状态主要是提供用户数据展示用的, 实现起来很简单,重点在图标的使用上. 1....基于react实现一个Tag组件 2.1. tag组件框架设计 首先我们先根据需求将组件框架写好,这样后面写业务逻辑会更清晰: import React from 'react' import classnames...text : '空空如也'} } 这里主要介绍icon-finder的由来.正如文章开始提到的,笔者采用icomoon作为图标库, 我们可以在其官网上定制自己的图标,笔者大概选了...可编辑图标,生成svg图标或者字体图标 ? 当然国内的iconfont也非常优秀,大家可以多尝试....笔者在这里就不多做介绍了, 其次我们也可以类似于antd一样,将icon封装成react的组件, 这样用起来也非常方便.

    1.4K20

    精通ReactVue系列之实现一个全局提示(Message)组件

    每一个区块都可以自定义配置, 也可以组合其他组件.我们还可以配置全局提示出现在顶部的偏移量，类似于antd的组件一样。...通知提醒框(Message)组件一般会有如下需求点: 能控制Message自动关闭的时间 能配置Message渲染节点的输出位置 能自定义关闭图标 可以手动选择全局提示类型 能自定义全局提示的偏移量 能设置全局提示的信息文本...通过这种渐进式的设计思路，能让我们逻辑更严谨，更清晰。具体代码如下： import Notification from 'rc-notification' import '....antd同样的方式会这么调用： // antd Notification.info({//...})...，那么我们就可以根据用户传入的类型来展示不同icon图标了： <Icon type={iconType

    3.6K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券