नेस्ट किए गए पैकेज के इंस्टेंस

यूज़र इंटरफ़ेस (यूआई) पैकेज में, सहायता वाले अन्य यूज़र इंटरफ़ेस (यूआई) पैकेज के इंस्टेंस (या "नेस्ट") शामिल हो सकते हैं के लिए हर लेवल पर डाइनैमिक कॉन्टेंट और इंटरैक्टिविटी का इस्तेमाल किया जा सकता है. ये सब अपने-आप इंपोर्ट हो जाते हैं Relay for Android Studio प्लगिन का इस्तेमाल करके.

नेस्ट किए गए इंस्टेंस जोड़ना और नेस्ट किए गए पैरामीटर दिखाना

पैकेज इंस्टेंस को उसी तरह जोड़ा जा सकता है, जैसे कि आम तौर पर कॉम्पोनेंट इंस्टेंस फ़िग्मा.

किसी पैकेज में नेस्ट किए गए पैकेज का इंस्टेंस जोड़ने के बाद, कॉन्टेंट और इंटरैक्शन पैरामीटर नेस्ट किए गए इंस्टेंस पैरामीटर पर आधारित होते हैं, ठीक किसी अन्य लेयर की प्रॉपर्टी:

• पैकेज की गई इंस्टेंस लेयर चुनें.
• Figma के यूज़र इंटरफ़ेस (यूआई) के लिए रिले में + जोड़ें पैरामीटर पर क्लिक करें.
• नेस्ट किए गए पैकेज पैरामीटर में से किसी एक को चुनें.

चुने गए पैरामीटर या इंटरैक्शन को पैरंट कॉम्पोनेंट से दिखाया जाता है. नेस्ट किए गए पैकेज पैरामीटर और नए पैरामीटर के बीच कनेक्शन बनाकर पैरंट कॉम्पोनेंट में जोड़ा गया. जनरेट किए गए कोड में, अब ये चीज़ें दी जा सकती हैं: पैरंट के लिए वैल्यू, जिसे नेस्ट किए गए इंस्टेंस से भेजा जाता है पैकेज का कोड कॉम्पोनेंट.

अगर नेस्ट किया गया इंस्टेंस, पैरंट में Figma के एक से ज़्यादा वैरिएंट में मौजूद है कॉम्पोनेंट, यूज़र इंटरफ़ेस (यूआई) अलग-अलग कॉन्फ़िगरेशन को चालू करने के लिए, वैरिएंट के इंस्टेंस को ग्रुप करता है.

डिफ़ॉल्ट रूप से, नेस्ट किए गए पैकेज इंस्टेंस पैरामीटर को पैरंट अनुमति नहीं देता है कॉम्पोनेंट. इसके बजाय, जनरेट किया गया कोड उस मान का इस्तेमाल करता है जिसे आपने Figma में बताया है, नियमित पैरामीटर ओवरराइड की तरह.

आइए इस उदाहरण को देखें:

• चिप पैकेज में, chip-text टेक्स्ट पैरामीटर होता है.
• ब्यौरा कार्ड के पैकेज में एक चिप पैकेज मौजूद है. इसके पैरामीटर हैं:
  • title
  • subchip-text, जो चिप इंस्टेंस के chip-text पैरामीटर की जानकारी दिखाता है
  • sub-icon
  • details

• रिज़र्वेशन कार्ड पैकेज में एक ब्यौरा कार्ड पैकेज होता है. यह पैरामीटर हैं:

  • hero-image

  • headline, जिससे ब्यौरे कार्ड के इंस्टेंस के title दिखते हैं पैरामीटर.

  • reservation-text, जिससे ब्यौरे कार्ड के इंस्टेंस का पता चलता है chip-text पैरामीटर.

  • summary, जिससे ब्यौरे कार्ड के इंस्टेंस के details दिखते हैं पैरामीटर.

ध्यान दें कि sub-icon ब्यौरे वाले कार्ड का ही एक पैरामीटर है, जो रिज़र्वेशन कार्ड पर दिख सकता है. इसलिए, रिज़र्वेशन कार्ड के हर इंस्टेंस पर इस आइकॉन का इस्तेमाल करता है.

नेस्ट किए गए कॉम्पोनेंट इंस्टेंस का पैरामीटर दिखाने के लिए:

1. यूज़र इंटरफ़ेस (यूआई) पैकेज का ऐसा इंस्टेंस चुनें जिसमें पैरामीटर मौजूद हों. आपके पास इन्हें चुनने का विकल्प है या Figma प्लगिन के नीचे Figma रिले इंस्टेंस.

2. पैरामीटर के बगल में मौजूद + पर क्लिक करें. मेन्यू चुना गया इंस्टेंस. कोई पैरामीटर चुनें.

   इससे नेस्ट किए गए इंस्टेंस से पैरामीटर दिखता है. इस उदाहरण में, हमने ब्यौरा कार्ड के इंस्टेंस को चुना गया और जानकारी को सार्वजनिक किया गया पैरामीटर.

   

3. Figma के लिए Relay प्लगिन की दाईं ओर मौजूद पैनल में, कोई दूसरा पैरामीटर चुनें या उसे कॉल करने का तरीका बदलने के लिए, पैरामीटर का नाम बदलें जनरेट किया गया कोड. इस उदाहरण में, पैरामीटर का नाम बदलकर यह किया गया है: summary, जो अभी भी हमारे नेस्ट किए हुए details पैरामीटर के बारे में बताता है इंस्टेंस.

   

जब आप पैरंट कॉम्पोनेंट (इस मामले में, रिज़र्वेशन कार्ड) को Android Studio में, नेस्ट किए गए सभी पैकेज अपने-आप इंपोर्ट हो जाते हैं (इस मामले में, ब्यौरा कार्ड और चिप). कोड जनरेट होने पर, हर पैकेज ऐप्लिकेशन कंपोज़ेबल फ़ंक्शन जनरेट करता है.

उदाहरण के लिए, जनरेट किया गया कोड ऐसा दिखेगा:

Reservationcard.kt

..
import com.example.hellofigma.descriptioncard.DescriptionCard
...

@Composable
fun ReservationCard(
    modifier: Modifier = Modifier,
    heroImage: Painter,
    headline: String,
    summary: String,
    reservationText: String
) {
    ...
    DescriptionCard(
        title = headline,
        details = summary,
        subchipText = reservationText,
        subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
        modifier = modifier
    )
    ...
}

Descriptioncard.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

नेस्ट किए गए पैकेज इंस्टेंस की प्रॉपर्टी बदलें

Figma में नेस्ट की गई इंस्टेंस प्रॉपर्टी की वैल्यू बदलने पर, नई वैल्यू कंपोज़ कोड में सिर्फ़ तब अनुवाद किया जाता है, जब नेस्ट किए गए कॉम्पोनेंट में कोई पैरामीटर जोड़ा गया हो उस प्रॉपर्टी के लिए. ऐसा न करने पर, नई वैल्यू को छोड़ दिया जाता है और ओरिजनल वैल्यू को का इस्तेमाल कोड में किया जाता है.

आइए, एक उदाहरण लेते हैं. जानकारी कार्ड के कॉम्पोनेंट में एक चिप शामिल है कॉम्पोनेंट इंस्टेंस. हमने बदलाव करके, चिप इंस्टेंस में एक बदलाव जोड़ा है "चिप टेक्स्ट" से टेक्स्ट "रिज़र्वेशन ज़रूरी है" में बदलें:

अगर चिप के टेक्स्ट के लिए कोई पैरामीटर नहीं है, तो जनरेट किए गए कोड में जानकारी कार्ड वाले चिप में अब भी "चिप टेक्स्ट" लिखा है, न कि "रिज़र्वेशन ज़रूरी है".

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
) {...}

अगर चिप में अपने टेक्स्ट के लिए पैरामीटर है, तो चिप-टेक्स्ट कहें, फिर जनरेट किया गया कोड, DescriptionCard "बुकिंग ज़रूरी है" के साथ Chip को कॉल करता है जैसे chipText पैरामीटर की वैल्यू:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

अगर जानकारी कार्ड में चिप का चिप-टेक्स्ट पैरामीटर इस तरह दिखता है subchip-text, फिर जनरेट किए गए कोड में, DescriptionCard के लिए subchipText दिया गया है पैरामीटर और chipText की वैल्यू के तौर पर subchipText के साथ Chip को कॉल करता है पैरामीटर:

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

इसके अलावा, अब जब कि "बुकिंग ज़रूरी है" पैरामीटर की वैल्यू है, तो जनरेट किए गए कोड में सिर्फ़ब्यौरा कार्ड की झलक में दिखता है.

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

सीमाएं

• पैरंट कॉम्पोनेंट के तौर पर, एक ही वैरिएंट प्रॉपर्टी वाला नेस्ट किया गया कॉम्पोनेंट यह नहीं कर पाता कंपाइल
• यूआई-पैकेज से बाहर के संसाधनों को अपडेट करने के लिए, नया बिल्ड बनाना ज़रूरी नहीं होता