Butang Sambung

Butang Sambung

Menggunakan dan menyesuaikan ConnectButton

Ini adalah komponen utama. Ia bertanggungjawab untuk memaparkan butang sambung/padam, serta pertukaran UI rangkaian.

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

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

Nota: Pastikan aplikasi anda dibalut dengan penyedia yang perlu. Baca lagi.

Komponen ConnectButton menyediakan beberapa prop untuk menyesuaikan penampilannya, termasuk menukar kebolehlihatan elemen yang berbeza.

Nota: titik pemecah largeScreen terbina dalam adalah 768px.

Gunakan prop label untuk menetapkan teks ConnectButton tersuai.

<ConnectButton label="Sign in" />

Berikut adalah beberapa cara berbeza anda boleh menggunakan prop accountStatus.

Hanya paparkan avatar akaun.

<ConnectButton accountStatus="avatar" />

Hanya paparkan alamat akaun.

<ConnectButton accountStatus="address" />

Berikut adalah beberapa cara berbeza anda boleh menggunakan prop chainStatus.

Hanya paparkan ikon rantai semasa.

<ConnectButton chainStatus="icon" />

Hanya paparkan nama rantai semasa.

<ConnectButton chainStatus="name" />

Sembunyikan keseluruhan UI rantai.

<ConnectButton chainStatus="none" />

Gunakan prop showBalance untuk sembunyi/papar baki.

Sembunyikan baki.

<ConnectButton showBalance={false} />

Prop ini juga boleh ditakrifkan dalam format responsif.

Pada skrin kecil, hanya paparkan ikon akaun. Tetapi pada skrin besar, paparkan ikon dan alamat.

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

Pada skrin kecil, sembunyikan baki. Tetapi pada skrin besar, tunjukkan ia.

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