Material Design icons图标的使用,npm下载及react+typescript引用方式import

下载:
npm install material-design-icons

引用:

import 'material-design-icons/iconfont/material-icons.css';

使用:在官网
https://material.io/resources/icons/?style=baseline
中找到要使用的图标 例如undo
在这里插入图片描述
复制到要使用图标的位置 例如 content:‘undo’,

toolbar:[{
            type:"i",//图标
            content:'undo',
            onclick:function(){
                el.undo();//上一步
            }
         }]
        

运行结果:左上角就显示图标啦
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我会尽力帮您解决问题。 首先,我们需要先在React中创建一个组件来展示树形结构,可以使用Ant Design的Tree组件。 然后,我们需要在组件中添加一个搜索框,让用户可以输入关键词来过滤树形结构。 最后,我们需要编写过滤函数,对树形结构进行过滤并展示符合要求的节点。 以下是一个简单的实现示例: ```typescript import React, { useState } from "react"; import { Tree, Input } from "antd"; import { SearchOutlined } from "@ant-design/icons"; import { TreeProps } from "antd/lib/tree"; const { Search } = Input; interface ITreeNode { title: string; key: string; children?: ITreeNode[]; } interface IProps extends TreeProps { treeData: ITreeNode[]; } const FilterTree: React.FC<IProps> = ({ treeData, ...props }) => { const [expandedKeys, setExpandedKeys] = useState<string[]>([]); const [searchValue, setSearchValue] = useState(""); const onExpand = (expandedKeys: string[]) => { setExpandedKeys(expandedKeys); }; const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { const { value } = e.target; setSearchValue(value); }; const filterTree = (data: ITreeNode[], keyword: string): ITreeNode[] => { return data.reduce((acc: ITreeNode[], node: ITreeNode) => { if (node.title.toLowerCase().includes(keyword.toLowerCase())) { acc.push(node); } else if (node.children) { const children = filterTree(node.children, keyword); if (children.length) { acc.push({ ...node, children }); } } return acc; }, []); }; const filteredData = filterTree(treeData, searchValue); return ( <> <Search placeholder="Search" prefix={<SearchOutlined />} onChange={onChange} style={{ marginBottom: 8 }} /> <Tree {...props} expandedKeys={expandedKeys} onExpand={onExpand} treeData={filteredData} /> </> ); }; export default FilterTree; ``` 上述代码中,我们定义了一个 `FilterTree` 组件,其中包含一个搜索框和一个Ant Design的Tree组件。我们使用 `useState` 来管理展开的节点和搜索关键字,然后编写了一个 `filterTree` 函数来过滤树形结构。 在 `onChange` 函数中,我们使用 `setSearchValue` 更新搜索关键字,并在 `filterTree` 函数中根据搜索关键字来过滤节点。 最后,我们将过滤后的节点作为 `Tree` 组件的数据源,渲染出符合要求的节点。 使用时,我们只需要将树形结构传入 `FilterTree` 组件中即可: ```typescript const treeData = [ { title: "Node 1", key: "1", children: [ { title: "Child Node 1", key: "1-1", }, { title: "Child Node 2", key: "1-2", }, ], }, { title: "Node 2", key: "2", children: [ { title: "Child Node 3", key: "2-1", }, { title: "Child Node 4", key: "2-2", }, ], }, ]; <FilterTree treeData={treeData} /> ``` 这样就可以实现搜索过滤已知树形结构的功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值