ConnectButton

ConnectButton'ı kullanma ve özelleştirme

Bu ana bileşendir. Bağlan/Bağlantıyı kes 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ılarla sarılı olduğundan emin olun. Daha fazla oku.

ConnectButton bileşeni, görünümünü özelleştirmek için çeşitli props'ları açığa çıkarır, farklı öğelerin görünürlüğünü değiştirmeyi içeren.

Prop	Type	Default
`label`	`string`	`Cüzdan Bağla`
`accountStatus`	`enum`	`tam`
`chainStatus`	`enum`	`{ küçükEkran: "ikon", büyükEkran: "tam" }`
`showBalance`	`enum`	`{ küçükEkran: false, büyükEkran: true }`

Not: Yerleşik largeScreen kırılma noktası 768px'dir.

Özel bir ConnectButton metni ayarlamak için label props'unu kullanın.

<ConnectButton label="Sign in" />

accountStatus props'unu farklı şekillerde kullanabileceğiniz bazı yollar.

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

<ConnectButton accountStatus="avatar" />

Sadece hesabın adresini göster.

<ConnectButton accountStatus="address" />

chainStatus props'unu farklı şekillerde kullanabileceğiniz bazı yollar.

Sadece mevcut zincirin ikonunu göster.

<ConnectButton chainStatus="icon" />

Sadece mevcut zincirin adını göster.

<ConnectButton chainStatus="name" />

Zincir arayüzünü tamamen gizle.

<ConnectButton chainStatus="none" />

Bakiyeyi gizlemek/göstermek için showBalance props'unu kullanın.

Bakiyeyi gizle.

<ConnectButton showBalance={false} />

Bu props'lar aynı zamanda duyarlı bir formatta tanımlanabilir.

Küçük ekranlarda, yalnızca hesap ikonunu göster. Fakat büyük ekranlarda, ikon ve adresi göster.

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

Küçük ekranlarda, bakiyeyi gizle. Fakat büyük ekranlarda, göster.

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