연결버튼

연결버튼

연결버튼 사용 및 맞춤 설정

이것은 주요 컴포넌트입니다. 연결/연결 해제 버튼을 렌더링할 뿐만 아니라 체인 스와핑 UI를 담당합니다.

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

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

참고: 앱이 필요한 프로바이더로 래핑되었는지 확인하십시오. 더 읽어보기.

연결버튼 컴포넌트는 외관을 커스터마이징하기 위해 다양한 props를 제공합니다. 서로 다른 요소의 가시성을 토글하는 등의 기능을 포함합니다.

참고: 내장된 largeScreen 중단점은 768px 입니다.

label prop을 사용하여 맞춤 연결버튼 텍스트를 설정하십시오.

<ConnectButton label="Sign in" />

다음은 accountStatus prop을 사용할 수 있는 몇 가지 방법입니다.

계정의 아바타만 표시합니다.

<ConnectButton accountStatus="avatar" />

계정의 주소만 표시합니다.

<ConnectButton accountStatus="address" />

다음은 chainStatus prop을 사용할 수 있는 몇 가지 방법입니다.

현재 체인의 아이콘만 표시합니다.

<ConnectButton chainStatus="icon" />

현재 체인의 이름만 표시합니다.

<ConnectButton chainStatus="name" />

체인 UI를 완전히 숨깁니다.

<ConnectButton chainStatus="none" />

showBalance prop을 사용하여 잔고를 숨기거나 표시합니다.

잔고를 숨깁니다.

<ConnectButton showBalance={false} />

이러한 props는 또한 반응형 포맷으로 정의될 수 있습니다.

작은 화면에서는 계정 아이콘만 표시합니다. 하지만 큰 화면에서는 아이콘과 주소를 모두 표시합니다.

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

작은 화면에서는 잔고를 숨기고, 큰 화면에서는 표시합니다.

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