ConnectButton

การใช้และปรับแต่ง ConnectButton

นี่คือส่วนประกอบหลัก นี่คือส่วนประกอบหลัก มีหน้าที่ในการแสดงผลปุ่มเชื่อมต่อ/ยกเลิกการเชื่อมต่อ รวมถึง UI การสลับ chain

import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};

หมายเหตุ: ตรวจสอบให้แน่ใจว่าแอปของคุณถูกห่อด้วยผู้ให้บริการที่จำเป็น อ่านเพิ่มเติม. อ่านเพิ่มเติม.

องค์ประกอบ ConnectButton เผยพร็อพหลายตัวให้กำหนดลักษณะของมัน ซึ่งรวมถึงการแสดง/ซ่อนขององค์ประกอบต่างๆ

Prop	Type	Default
`label`	`string`	`Connect Wallet`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

หมายเหตุ: ขนาดการแบ่งจอที่กำหนดในตัวของ largeScreen คือ 768px

ใช้พร็อพ label เพื่อกำหนดข้อความ ConnectButton เอง

<ConnectButton label="Sign in" />

นี่คือบางวิธีที่คุณสามารถใช้พร็อพ accountStatus

แสดงเฉพาะอวตารของบัญชี

<ConnectButton accountStatus="avatar" />

แสดงเฉพาะที่อยู่ของบัญชี

<ConnectButton accountStatus="address" />

นี่คือบางวิธีที่คุณสามารถใช้พร็อพ chainStatus

แสดงเฉพาะไอคอนของ chain ปัจจุบัน

<ConnectButton chainStatus="icon" />

แสดงเฉพาะชื่อของ chain ปัจจุบัน

<ConnectButton chainStatus="name" />

ซ่อน UI ของ chain ทั้งหมด

<ConnectButton chainStatus="none" />

ใช้พร็อพ showBalance เพื่อซ่อน/แสดงยอดเงิน

ซ่อนยอดเงิน

<ConnectButton showBalance={false} />

พร็อพเหล่านี้ยังสามารถกำหนดในรูปแบบการตอบสนองได้

บนหน้าจอขนาดเล็ก แสดงเฉพาะไอคอนบัญชี แต่ในหน้าจอขนาดใหญ่ แสดงไอคอนและที่อยู่ แต่ในหน้าจอขนาดใหญ่ แสดงไอคอนและที่อยู่

<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>

บนหน้าจอขนาดเล็ก ซ่อนยอดเงิน บนหน้าจอขนาดเล็ก ซ่อนยอดเงิน แต่บนหน้าจอขนาดใหญ่ แสดงมัน

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>