زر الاتصال

زر الاتصال

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

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

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

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

ملاحظة: تأكد من أن تطبيقك مغلف في المُزودين الضروريين. اقرأ المزيد.

المكون ConnectButton يوفر عدة خصائص لتخصيص مظهره، بما في ذلك تغيير رؤية بعض العناصر.

ملاحظة: نقطة التوقف لشاشة كبيرة المُدمجة هي 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,
  }}
/>