---
title: "Jetpack Compose"
description: "Jetpack Compose से बने Android ऐप में Tanrei जोड़ें।"
url: "https://tanrei.chnotchy.com/hi/getting-started/compose/"
last_updated: 2026-10-20T01:38:40.000Z
---

# Jetpack Compose

> Jetpack Compose से बने Android ऐप में Tanrei जोड़ें।

Compose लाइब्रेरी में कंपोज़ेबल, एक `TanreiTheme` और जनरेट किए गए टोकन ऑब्जेक्ट मिलते हैं। यह किसी Material कंपोनेंट लाइब्रेरी पर नहीं, बल्कि Compose Foundation पर निर्भर है, इसलिए यह आपके ऐप में कोई दूसरा डिज़ाइन सिस्टम नहीं खींच लाती।

> [!WARNING]
> **अभी प्रकाशित नहीं**
>
> `io.github.chnotchy:tanrei` अभी Maven Central पर नहीं है। कोई प्लैटफ़ॉर्म मौजूदा स्पेक की बराबरी पर आने के बाद ही प्रकाशित होता है, और तब तक Jetpack Compose का CI रुका हुआ है। नीचे “सोर्स से” बताता है कि पैकेज [chnotchy/tanrei](https://github.com/chnotchy/tanrei) से कैसे जोड़ा जाता है; “प्रकाशित होने के बाद” बताता है कि तब इंस्टॉल कैसे होगा।

## इंस्टॉल करें

### सोर्स से

> [!WARNING]
> **आज बिल्ड नहीं होती**
>
> Compose लाइब्रेरी अभी मौजूदा स्पेक और टोकन तक नहीं पहुँची है: उसका सोर्स जनरेट किए गए टोकन कोड के एक पुराने वर्ज़न के हिसाब से लिखा गया था, और आज के कोड के साथ कंपाइल नहीं होता। जब तक वह बराबरी पर नहीं आती, उसका CI रुका हुआ है, और [स्थिति पेज](https://tanrei.chnotchy.com/hi/status/) उसके कंपोनेंट को _पीछे_ के रूप में दिखाता है। नीचे के चरण बताते हैं कि उसे किसी ऐप में कैसे जोड़ा जाता है; लाइब्रेरी के बराबरी पर आने के बाद ये काम करेंगे।

रिपॉज़िटरी को अपने ऐप के बग़ल में क्लोन करें और उसका Gradle बिल्ड शामिल करें, जिसमें लाइब्रेरी `:tanrei` प्रोजेक्ट के रूप में है:

```kotlin
// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}
```

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}
```

### प्रकाशित होने के बाद

```kotlin
// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}
```

## इस्तेमाल

अपने कॉन्टेंट को एक बार, रूट के पास, `TanreiTheme` में लपेटें:

```kotlin
import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "डिप्लॉय करें",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}
```

Compose की परिपाटी सकारात्मक फ़्लैग `enabled` है, इसलिए Tanrei भी वही इस्तेमाल करता है; स्पेक की `disabled` प्रॉपर्टी इसके उलटे मान से मैप होती है। जब आपको टेक्स्ट लेबल से ज़्यादा कुछ चाहिए, तो एक स्लॉट ओवरलोड `content` लैम्ब्डा लेता है।

## थीम और कंट्रास्ट

`TanreiTheme` डिफ़ॉल्ट रूप से सिस्टम की डार्क थीम और सिस्टम की कंट्रास्ट सेटिंग के अनुसार चलता है। दोनों को तय किया जा सकता है:

```kotlin
TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}
```

## फ़ॉन्ट

डिफ़ॉल्ट रूप से टाइप स्केल प्लैटफ़ॉर्म की डिफ़ॉल्ट फ़ॉन्ट फ़ैमिली पर रिज़ॉल्व होता है। अपने ऐप के फ़ॉन्ट रिसोर्स से Inter (और Noto Sans JP, Roboto Mono) इस्तेमाल करने के लिए `TanreiTheme` को अपनी `TanreiFontFamilies` दें। टेक्स्ट स्टाइल के नाम उनके स्तर पर रखे गए हैं (`TanreiTheme.tokens.typescale.heading2`, `.body`, `.label`; `.toTextStyle()` इनमें से किसी को Compose के `TextStyle` में बदल देता है), और `TanreiTheme.tokens.typescale.heading1.emphasized()` वही स्टाइल है जिसके वेट में हेडिंग फ़ैमिली का एम्फ़ेसिस स्टेप जुड़ा है (कंपोज़िशन के बाहर, `emphasized(system.typescale.emphasis)`)।