# क्लिक करने योग्य कार्ड कैसे बनाएं

> गोल पृष्ठभूमि, लेआउट में सामग्री और स्पर्श पर प्रतिक्रिया वाला एक Component बनाना।

Source: https://crossfly.dev/hi/docs/cookbook/ui/card-clicavel — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# क्लिक करने योग्य कार्ड कैसे बनाएं

**उद्देश्य.** एक "कार्ड" बनाना (पृष्ठभूमि, गोल बॉर्डर और आंतरिक सामग्री वाला एक `Component`)
जो स्पर्श पर प्रतिक्रिया करता है, दबाए जाने पर दृश्य हाइलाइट लागू करता है और एक क्रिया
ट्रिगर करता है। सूची आइटम, डैशबोर्ड टाइल, शॉर्टकट इत्यादि के लिए उपयोग करें।

## प्रयुक्त APIs
- `new Component()` — CrossFly में सब कुछ `Component` है; एक कार्ड बस शैली और लेआउट वाला एक `Component` है।
- `component.style(ComponentStyle s)` — शैली लागू करता है (पृष्ठभूमि, बॉर्डर, त्रिज्या)। श्रृंखलन के लिए `<T extends Component>` लौटाता है।
- `ComponentStyle.pressable()` — शैली को `Pressable.YES` के रूप में चिह्नित करता है: कंपोनेंट दबाए जाने पर हाइलाइट प्राप्त करता है और स्पर्श घटनाएँ प्राप्त करने लगता है।
- `component.setLayout(Layout l)` — आंतरिक सामग्री का लेआउट प्रबंधक परिभाषित करता है (उदा.: `new GridLayout(...)`)।
- `component.add(Object... params)` — सक्रिय लेआउट के अनुसार संतानें जोड़ता है।
- `component.onAction(Component.Action action)` — स्पर्श पर ट्रिगर होने वाला कॉलबैक पंजीकृत करता है (केवल तभी काम करता है जब शैली `pressable` हो)।
- `Styles.component()` — आपके अनुकूलन के लिए सक्रिय Skin से एक आधार `ComponentStyle` लौटाता है।

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

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;

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

      // कार्ड शैली: सफेद पृष्ठभूमि, गोल कोने, क्लिक करने योग्य
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // फ़ॉन्ट इकाइयों में त्रिज्या
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← कार्ड को स्पर्श के प्रति संवेदनशील बनाता है

      Component card = new Component()
         .style(cardStyle);

      // आंतरिक कंटेंट एक कॉलम में (शीर्षक + उपशीर्षक)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // स्पर्श पर क्रिया
      card.onAction(origin -> abrirDetalhe(1234));

      // कार्ड को वर्तमान स्क्रीन/container में जोड़ता है
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... ऑर्डर विवरण स्क्रीन खोलें ...
   }
}
```

> नीचे का अंश **केवल मुख्य भाग** दिखाता है। चलाने के लिए, इसे ऊपर दिए गए `MainWindow` ढाँचे में रखें।

## न्यूनतम अंश
```java
// कार्ड शैली: सफेद पृष्ठभूमि, गोल कोने, क्लिक करने योग्य
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // फ़ॉन्ट इकाइयों में त्रिज्या
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← कार्ड को स्पर्श के प्रति संवेदनशील बनाता है

Component card = new Component()
   .style(cardStyle);

// आंतरिक कंटेंट एक कॉलम में (शीर्षक + उपशीर्षक)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// स्पर्श पर क्रिया
card.onAction(origin -> abrirDetalhe(1234));

// कार्ड को वर्तमान स्क्रीन/container में जोड़ता है
add(card);
```

> **सत्यापन नोट (कोड 2026).** स्रोत में पुष्ट: `Component.style(ComponentStyle)`
> `<T extends Component> T` लौटाता है (फ्लुएंट), `ComponentStyle.pressable()`
> `Pressable.YES` सेट करता है, और `Component.onAction(Action)` `hasAction(true)` चिह्नित
> करता है। दबाए जाने का हाइलाइट Skin द्वारा हल की गई प्रति-स्थिति शैलियों (default/pressed)
> का उपयोग करता है — pressed स्थिति को अनुकूलित करने की आवश्यकता होने पर ही अध्याय 10 देखें।
> `pressable()` के बिना, `onAction` **ट्रिगर नहीं होता** क्योंकि कंपोनेंट स्पर्श का लक्ष्य
> नहीं होता।

## और गहराई से जानें
- विजेट कैटलॉग: [Widget Catalog](/docs/reference/widget-catalog)