زر الاتصال

استخدام وتخصيص زر الاتصال

هذا هو المكون الرئيسي. إنه مسؤول عن عرض زر الاتصال/قطع الاتصال، بالإضافة إلى واجهة تبديل السلاسل.

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.

إظهار أيقونة السلسلة الحالية فقط.

<ConnectButton chainStatus="icon" />

إظهار اسم السلسلة الحالية فقط.

<ConnectButton chainStatus="name" />

إخفاء واجهة المستخدم الخاصة بالسلسلة بالكامل.

<ConnectButton chainStatus="none" />

استخدم خاصية showBalance لإخفاء/عرض الرصيد.

إخفاء الرصيد.

<ConnectButton showBalance={false} />

يمكن تعريف هذه الخصائص أيضًا بتنسيق مرن.

على الشاشات الصغيرة، إظهار أيقونة الحساب فقط. لكن على الشاشات الكبيرة، إظهار الأيقونة والعنوان.

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

على الشاشات الصغيرة، إخفاء الرصيد. لكن على الشاشات الكبيرة، إظهاره.

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