# अंतराल (Gap)

> Spacer के बिना कॉम्पोनेंट के बीच अंतर कैसे बनाएं — Gap, ingap/outgap और लेआउट भिन्नों का उपयोग करके।

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

# अंतराल (Gap)

> ⚠️ **`Spacer` को हटा दिया गया** 2026 आधुनिकीकरण में। अब कोई अंतराल विजेट नहीं है। कॉम्पोनेंट को अलग करने के लिए, वरीयता के क्रम में उपयोग करें: **लेआउट भिन्न** (`LAY_AUTO`/`LAY_FILL`/भिन्न), कॉम्पोनेंट के **`ingap`/`outgap`**, या सीधे `Gap` मान।

`Gap` अंतराल मानों (बाएं, ऊपर, दाएं, नीचे) को वैकल्पिक स्केल के साथ दर्शाता है। इसका उपयोग पूरी UI में **padding** (`ingap`), **margin** (`outgap`), और लेआउट के आंतरिक अंतराल के रूप में किया जाता है। एक `Gap` हो सकता है:

- **निश्चित पिक्सेल** — `Gap.ofPixels(...)`
- **फ़ॉन्ट के सापेक्ष** — `Gap.ofFont(...)` (`font.scaledHeight()` के साथ स्केल करता है, रिस्पॉन्सिवनेस के लिए आदर्श)
- **स्क्रीन के सापेक्ष** — `Gap.ofScreen(...)` (स्क्रीन आयामों का प्रतिशत)

> 🟢 · **पैकेज:** `dev.crossfly.ui` · **विस्तारित करता है:** `Component` · **संबंधित:** `ComponentStyle.ingap`/`outgap`, लेआउट

## कब उपयोग करें
- किसी कॉम्पोनेंट का आंतरिक padding (`ingap`) या बाहरी margin (`outgap`) परिभाषित करना।
- किसी लेआउट को अंतराल पास करना (जैसे सेल के बीच gaps)।
- पुराने `Spacer` को आनुपातिक स्थान से बदलना।

## कब उपयोग न करें
- किसी कॉम्पोनेंट को "धकेलने" और बची हुई जगह को सोखने के लिए → `VerticalLayout`/`HorizontalLayout` में एक `LAY_FILL` पंक्ति का उपयोग करें (देखें [`layouts/`](/docs/ui)), निश्चित `Gap` का नहीं।

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

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles, ButtonRole, State

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

      // स्वाभाविक ऊँचाई वाला हेडर
      add(LAY_AUTO, new Label("Cabeçalho"));

      // outgap के जरिए पड़ोसियों से दूर बटन (फ़ॉन्ट-सापेक्ष मार्जिन)
      Button b = new Button("Enviar").style(
         Styles.theme().button(ButtonRole.PRIMARY, State.NORMAL)
            .pressable()
            .outgap(Gap.ofFont(0.5f)));   // हर तरफ 0.5 × फ़ॉन्ट की ऊँचाई
      add(LAY_AUTO, b);

      // फुटर नीचे धकेला गया: LAY_FILL वाली लाइन बची हुई ऊर्ध्व जगह सोख लेती है
      add(LAY_FILL, new Label("(espaço que sobra)"));
      add(LAY_AUTO, new Label("Rodapé"));
   }
}
```

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

### 1. लेआउट भिन्न (वरीयता प्राप्त)
```java
VerticalLayout col = new VerticalLayout();
col.add(LAY_AUTO, cabecalho);   // स्वाभाविक ऊँचाई
col.add(LAY_FILL, conteudo);    // बची हुई जगह सोखता है (फुटर को नीचे धकेलता है)
col.add(LAY_AUTO, rodape);
```

### 2. स्टाइल में `ingap` / `outgap`
```java
// बाहरी मार्जिन (इस कंपोनेंट को पड़ोसियों से दूर करता है) फ़ॉन्ट-सापेक्ष outgap के जरिए
Button b = new Button("Enviar").style(
   Styles.theme().button(ButtonRole.PRIMARY, State.NORMAL)
      .pressable()
      .outgap(Gap.ofFont(0.5f)));   // हर तरफ 0.5 × फ़ॉन्ट की ऊँचाई
container.add(LAY_AUTO, b);
```

### 3. आंतरिक padding के रूप में `Gap`
```java
Label card = new Label("Conteúdo do cartão").style(
   Styles.theme().label(LabelRole.BODY)
      .ingap(Gap.ofFont(1f, 0.5f, 1f, 0.5f)));  // L,T,R,B फ़ॉन्ट इकाइयों में
container.add(LAY_AUTO, card);
```

## फ़ैक्टरियां (`Gap`)
| फ़ैक्टरी | स्केल | उपयोग |
|---|---|---|
| `Gap.ofPixels(float all)` / `ofPixels(l, t, r, b)` | निश्चित पिक्सेल | निरपेक्ष मान |
| `Gap.ofFont(float all)` / `ofFont(l, t, r, b)` | × डिफ़ॉल्ट फ़ॉन्ट की ऊंचाई | **रिस्पॉन्सिव** (अनुशंसित) |
| `Gap.ofFont(Font, l, t, r, b)` | × दिए गए फ़ॉन्ट की ऊंचाई | किसी विशिष्ट फ़ॉन्ट पर पुनः आधारित |
| `Gap.ofScreen(float all)` / `ofScreen(l, t, r, b)` | स्क्रीन आयामों का % | स्क्रीन के आनुपातिक अंतराल |
| `Gap.none()` / `Gap.ZERO` | शून्य | कोई अंतराल नहीं |

## गुण और मेथड
| मेथड | प्रकार | क्या करता है |
|---|---|---|
| `left()` / `top()` / `right()` / `bottom()` | `int` | पिक्सेल में हल किया गया मान (स्केल पहले ही लागू) |
| `width()` / `height()` | `int` | क्षैतिज योग (`left+right`) / ऊर्ध्वाधर (`top+bottom`) पिक्सेल में |
| `withFont(Font)` | `Gap` | कारकों को किसी अन्य फ़ॉन्ट पर पुनः आधारित करता है (यदि font-relative हो) |
| `isFontRelative()` / `font()` | `boolean` / `Font` | स्केल के आधार की जांच करता है |

## सर्वोत्तम प्रथाएं
- "बची हुई जगह" के लिए, लेआउट में **केवल एक** `LAY_FILL` पंक्ति का उपयोग करें, कई gaps का नहीं।
- ऑब्जेक्ट आवंटित किए बिना padding को शून्य करने के लिए `Gap.ZERO` का पुनः उपयोग करें।

## सामान्य गलतियां
- **`Spacer` क्लास ढूंढना:** यह अब मौजूद नहीं है। लेआउट भिन्न / `Gap` / `ingap`/`outgap` का उपयोग करें।
- **हर चीज़ के लिए `Gap.ofPixels` का उपयोग करना:** विभिन्न घनत्वों की स्क्रीन पर अंतराल असंगत हो जाता है; `ofFont`/`ofScreen` को प्राथमिकता दें।
- **दो निश्चित gaps से केंद्रित करने की कोशिश:** लेआउट के संरेखण या दोनों ओर `LAY_FILL` का उपयोग करें।

## यह भी देखें
- क्षेत्र गाइड: [`ui/`](/docs/ui) · रेसिपीज़: [`cookbook/`](/docs/cookbook)
- अवधारणा (constraints, रिस्पॉन्सिवनेस): [`concepts/`](/docs/concepts)
- संबंधित कॉम्पोनेंट: [`Label`](/docs/ui/widgets/label) · [`Button`](/docs/ui/widgets/button)