कॉम्पोनेंट स्टाइल करना (ComponentStyle)

ComponentStyle किसी कॉम्पोनेंट के पूरे रूप-रंग को समाहित करता है। इसे फ़्लुएंट API से बनाया जाता है और componente.style(...) से लागू किया जाता है।

पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // ComponentStyle, Styles
import dev.crossfly.ui.graphics.*; // Relative

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

      // शून्य से बना ComponentStyle, .style(...) के साथ लागू किया गया
      Button salvar = new Button("Salvar");
      salvar.style(new ComponentStyle()
         .backColor(0xFF0173ED)          // नीला बैकग्राउंड (ARGB)
         .textColor(0xFFFFFFFF)          // सफेद टेक्स्ट
         .borderColor(0)                 // बिना बॉर्डर
         .borderRadius(0.6f)             // गोल कोने
         .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))  // आंतरिक पैडिंग (l,t,r,b)
         .autoWidth(Relative.ofScreen(0.6f))
         .pressable());                  // टच पर प्रतिक्रिया देता है
      add(LAY_AUTO, salvar);

      // अनुशंसित: थीम की स्टाइल से व्युत्पन्न करें और केवल जरूरी को समायोजित करें
      Button tema = new Button("Cor do tema");
      tema.style(Styles.button()
         .backColor(Styles.primaryColor) // थीम का PalColor (light/dark का अनुसरण करता है)
         .borderRadius(1f));
      add(LAY_AUTO, tema);
   }
}

नीचे दिए गए स्निपेट सिर्फ़ मूल भाग दिखाते हैं (जो onShow() के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर वाले MainWindow कंकाल में रखें।

बुनियादी उपयोग

Button salvar = new Button("Salvar");
salvar.style(new ComponentStyle()
   .backColor(0xFF0173ED)              // नीला बैकग्राउंड (ARGB)
   .textColor(0xFFFFFFFF)              // सफेद टेक्स्ट
   .borderColor(0)                     // बिना बॉर्डर
   .borderRadius(0.6f)                 // गोल कोने
   .ingap(Gap.ofFont(0.8f, 0.4f, 0.8f, 0.4f))      // आंतरिक पैडिंग
   .pressable());                      // टच पर प्रतिक्रिया देता है

स्थिति (state) के अनुसार लागू करना

salvar.style(normal)
      .focusedStyle(comFoco)     // जब तक फोकस में है
      .pressedStyle(apertado);   // जब तक दबाया हुआ है

किसी Skin स्टाइल से शुरू करना (अनुशंसित)

शून्य से बनाने के बजाय, थीम के फ़ॉन्ट/गैप/रंग विरासत में पाने के लिए किसी Skin स्टाइल से व्युत्पन्न (derive) करें:

// वर्तमान थीम की बटन स्टाइल लेता है और केवल जरूरी को समायोजित करता है
salvar.style(Styles.button()
   .backColor(Styles.primaryColor)     // थीम का primary रंग उपयोग करता है
   .borderRadius(1f));

मुख्य प्रॉपर्टीज़ (फ़्लुएंट सेटर)

रंग: int ARGB या PalColor

• int ARGB (0xAARRGGBB) — स्थिर रंग: 0xFF0173ED।
• PalColor (Styles/ColorScheme से) — थीम का रंग, जो हल्के/गहरे मोड में बदलने पर स्वयं फिर से हल हो जाता है: Styles.primaryColor, Styles.textColor। थीम के साथ चलने के लिए PalColor को प्राथमिकता दें।

सर्वोत्तम अभ्यास

• सब कुछ फिर से बनाने के बजाय Styles.button()/Styles.label()/Styles.textField() से व्युत्पन्न करें।
• थीम के PalColor का उपयोग करें (Styles.primaryColor, cs.surface) — स्थिर रंग गहरे मोड का अनुसरण नहीं करता।
• रिक्ति (spacing) के लिए Gap.ofFont(...) का उपयोग करें (फ़ॉन्ट के साथ स्केल होता है) — कभी भी स्थिर पिक्सेल नहीं।

आम गलतियाँ

• setStyle(...) कॉल करना — विधि style(...) है।
• new Color(...) का उपयोग करना — Color क्लास हटा दी गई है; int ARGB या ColorUtils का उपयोग करें।
• पूरी UI में स्थिर रंग और फिर हैरान होना कि गहरा मोड “काम नहीं करता”।

यह भी देखें

• रंग योजनाएँ · हल्का/गहरा मोड · Skins