BağlanButonu

Bağlan Butonunu Kullanma ve Özelleştirme

Bu, ana bileşendir. Bağlan/ayır butonunu ve zincir değiştirme arayüzünü render etmekten sorumludur.

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

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

Not: Uygulamanızın gerekli sağlayıcılar ile sarıldığından emin olun. Daha fazlasını okuyun.

ConnectButton bileşeni, görünümünü özelleştirmek için çeşitli özellikleri açığa çıkarır; farklı öğelerin görünürlüğünü değiştirmek dahil.

Prop	Type	Default
`label`	`string`	`Cüzdanı Bağla`
`accountStatus`	`enum`	`full`
`chainStatus`	`enum`	`{ smallScreen: "icon", largeScreen: "full" }`
`showBalance`	`enum`	`{ smallScreen: false, largeScreen: true }`

Not: Dahili büyükEkran kırılma noktası 768px.

etiket özelliğini kullanarak özel bir ConnectButton metni ayarlayın.

<ConnectButton label="Sign in" />

hesapDurumu özelliğini kullanmanın birkaç farklı yolu burada.

Sadece hesabın avatarını göster.

<ConnectButton accountStatus="avatar" />

Sadece hesabın adresini göster.

<ConnectButton accountStatus="address" />

zincirDurumu özelliğini kullanmanın birkaç farklı yolu burada.

Sadece mevcut zincirin simgesini göster.

<ConnectButton chainStatus="icon" />

Sadece mevcut zincirin ismini göster.

<ConnectButton chainStatus="name" />

Zincir arayüzünü tamamen gizle.

<ConnectButton chainStatus="none" />

Bakiye gizleyip/göstermek için bakiyeGöster özelliğini kullanın.

Bakiyeyi gizle.

<ConnectButton showBalance={false} />

Bu özellikler duyarlı bir formatta da tanımlanabilir.

Küçük ekranlarda sadece hesap simgesini gösterin. Ancak büyük ekranlarda simge ve adresi gösterin.

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

Küçük ekranlarda bakiyeyi gizleyin. Ancak büyük ekranlarda gösterin.

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