GitHub地址以及demo地址见页尾!
Web3UIKit适用于 web3 开发人员快速开发美观的用户界面,包含超过30种在去中心化应用(DApp) 中常用的轻量级UI组件。无论构建在哪个区块链上,Web3UIKit都可以提高你的 dapp 开发效率。
Web3UIKit 包括Web3组件、UI组件、交互组件、弹窗组件等几个大类,清单如下:
- Web3组件
<ConnectButton />
<NFT />
- UI组件
<Accordion />
<Avatar />
<Badge />
<BannerStrip />
<Breadcrumbs />
<Card />
<CryptoCards />
<CryptoLogos />
<Icon />
<Illustration />
<Information />
<LinkTo />
<Logo />
<Notification />
<Table />
<Tag />
<Todo />
<Widget />
- 交互组件
<Button />
<Checkbox />
<CodeArea />
<Credentials />
<Form />
<Input />
<Radios />
<Select />
<TextArea />
- 弹窗组件
<Modal />
<Tooltip />
1、Web3UIKit快速上手
使用NPM安装:
1 |
npm install web3uikit |
或者使用yarn安装:
1 |
yarn web3uikit |
Web3UIKit包含超过30种Web3应用中常见的轻量化UI组件,例如使用CryptoCards组件和Button组件:
1 2 3 4 5 6 7 8 |
import { CryptoCards, Button } from 'web3uikit'; const App = () => ( <> <CryptoCards chain="ethereum" /> <Button theme="primary" type="button" text="Launch Dapp" /> </> ); |
2、Web3UIKit接入区块链按钮组件 - ConnectButton
<ConnectButton/>
组件:
ConnectButton组件允许你在服务器初始化的情况下使web3 验证用户。当服务器未初始化时,或者例如你有 <MoralisProvider initializeOnMount={false} >
但不想将 Moralis 服务器连接到前端,智能组件将调用enableWeb3()
。
如果想将此组件与连接的服务器一起使用,但不向 Moralis 数据库添加用户,则可以添加moralisAuth道具
ConnectButton 组件会自动添加有关连接器用户使用的本地存储信息,并在重新刷新页面后自动调用 enableWeb3()。因此, 如果用户一旦连接,它将自动初始化 web3 连接(刷新页面后无需再为 enableWeb3() 添加 UseEffect 挂钩)
3、Web3UIKit NFT组件 - NFT
<NFT/>
组件:
NFT组件允许你将单个 NFT 显示为卡片。通过点击卡片,还可以查看 NFT 的所有特征。它使用来自react-moralis 的钩子 来获取 NFT。
如果想使用此组件,请使用<MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >
。 请在此处阅读有关Moralis的更多信息。
4、Web3UIKit NFT余额组件 - NFTBalance
<NFTBalance/>
组件:
NFTBalance组件允许你显示地址拥有的所有 NFT。它使用来自react-moralis 的钩子来获取地址的所有 NFT。
如果想使用此组件,请使用<MoralisProvider appId={MORALIS_APP_ID} serverUrl={MORALIS_SERVER_URL} ></MoralisProvider >
。
5、Web3UIKit 手风琴组件 -Accordion
<Accordion/>
组件:
Accordion组件是一个很好的用户界面元素,可以方便地显示和隐藏文本或其他组件,因此不会因太多内容让用户无所适从。
6、Web3UIKit 头像组件 - Avatar
<Avatar/>
组件:
Avatar组件可以显示用户的头像化身。
7、Web3UIKit 徽章组件 - Badge
<Badge/>
组件:
8、Web3UIKit 条幅组件 -BannerStrip
<BannerStrip/>
组件:
9、Web3UIKit 面包条导航组件 - Breadcrumbs
<Breadcrumbs/>
组件:
10、Web3UIKit 卡片组件 - Card
<Card/>
组件:
11、Web3UIKit Crypto卡片组件 -CryptoCards
<CryptoCards/>
组件:
12、Web3UIKit Crypto徽标组件 - CryptoLogos
<CryptoLogos/>
组件:
13、Web3UIKit 图标组件 - Icon
<Icon/>
组件:
14、Web3UIKit 插画组件 - Illustration
<Illustration/>
组件:
15、Web3UIKit 信息栏组件 - Information
<Information/>
组件:
16、Web3UIKit 链接组件 - LinkTo
<LinkTo/>
组件是一个简单的链接组件,可用于导航到另一个页面或另一个组件。
17、Web3UIKIt 徽标组件 - Logo
<Logo/>
组件是一个简单的徽标组件,具有可用于任何布局的moralis 或其他图标。
18、Web3UIKit 通知组件 - Notification
<Notification/>
组件:
要调用Notification组件,请使用useNotification()
钩子。例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const App = () => { const dispatch = useNotification(); const handleNewNotification = () => { dispatch({ type: 'info', message: 'Somebody messaged you', title: 'New Notification', icon, position: position || 'topR', }); }; return ( <> <Button text="Error" onClick={handleNewNotification} theme="colored" color="red" isFullWidth={true} /> </> ); }; |
要求应用程序必须在<NotificationProvider>
内,例如:
1 2 3 |
<NotificationProvider> <App /> <NotificationProvider> |
19、Web3UIKit 表格组件- Table
<Table/>
组件:
20、Web3UIKit 标签组件 - Tag
<Tag/>
组件:
21、Web3UIKit 待办组件 - Todo
<Todo/>
组件:
22、Web3UIKit 小部件组件 - Widget
<Widget/>
组件:
23、Web3UIKit 按钮组件 - Button
<Button/>
组件:
24、Web3UIKit 选择框组件 - Checkbox
<Checkbox/>
组件:
25、Web3UIKit 代码块组件 - Code
<Code/>
组件:
26、Web3UIKit 密文组件 - Credentials
<Credentials/>
组件:
27、Web3UIKit 表单组件 - Form
<Form/>
组件:
28、Web3UIKit 输入组件 - Input
<Input/>
组件:
29、Web3UIKit 单选按钮组件 - Radios
<Radios/>
组件:
30、Web3UIKit 下拉选择框组件 - Select
<Select/>
组件:
31、Web3UIKit 多行文本组件 - TextArea
<TextArea/>
组件:
32、Web3UIKit 模态对话框组件 - Modal
<Modal/>
组件:
33、Web3UIKit 提示信息组件 - Tooltip
<Tooltip/>
组件:
demo
Webpack Apphttps://web3ui.github.io/web3uikit/?path=/story/1-web3-blockie--custom-seed