Nút Kết Nối

Nút Kết Nối

Sử dụng và tùy chỉnh Nút Kết Nối

Đây là thành phần chính. Nó chịu trách nhiệm hiển thị nút kết nối/ngắt kết nối, cũng như giao diện hoán đổi chuỗi.

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

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

Ghi chú: Hãy chắc chắn rằng ứng dụng của bạn được bao bọc trong các nhà cung cấp cần thiết. Đọc thêm.

Thành phần Nút Kết Nối cung cấp nhiều thuộc tính để tùy chỉnh giao diện, bao gồm điều chỉnh khả năng hiển thị của các phần tử khác nhau.

Lưu ý: điểm ngắt màn hình lớn tích hợp sẵn là 768px.

Sử dụng thuộc tính label để đặt văn bản tùy chỉnh cho Nút Kết Nối.

<ConnectButton label="Sign in" />

Dưới đây là một vài cách khác nhau mà bạn có thể sử dụng thuộc tính accountStatus.

Chỉ hiển thị hình đại diện của tài khoản.

<ConnectButton accountStatus="avatar" />

Chỉ hiển thị địa chỉ của tài khoản.

<ConnectButton accountStatus="address" />

Dưới đây là một vài cách khác nhau mà bạn có thể sử dụng thuộc tính chainStatus.

Chỉ hiển thị biểu tượng của chuỗi hiện tại.

<ConnectButton chainStatus="icon" />

Chỉ hiển thị tên của chuỗi hiện tại.

<ConnectButton chainStatus="name" />

Ẩn hoàn toàn giao diện chuỗi.

<ConnectButton chainStatus="none" />

Sử dụng thuộc tính showBalance để ẩn/hiển thị số dư.

Ẩn số dư.

<ConnectButton showBalance={false} />

Những thuộc tính này cũng có thể được định nghĩa ở định dạng đáp ứng.

Trên các màn hình nhỏ, chỉ hiển thị biểu tượng tài khoản. Nhưng trên các màn hình lớn, hiển thị cả biểu tượng và địa chỉ.

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

Trên các màn hình nhỏ, ẩn số dư. Nhưng trên các màn hình lớn, hiển thị chúng.

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