超过30个Web3开发必备UI组件

Web3UIKit适用于 web3 开发人员快速开发美观的用户界面&＃xff0c;包含超过30种在去中心化应用&＃xff08;DApp&＃xff09;
中常用的轻量级UI组件。无论构建在哪个区块链上&＃xff0c;Web3UIKit都可以提高你的 dapp 开发效率。

用熟悉的语言学习 以太坊DApp开发 &＃xff1a; Java | Php | Python | .Net / C# | Golang | Node.JS | Flutter / Dart

Web3UIKit 包括Web3组件、UI组件、交互组件、弹窗组件等几个大类&＃xff0c;清单如下&＃xff1a;

• Web3组件
• UI组件
  • 交互组件

    • </code></li></ul> </li><li>弹窗组件 <ul><li><code><Modal /></code></li><li><code><Tooltip /></code></li></ul> </li></ul> <br><h2>1、Web3UIKit快速上手</h2> <p>使用NPM安装:</p> <p><code>npm install web3uikit<br></code></pre> <p>或者使用yarn安装&＃xff1a;</p> <p><code>yarn web3uikit<br></code></pre> <p>Web3UIKit包含超过30种Web3应用中常见的轻量化UI组件&＃xff0c;例如使用CryptoCards组件和Button组件&＃xff1a;</p> <p><code>import { CryptoCards, Button } from &＃39;web3uikit&＃39;;const App &＃61; () &＃61;> (<><CryptoCards chain&＃61;"ethereum" /><Button theme&＃61;"primary" type&＃61;"button" text&＃61;"Launch Dapp" /></><br>);<br></code></pre> <br><h2>2、Web3UIKit接入区块链按钮组件 - ConnectButton</h2> <p><code><ConnectButton/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/f03798247aee8d63.png" alt="在这里插入图片描述" /></p> <p>ConnectButton组件允许你在服务器初始化的情况下使web3 验证用户。当服务器未初始化时&＃xff0c;或者例如你有<code><MoralisProvider initializeOnMount&＃61;{false} ></code>但不想将 Moralis 服务器连接到前端&＃xff0c;智能组件将调用<code>enableWeb3()</code>。</p> <p>如果想将此组件与连接的服务器一起使用&＃xff0c;但不向 Moralis 数据库添加用户&＃xff0c;则可以添加moralisAuth道具</p> <p>ConnectButton 组件会自动添加有关连接器用户使用的本地存储信息&＃xff0c;并在重新刷新页面后自动调用 enableWeb3()。因此&＃xff0c;如果用户一旦连接&＃xff0c;它将自动初始化 web3 连接&＃xff08;刷新页面后无需再为 enableWeb3() 添加 UseEffect 挂钩&＃xff09;</p> <br><h2>3、Web3UIKit NFT组件 - NFT</h2> <p><code><NFT/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/600822f009cbe462.png" alt="在这里插入图片描述" /></p> <p>NFT组件允许你将单个 NFT 显示为卡片。通过点击卡片&＃xff0c;还可以查看 NFT 的所有特征。它使用来自react-moralis 的钩子来获取 NFT。</p> <p>如果想使用此组件&＃xff0c;请使用<code><MoralisProvider appId&＃61;{MORALIS_APP_ID} serverUrl&＃61;{MORALIS_SERVER_URL} ></MoralisProvider ></code>。<br /> 请在此处阅读有关Moralis的更多信息。</p> <br><h2>4、Web3UIKit NFT余额组件 - NFTBalance</h2> <p><code><NFTBalance/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/3c31ef428a0c536d.png" alt="在这里插入图片描述" /></p> <p>NFTBalance组件允许你显示地址拥有的所有 NFT。它使用来自react-moralis 的钩子来获取地址的所有 NFT。</p> <p>如果想使用此组件&＃xff0c;请使用<code><MoralisProvider appId&＃61;{MORALIS_APP_ID} serverUrl&＃61;{MORALIS_SERVER_URL} ></MoralisProvider ></code>。</p> <br><h2>5、Web3UIKit 手风琴组件 -Accordion</h2> <p><code><Accordion/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/f35149f7a306e491.png" alt="在这里插入图片描述" /></p> <p>Accordion组件是一个很好的用户界面元素&＃xff0c;可以方便地显示和隐藏文本或其他组件&＃xff0c;因此不会因太多内容让用户无所适从。</p> <br><h2>6、Web3UIKit 头像组件 - Avatar</h2> <p><code><Avatar/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/c3ae0ad2d645a81f.png" alt="在这里插入图片描述" /></p> <p>Avatar组件可以显示用户的头像化身。</p> <br><h2>7、Web3UIKit 徽章组件 - Badge</h2> <p><code><Badge/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/9066398acc43b056.png" alt="在这里插入图片描述" /></p> <br><h2>8、Web3UIKit 条幅组件 -BannerStrip</h2> <p><code><BannerStrip/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/d26caabdb7d7f2b7.png" alt="在这里插入图片描述" /></p> <br><h2>9、Web3UIKit 面包条导航组件 - Breadcrumbs</h2> <p><code><Breadcrumbs/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/96e7ece2f39fabd2.png" alt="在这里插入图片描述" /></p> <br><h2>10、Web3UIKit 卡片组件 - Card</h2> <p><code><Card/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/0c3da6fc9e276654.png" alt="在这里插入图片描述" /></p> <br><h2>11、Web3UIKit Crypto卡片组件 -CryptoCards</h2> <p><code><CryptoCards/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/871f8f499e638cd8.png" alt="在这里插入图片描述" /></p> <br><h2>12、Web3UIKit Crypto徽标组件 - CryptoLogos</h2> <p><code><CryptoLogos/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/75dce73330cf87b5.png" alt="在这里插入图片描述" /></p> <br><h2>13、Web3UIKit 图标组件 - Icon</h2> <p><code><Icon/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/0bac34bfb60914ac.png" alt="在这里插入图片描述" /></p> <br><h2>14、Web3UIKit 插画组件 - Illustration</h2> <p><code><Illustration/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/50670df32ce980e7.png" alt="在这里插入图片描述" /></p> <br><h2>15、Web3UIKit 信息栏组件 - Information</h2> <p><code><Information/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/6d85f382547e0967.png" alt="在这里插入图片描述" /></p> <br><h2>16、Web3UIKit 链接组件 - LinkTo</h2> <p><code></code>组件是一个简单的链接组件&＃xff0c;可用于导航到另一个页面或另一个组件。</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/446a8e10e2e0e80a.png" alt="在这里插入图片描述" /></p> <br><h2>17、Web3UIKIt 徽标组件 - Logo</h2> <p><code><Logo/></code>组件是一个简单的徽标组件&＃xff0c;具有可用于任何布局的moralis 或其他图标。</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/fad5e05925697856.png" alt="在这里插入图片描述" /></p> <br><h2>18、Web3UIKit 通知组件 - Notification</h2> <p><code><Notification/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/acfd21d84cb58885.png" alt="在这里插入图片描述" /></p> <p>要调用Notification组件&＃xff0c;请使用<code>useNotification()</code>钩子。例子&＃xff1a;</p> <p><code>const App &＃61; () &＃61;> {const dispatch &＃61; useNotification();const handleNewNotification &＃61; () &＃61;> {dispatch({type: &＃39;info&＃39;,message: &＃39;Somebody messaged you&＃39;,title: &＃39;New Notification&＃39;,icon,position: position || &＃39;topR&＃39;,});};return (<><Buttontext&＃61;"Error"onClick&＃61;{handleNewNotification}theme&＃61;"colored"color&＃61;"red"isFullWidth&＃61;{true}/></>);<br>};<br></code></pre> <p>要求应用程序必须在<code><NotificationProvider></code>内&＃xff0c;例如&＃xff1a;</p> <p><code><NotificationProvider><App /><br><NotificationProvider><br></code></pre> <br><h2>19、Web3UIKit 表格组件- Table</h2> <p><code><Table/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/cc4925d7453f1b91.png" alt="在这里插入图片描述" /></p> <br><h2>20、Web3UIKit 标签组件 - Tag</h2> <p><code><Tag/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/7446078da26eb4a8.png" alt="在这里插入图片描述" /></p> <br><h2>21、Web3UIKit 待办组件 - Todo</h2> <p><code><Todo/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/7a77fea82d8f86db.png" alt="在这里插入图片描述" /></p> <br><h2>22、Web3UIKit 小部件组件 - Widget</h2> <p><code><Widget/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/3aaa865599c9b24b.png" alt="在这里插入图片描述" /></p> <br><h2>23、Web3UIKit 按钮组件 - Button</h2> <p><code><Button/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/c65740ea08fd716e.png" alt="在这里插入图片描述" /></p> <br><h2>24、Web3UIKit 选择框组件 - Checkbox</h2> <p><code><Checkbox/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/bd10d67ee3fc5db5.png" alt="在这里插入图片描述" /></p> <br><h2>25、Web3UIKit 代码块组件 - Code</h2> <p><code><Code/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/6b03cd95ea5fb3b7.png" alt="在这里插入图片描述" /></p> <br><h2>26、Web3UIKit 密文组件 - Credentials</h2> <p><code><Credentials/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/c25273c3cf90829b.png" alt="在这里插入图片描述" /></p> <br><h2>27、Web3UIKit 表单组件 - Form</h2> <p><code></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/c0485dc26da1cddc.png" alt="在这里插入图片描述" /></p> <br><h2>28、Web3UIKit 输入组件 - Input</h2> <p><code><Input/></code>组件&＃xff1a;</p> <br><h2>29、Web3UIKit 单选按钮组件 - Radios</h2> <p><code><Radios/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/2f984338383d417e.png" alt="在这里插入图片描述" /></p> <br><h2>30、Web3UIKit 下拉选择框组件 - Select</h2> <p><code><Select/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/d23910eb6d1fb297.png" alt="在这里插入图片描述" /></p> <br><h2>31、Web3UIKit 多行文本组件 - TextArea</h2> <p><code><TextArea/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/331b60d689e00912.png" alt="在这里插入图片描述" /></p> <br><h2>32、Web3UIKit 模态对话框组件 - Modal</h2> <p><code><Modal/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/94c7f221061ff4a7.png" alt="在这里插入图片描述" /></p> <br><h2>33、Web3UIKit 提示信息组件 - Tooltip</h2> <p><code><Tooltip/></code>组件&＃xff1a;</p> <p><img src="https://img8.php1.cn/3cdc5/12ab6/78c/f37b8ae194b59658.png" alt="在这里插入图片描述" /></p> <br><hr /> <p>原文链接&＃xff1a;32个Web3开发必备的UI组件 — 汇智网</p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/web" target="_blank" title="web">web</a></li> <li><a href="https://www.php1.cn/tag/区块链" target="_blank" title="区块链">区块链</a></li> <li><a href="https://www.php1.cn/tag/以太坊" target="_blank" title="以太坊">以太坊</a></li> <li><a href="https://www.php1.cn/tag/java" target="_blank" title="java">java</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/python" target="_blank" title="python">python</a></li> <li><a href="https://www.php1.cn/tag/c#" target="_blank" title="c#">c#</a></li> <li><a href="https://www.php1.cn/tag/go" target="_blank" title="go">go</a></li> <li><a href="https://www.php1.cn/tag/node.js" target="_blank" title="node.js">node.js</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

      会员登录 | 用户注册
      推荐阅读

      • text

        前端库Bootstrap框架：「11]使用 span 创建行内元素

        

        前端库Bootstrap框架：「11]使用 span 创建行内元素 ... [详细]

        蜡笔小新   2023-10-15 11:37:25
      • js

        关于extjs开发实战pdf的信息

        

        本文目录一览：1、extjs实用开发指南2、本 ... [详细]

        蜡笔小新   2023-10-17 13:23:21
      • js

        php至少选一个,php选择题及答案

        

        本文目录一览：1、复选框怎样实现至少选一项。PHP ... [详细]

        蜡笔小新   2023-10-13 11:15:26
      • const

        Java序列化对象传给PHP的方法及原理解析

        

        本文介绍了Java序列化对象传给PHP的方法及原理，包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用，以及代码执行序列化所需要的权限。最后指出，序列化会将对象实例的所有字段都进行序列化，使得数据能够被表示为实例的序列化数据，但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]

        蜡笔小新   2023-12-14 15:25:15
      • js

        如何使用Java获取服务器硬件信息和磁盘负载率

        

        本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务，并获取服务器的磁盘信息，并将结果输出。然后在本地使用JS编写一个AJAX脚本，远程请求服务端的程序，得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]

        蜡笔小新   2023-12-14 13:56:20
      • js

        Thrift教程初级篇——RPC框架Thrift的安装环境变量配置与第一个实例

        本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例，讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快，性能和稳定性也不错，适合初学者学习和使用。 ... [详细]

        蜡笔小新   2023-12-13 17:36:52
      • text

        绕过WAF的XSS检测机制及构建XSS payload的方法

        本文介绍了绕过WAF的XSS检测机制的方法，包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法，该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型（DOM）接收器和源、实施适当的跨域资源共享（CORS）策略和其他安全策略，可以有效阻止XSS漏洞。但是，WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制，构建与正则表达式不匹配的XSS payload。 ... [详细]

        蜡笔小新   2023-12-11 19:42:30
      • js

        React基础篇一 - JSX语法扩展与使用

        

        本文介绍了React基础篇一中的JSX语法扩展与使用。JSX是一种JavaScript的语法扩展，用于描述React中的用户界面。文章详细介绍了在JSX中使用表达式的方法，并给出了一个示例代码。最后，提到了JSX在编译后会被转化为普通的JavaScript对象。 ... [详细]

        蜡笔小新   2023-12-11 11:37:05
      • replace

        PHP对于建括号字符过滤的问题

        有几百条数据类似*Oct1809:46:09:%NFPP_IP_GUARD-4-DOS_DETECTED:Host<IP60.12.174.45,MACNA,portGi2 ... [详细]

        蜡笔小新   2023-10-15 15:30:17
      • js

        前端判断登陆页面输入是否符合要求

        前端判断登陆页面输入是否符合要求 ... [详细]

        蜡笔小新   2023-10-14 14:34:15
      • text

        HTML DOM 教程Part4 [DOM 表单对象] 摘录自W3C School

        

        HTMLDOMImage对象Image对象的属性标准属性Image对象的事件句柄HTMLDOMButton对象Button对象代表HTML文档中的一个按钮。该元素没有默认的行为&# ... [详细]

        蜡笔小新   2023-10-13 13:58:22
      • js

        开发笔记:jquery1.6中的.prop()和.attr()异同

        

        本文由编程笔记#小编为大家整理，主要介绍了jquery1.6中的.prop()和.attr()异同相关的知识，希望对你有一定的参考价值。最近在iteye的新闻中看到jQuery ... [详细]

        蜡笔小新   2023-10-13 11:28:04
      • js

        Java日期格式化总结及示例代码

        本文总结了Java中日期格式化的常用方法，并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库，可以实现日期的格式化和显示。在页面中添加相应的标签库引用后，可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]

        蜡笔小新   2023-12-14 18:18:57
      • search

        Python爬虫中使用正则表达式的方法和注意事项

        

        本文介绍了在Python爬虫中使用正则表达式的方法和注意事项。首先解释了爬虫的四个主要步骤，并强调了正则表达式在数据处理中的重要性。然后详细介绍了正则表达式的概念和用法，包括检索、替换和过滤文本的功能。同时提到了re模块是Python内置的用于处理正则表达式的模块，并给出了使用正则表达式时需要注意的特殊字符转义和原始字符串的用法。通过本文的学习，读者可以掌握在Python爬虫中使用正则表达式的技巧和方法。 ... [详细]

        蜡笔小新   2023-12-12 11:51:07
      • char

        PDO MySQL

        

        PDOMySQL如果文章有成千上万篇，该怎样保存？数据保存有多种方式，比如单机文件、单机数据库（SQLite）、网络数据库（MySQL、MariaDB）等等。根据项目来选择，做We ... [详细]

        蜡笔小新   2023-12-12 10:25:39
      

      手机用户2502879933

      这个家伙很懒，什么也没留下！

      Tags | 热门标签

      • request
      • regex
      • actionscrip
      • cmd
      • c语言
      • timezone
      • scala
      • go
      • hashcode
      • case
      • command
      • httpclient
      • replace
      • select
      • default
      • php7
      • typescript
      • text
      • dockerfile
      • rsa
      • string
      • httprequest
      • foreach
      • const
      • char
      • bash
      • search
      • blob
      • js
      • shell

      RankList | 热门文章

      • 1JavaScript进化：从迁徙到TypeScript
      • 2深入理解Java虚拟机的并发编程与性能优化
      • 3FormData上传文件同时附带其他参数的方法
      • 4如何修改MySQL数据库密码的方法及步骤详解
      • 5elasticsearch ES中使用脚本(script)
      • 6微信小程序导航跟随的实现方法
      • 7.NetCoreWebApi生成Swagger接口文档的使用方法
      • 8交换型网络环境下的嗅探器ARPSniffer的使用方法
      • 9OpenMap教程4 – 图层概述
      • 10springboot启动不了_Spring Boot + MyBatis 多模块搭建教程
      • 11ASP.global_asax不存在于命名空间ASP中的问题
      • 12Python项目实战10.2：MySQL读写分离性能优化
      • 13Sleuth+zipkin链路追踪SpringCloud微服务的解决方案
      • 142021最新总结网易/腾讯/CVTE/字节面经分享（附答案解析）
      • 15PostgreSQL OR条件
      PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
      Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有