Pantrix UI

Kurulum

Pantrix UI'ı bir Compose Multiplatform projesine ekleyin, uygulamayı temasına sarın ve ilk bileşeni çizin. Ortak kaynak kümesindeki tek bir bağımlılık her hedefe yeter.

Ne gerekir

Kotlin
2.4.21 ya da daha yeni
Compose Multiplatform
1.12.2 ya da daha yeni
Android
API 30, Android 11
iOS
Arm64, simülatör
Masaüstü ve web
JVM, Wasm, JS

  1. Depoyu ekleyin

    settings.gradle.kts dosyasında, Google'ın ve Maven Central'ın yanına:

    GitHub Packages

    settings.gradle.kts

    dependencyResolutionManagement {
    repositories {
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/develappsancho/pantrix-ui-cmp-package")
            credentials(PasswordCredentials::class)
        }
        google()
        mavenCentral()
    }
}

    Yerel Maven

    settings.gradle.kts

    dependencyResolutionManagement {
    repositories {
        mavenLocal()
        google()
        mavenCentral()
    }
}

  2. Bağımlılığı ekleyin

    Ortak kaynak kümesinde tek bir satır. Gradle her hedefin derlemesini kendisi seçer ve foundation onunla birlikte gelir, böylece PantrixTheme hemen elinizin altındadır.

    build.gradle.kts

    kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("com.pantrixui:components:0.1.0-alpha03")
        }
        commonTest.dependencies {
            implementation("com.pantrixui:testing:0.1.0-alpha03")
        }
    }
}
    Öteki modüller
    com.pantrixui:testingEtiketle bulma, PantrixTestTheme, platformun hizmetlerinin yerine geçenler ve doğrulamalar
    com.pantrixui:material3Material 3'le iki yönlü köprü, ekranlarını birer birer taşıyan bir uygulama için
    com.pantrixui:detekt-rulesBir uygulamanın uyduğu kurallar, detektPlugins için
    com.pantrixui:mcpKodlama asistanları için MCP sunucusu

  3. Uygulamayı temaya sarın

    Tema platformu, sistemin koyu kipini, azaltılmış hareketini ve dilini okur. Altındaki her bileşen onlara uyar.

    App.kt

    import com.pantrixui.components.elements.button.PantrixButton
import com.pantrixui.foundation.theme.PantrixTheme

@Composable
fun App() {
    PantrixTheme {
        PantrixButton(text = stringResource(Res.string.save), onClick = { /* … */ }, tagKey = "save")
    }
}

  4. Markanızı verin

    Bir DesignPreset bir markanın açık ve koyu renklerini, yazısını, şekillerini ve bileşenlere özel ayarlarını tutar. Tema oluşturucu sizin için bir tane yazar.

    PantrixPreset.kt

    object PantrixPreset : DesignPreset {
    override val name = "Pantrix"
    override fun colors(dark: Boolean) = if (dark) PantrixDark else PantrixLight

    @Composable override fun typography() = rememberPantrixTypography()
    @Composable override fun shapes() = rememberPantrixShapes()
}

PantrixTheme(preset = PantrixPreset) { App() }

Her platformda

iOS
Katlanma köprüsü kütüphaneyle birlikte gelir: size ait bir cinterop da enableCInteropCommonization da gerekmez.
Web
Plus Jakarta Sans uygulamanın kaynaklarında gelir. Onu Compose başlamadan önce yükleyen bir sayfada yazı tipi hiç değişmez: Web yazı tipleri.
Android
Eklenecek bir şey yok: en dıştaki tema, etiketleri Maestro'nun ve UI Automator'ın bulduğu kaynak kimliklerine çevirir. Uygulamanın kendi Popup'ı ya da Dialog'u kökünde Modifier.pantrixAutomationRoot() taşır.

Sırada ne var