Web3UIKit快速教程

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/>組件:

在這裏插入圖片描述


原文鏈接:32個Web3開發必備的UI組件 — 匯智網

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章