ปุ่มเชื่อมต่อ

การใช้และการปรับแต่งปุ่มเชื่อมต่อ

นี่คือคอมโพเนนต์หลัก มันมีหน้าที่ในการแสดงปุ่มเชื่อมต่อ/ยกเลิกการเชื่อมต่อ รวมไปถึง UI สำหรับการสลับโซ่ด้วย

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

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

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

คอมโพเนนต์ ConnectButton เปิดเผยหลาย prop เพื่อปรับแต่งลักษณะการแสดงผล รวมถึงการแสดงผลวัตถุที่แตกต่างกัน

Prop	Type	Default
`label`	`string`	`เชื่อมต่อกระเป๋าเงิน`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

หมายเหตุ: จุดแบ่งหน้าจอแบบ largeScreen ที่ฝังในระบบคือ 768px

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

<ConnectButton label="Sign in" />

นี่คือวิธีต่างๆ ที่คุณสามารถใช้ prop accountStatus

แสดงเฉพาะอวาตาร์ของบัญชีเท่านั้น

<ConnectButton accountStatus="avatar" />

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

<ConnectButton accountStatus="address" />

นี่คือวิธีต่างๆ ที่คุณสามารถใช้ prop chainStatus

แสดงเฉพาะไอคอนของโซ่ปัจจุบันเท่านั้น

<ConnectButton chainStatus="icon" />

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

<ConnectButton chainStatus="name" />

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

<ConnectButton chainStatus="none" />

ใช้ prop showBalance เพื่อซ่อน/แสดงยอดเงินคงเหลือ

ซ่อนยอดเงินคงเหลือ

<ConnectButton showBalance={false} />

คุณสมบัติเหล่านี้ยังสามารถกำหนดรูปแบบที่ตอบสนองได้

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

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

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

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