Web3UIKit適用於 web3 開發人員快速開發美觀的用戶界面,包含超過30種在去中心化應用(DApp) 中常用的輕量級UI組件。無論構建在哪個區塊鏈上,Web3UIKit都可以提高你的 dapp 開發效率。
用熟悉的語言學習 以太坊DApp開發 : Java | Php | Python | .Net / C# | Golang | Node.JS | Flutter / Dart
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安裝:
npm install web3uikit
或者使用yarn安裝:
yarn web3uikit
Web3UIKit包含超過30種Web3應用中常見的輕量化UI組件,例如使用CryptoCards組件和Button組件:
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()
鉤子。例子:
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>
內,例如:
<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/>
組件: