# LabelItem और CheckLabelItem

> तैयार सूची-आइटम कार्ड — केवल लेबल (SINGLE) या चेकबॉक्स + लेबल (MULTIPLE)।

Source: https://crossfly.dev/hi/docs/ui/widgets/list-items — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# LabelItem और CheckLabelItem

`LabelItem` और `CheckLabelItem` `dev.crossfly.ui.listitem` पैकेज में तैयार सूची-आइटम "कार्ड" हैं। दोनों `Component` को एक्सटेंड करते हैं और [`ListView`](/docs/ui/widgets/listview) द्वारा आंतरिक रूप से उपयोग किए जाते हैं:

- **`LabelItem`** — लाइन-रैप वाला एक अकेला `Label`। `SINGLE` मोड में उपयोग किया जाता है।
- **`CheckLabelItem`** — एक `Option` (check) + `Label`। `MULTIPLE` मोड में उपयोग किया जाता है।

आमतौर पर आप इन्हें सीधे **इंस्टैंशिएट नहीं** करते — `ListView` `ItemType` के अनुसार सही प्रकार बनाता है। इन्हें तब उपयोग करें जब आप सूची को हाथ से बनाएं और वही कार्ड जैसी दिखावट/व्यवहार चाहें।

> 🟡 · **पैकेज:** `dev.crossfly.ui.listitem` · **एक्सटेंड करते हैं:** `Component` · **स्टाइल:** `ComponentStyle` (card) + `LabelStyle` (लेबल)

## कब उपयोग करें
- किसी सूची को मैन्युअल रूप से बनाना (`ListView` के बाहर) और डिफ़ॉल्ट कार्ड लुक को पुनः उपयोग करना।
- फ्रेमवर्क की सूचियों के साथ सुसंगत दिखावट वाला एक अलग क्लिक करने योग्य आइटम।

## कब उपयोग न करें
- तैयार चयन सूची → [`ListView`](/docs/ui/widgets/listview) को आपके लिए आइटम बनाने दें।
- छवि/कई फ़ील्ड वाली समृद्ध पंक्ति → अपना खुद का `Component` बनाएं (या `ListView` का `itemFactory` उपयोग करें)।

## दिखावट
चयन थीम के बैकग्राउंड/बॉर्डर (`selectionCardBackColor`/`selectionCardBorderColor`) वाला कार्ड, `pressable`, डिफ़ॉल्ट गैप के साथ। `LabelItem` टेक्स्ट को START/CENTER संरेखित दिखाता है; `CheckLabelItem` check को बाईं ओर रखता है (स्वचालित चौड़ाई) और लेबल 90% घेरता है।

## पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएं)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.listitem.*;   // LabelItem, CheckLabelItem

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // मानक card के विज़ुअल को पुनः उपयोग करते हुए हाथ से बनाई गई सूची।
      Component lista = new Component();
      lista.setLayout(new GridLayout(Position.CENTER, Position.START));
      lista.setScrollable(ScrollDirection.VERTICAL);

      String[] linhas = {"Alpha", "Beta", "Gamma"};
      for (int i = 0; i < linhas.length; i++) {
         LabelItem item = new LabelItem(linhas[i], i);
         final int idx = i;
         item.onAction(e -> System.out.println("selecionou " + idx));
         lista.add(.95f, item);
      }

      CheckLabelItem termos = new CheckLabelItem("Aceito os termos", linhas.length);
      termos.onAction(e -> { termos.toggle(); System.out.println(termos.isChecked()); });
      lista.add(.95f, termos);

      add(LAY_FILL, lista);   // सूचियां LAY_FILL उपयोग करती हैं (ऊंचाई अवशोषित करती हैं)
   }
}
```

> नीचे दिए गए स्निपेट **केवल मुख्य भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, उन्हें ऊपर के `MainWindow` ढांचे में रखें।

## बुनियादी उपयोग
```java
// LabelItem — एकल-रूप वाला क्लिक करने योग्य आइटम
LabelItem item = new LabelItem("Linha", 0);
item.onAction(e -> System.out.println("clicou " + item.index));
layout.add(.95f, item);

// CheckLabelItem — checkbox वाला आइटम
CheckLabelItem c = new CheckLabelItem("Aceito os termos", 0);
c.onAction(e -> { c.toggle(); System.out.println(c.isChecked()); });
layout.add(.95f, c);
```

### LabelItem
| कंस्ट्रक्टर | विवरण |
|---|---|
| `LabelItem(String text, int index)` | डिफ़ॉल्ट स्टाइल |
| `LabelItem(String text, int index, ComponentStyle cardStyle, LabelStyle labelStyle)` | कस्टम स्टाइल |

### CheckLabelItem
| कंस्ट्रक्टर | विवरण |
|---|---|
| `CheckLabelItem(String text, int index)` | डिफ़ॉल्ट स्टाइल |
| `CheckLabelItem(String text, int index, ComponentStyle cardStyle)` | कस्टम कार्ड स्टाइल |

`text` और `index` फ़ील्ड `public final` हैं।

## प्रॉपर्टीज़ और अनुकूलन
| सदस्य | क्लास | क्या करता है |
|---|---|---|
| `text` (final) | दोनों | आइटम का टेक्स्ट |
| `index` (final) | दोनों | सूची में आइटम का इंडेक्स |
| `getAutoHeight()` | दोनों | पसंदीदा ऊंचाई (लेबल/check + ingap) |
| `isChecked()` | `CheckLabelItem` | check की वर्तमान स्थिति |
| `setChecked(boolean)` | `CheckLabelItem` | स्थिति सेट करता है |
| `toggle()` | `CheckLabelItem` | स्थिति को टॉगल करता है |
| `getCheck()` | `CheckLabelItem` | आंतरिक `Option` तक पहुंच |
| `defaultItemStyle()` (static) | दोनों | पुनः उपयोग योग्य कार्ड स्टाइल (selection card, `pressable`) |
| `defaultLabelStyle()` (static) | `LabelItem` | पुनः उपयोग योग्य लेबल स्टाइल |

## कॉलबैक और इवेंट
| कॉलबैक | कब ट्रिगर होता है |
|---|---|
| `onAction(Action)` | कार्ड को टच करने पर (`Component` से विरासत में मिला) |

`CheckLabelItem` में, टच अपने आप check को टॉगल **नहीं** करता — अपने कॉलबैक में `toggle()` कॉल करें (यही `ListView` आंतरिक रूप से करता है)।

## स्थितियां
- **pressed** — दोनों डिफ़ॉल्ट रूप से `pressable` हैं (टच पर फ़ीडबैक)।
- **checked** — केवल `CheckLabelItem`: `setChecked`/`toggle` द्वारा नियंत्रित, `isChecked` से पूछताछ योग्य।

### कार्ड लुक का पुनः उपयोग करने वाली मैन्युअल सूची
```java
Component lista = new Component();
lista.setLayout(new GridLayout(Position.CENTER, Position.START));
lista.setScrollable(ScrollDirection.VERTICAL);
String[] linhas = {"Alpha", "Beta", "Gamma"};
for (int i = 0; i < linhas.length; i++) {
   LabelItem item = new LabelItem(linhas[i], i);
   final int idx = i;
   item.onAction(e -> System.out.println("selecionou " + idx));
   lista.add(.95f, item);
}
layout.add(LAY_FILL, lista);
```

### कस्टम कार्ड वाला CheckLabelItem
```java
ComponentStyle card = CheckLabelItem.defaultItemStyle()
   .copy()
   .backColor(0xFFF5F5F5);
CheckLabelItem opt = new CheckLabelItem("Receber notificações", 0, card);
opt.setChecked(true);
opt.onAction(e -> { opt.toggle(); });
layout.add(.95f, opt);
```

## सर्वोत्तम अभ्यास
- फ्रेमवर्क की सूचियों के साथ दृश्य एकरूपता बनाए रखने के लिए `defaultItemStyle()` / `defaultLabelStyle()` (`.copy()` के साथ) का पुनः उपयोग करें।
- `ListView` की स्पेसिंग को दोहराने के लिए आइटम्स को `GridLayout(CENTER, START)` में `.95f` चौड़ाई के साथ जोड़ें।

## सामान्य गलतियां
- **यह उम्मीद करना कि `CheckLabelItem` टच पर check को स्वचालित रूप से टॉगल करेगा** — `onAction` में `toggle()` कॉल करें।
- **इन आइटम्स को तब इंस्टैंशिएट करना जब आप पहले से `ListView` का उपयोग कर रहे हैं** — `ListView` `ItemType` के आधार पर पहले से ही सही प्रकार बनाता है।

## यह भी देखें
- क्षेत्र गाइड: [`ui/`](/docs/ui) · रेसिपी: [`cookbook/`](/docs/cookbook)
- संबंधित कंपोनेंट: [`ListView`](/docs/ui/widgets/listview) · [`ListViewWindow`](/docs/ui/widgets/listviewwindow)