Rainbow logo
RainbowKit
2.2.10

कनेक्ट बटन

कनेक्ट बटन

कनेक्ट बटन का उपयोग और अनुकूलन

यह मुख्य घटक है। यह कनेक्ट/डिस्कनेक्ट बटन के साथ-साथ चेन-स्वैपिंग यूआई को प्रस्तुत करने के लिए जिम्मेदार है।

import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};

ध्यान दें: सुनिश्चित करें कि आपका ऐप आवश्यक प्रोवाइडर्स में लिपटा हुआ है। अधिक पढ़ें

कनेक्ट बटन घटक कई गुणों को प्रकट करता है जिससे इसके स्वरूप को अनुकूलित किया जा सकता है, जिसमें विभिन्न तत्वों की दृश्यता को टॉगल करना शामिल है।

PropTypeDefault
labelstring वॉलेट को कनेक्ट करें
accountStatusenum full
chainStatusenum { smallScreen: "icon", largeScreen: "full" }
showBalanceenum { smallScreen: false, largeScreen: true }

ध्यान दें: बिल्ट-इन largeScreen ब्रेकप्वाइंट 768px है।

लेबल गुण का उपयोग करके एक कस्टम कनेक्ट बटन पाठ सेट करें।

<ConnectButton label="Sign in" />

यहाँ कुछ अलग-अलग तरीके हैं जिनका आप खाता स्थिति गुण का उपयोग कर सकते हैं।

केवल खाते का अवतार दिखाएं।

<ConnectButton accountStatus="avatar" />

केवल खाते का पता दिखाएं।

<ConnectButton accountStatus="address" />

यहाँ कुछ अलग-अलग तरीके हैं जिनका आप चेन स्थिति गुण का उपयोग कर सकते हैं।

केवल वर्तमान चेन का चिह्न दिखाएं।

<ConnectButton chainStatus="icon" />

केवल वर्तमान चेन का नाम दिखाएं।

<ConnectButton chainStatus="name" />

चेन यूआई को पूरी तरह से छुपाएं।

<ConnectButton chainStatus="none" />

बैलेंस दिखाएं गुण का उपयोग करके बैलेंस को छुपाएं/दिखाएं।

बैलेंस को छुपाएं।

<ConnectButton showBalance={false} />

ये गुण एक उत्तरदायी स्वरूप में भी परिभाषित किए जा सकते हैं।

छोटे स्क्रीन पर, केवल खाता चिह्न दिखाएं। लेकिन बड़े स्क्रीन पर, चिह्न और पता दोनों दिखाएं।

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

छोटे स्क्रीन पर बैलेंस छुपाएं। लेकिन बड़े स्क्रीन पर, इसे दिखाएं।

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