ButangSambung

ButangSambung

Menggunakan dan menyesuaikan ButangSambung

Ini adalah komponen utama. Ia bertanggungjawab untuk memaparkan butang sambung/putus sambungan, serta UI pertukaran rantaian.

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

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

Nota: Pastikan aplikasi anda dibungkus dalam penyedia yang diperlukan. Baca lebih lanjut.

Komponen ButangSambung mendedahkan beberapa properti untuk menyesuaikan penampilannya, termasuk menukar kebolehnampakan elemen yang berbeza.

Nota: titik pecah skrinBesar terbina dalam adalah 768px.

Guna properti label untuk menetapkan teks ButangSambung tersuai.

<ConnectButton label="Sign in" />

Berikut adalah beberapa cara berbeza anda boleh menggunakan properti statusAkaun.

Hanya tunjukkan avatar akaun.

<ConnectButton accountStatus="avatar" />

Hanya tunjukkan alamat akaun.

<ConnectButton accountStatus="address" />

Berikut adalah beberapa cara berbeza anda boleh menggunakan properti statusRantaian.

Hanya tunjukkan ikon rantaian semasa.

<ConnectButton chainStatus="icon" />

Hanya tunjukkan nama rantaian semasa.

<ConnectButton chainStatus="name" />

Sembunyikan sepenuhnya UI rantaian.

<ConnectButton chainStatus="none" />

Guna properti paparBaki untuk sembunyikan/tunjukkan baki.

Sembunyikan baki.

<ConnectButton showBalance={false} />

Properti ini juga boleh ditakrifkan dalam format responsif.

Pada skrin kecil, hanya tunjukkan ikon akaun. Tetapi pada skrin besar, tunjukkan 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,
  }}
/>