Pantrix UI

Tek kod tabanı. Dört platform. Her biri kendi evinde.

Pantrix UI, Compose Multiplatform için bir tasarım sistemi: Compose Foundation üstünde 100 bileşen, Material'a hiçbir bağımlılık olmadan, ve Android'in, iOS'un, masaüstünün ve web'in alışkanlıklarını izleyen tek bir tema.

›

implementation("com.pantrixui:components:0.1.0-alpha03")

platform = PlatformType.Ios

iOS: 44pt dokunma hedefleri, basınca %97'ye küçülen yuvarlak düğmeler, 44pt yüksekliğinde alanlar.

100

bileşen

6

Kotlin hedefi, Android'den Wasm'a

4

platform hazır ayarı, tek temada

3

dil, sağdan sola dahil

0

Material bağımlılığı

TEK TEMA, DÖRT AYRI ALIŞKANLIK

Aynı düğme her yerde aynı değil.

Tema üzerinde çalıştığı platformu bilir. Dokunma hedefleri, düğmenin biçimi, basışa verdiği karşılık ve alanın yüksekliği o platformu izler; PantrixTheme(platform = …) bir önizlemede ya da testte başka birini ister.

BİR KEZ YAZ

Zaten yazacağın Kotlin.

Her bileşen bir durum, bir etiket ve bir tagKey alır. Test etiketi onu bir testte ve bir Maestro akışında bulur; görünen etiketi ekran okuyucu okur; gerisi temadan gelir.

Uzayan, sonra kayan, daha ne kadar yazılabileceğini sayan metin kutuları

iOS'ta dışarıya bir dokunuş klavyeyi kapatır

TextArea_comment gibi etiketler, görünen metinden asla

commonMain
@Composable
fun ReviewForm(onSend: (String) -> Unit) {
    val comment = rememberTextFieldState()
    PantrixTheme(preset = PantrixPreset) {
        Column(Modifier.clearFocusOnTap(), verticalArrangement = Arrangement.spacedBy(16.dp)) {
            PantrixTextArea(
                state = comment,
                label = stringResource(Res.string.comment),
                maxLength = 280,
                tagKey = "comment"
            )
            PantrixButton(
                text = stringResource(Res.string.send),
                onClick = { onSend(comment.text.toString()) },
                tagKey = "send"
            )
        }
    }
}

YANINDA GELENLER

Her Compose Multiplatform uygulamasının karşılaştığı sorunlar, bir kez çözülmüş.

KODLAMA ASİSTANLARI İÇİN

Asistanın Material değil, Pantrix yazar.

Belgeler her derlemede kütüphanenin kendi kaynaklarından yazılır. Bir asistan onları MCP sunucusundan, beceriden ya da llms.txt üzerinden okur; buradaki her sayfada geri kalanı için bir "Sayfayı kopyala" düğmesi var.

MCP server

Skill

llms.txt

pantrix-ui.json

Uçbirim
$ claude mcp add -t http pantrix-ui https://pantrixui.com/mcp

> Her siparişin altına en çok 280 karakterlik bir yorum kutusu
  search_components("comment, several lines")
  get_component("PantrixTextArea")
  PantrixTextArea(state = comment, label = …, maxLength = 280, tagKey = "comment")

SENİN MARKAN

Bir markanın görünüşü tek bir DesignPreset içinde.

Açık ve koyu için renkler, yazı ölçeği, şekiller ve herhangi bir bileşenin özel ayarları. Bu site Pantrix adında birini giyiyor. Kendininkini tema oluşturucuda kur, Kotlin olarak al.

primary

#2264FF

primary.​container

#ECF3FE

textPrimary

#05070A

success

#1A8556

warning

#B95D15

danger

#C42A55

Pantrix mavisi, 50'den 700'e

Gradle'da tek satırla başla.

Android 11 ve üstü, iOS, masaüstünün JVM'i ve tarayıcının Wasm'ı ile JavaScript'i, tek bir kaynak kümesinden.

P

Pantrix UI

Compose Multiplatform için bir tasarım sistemi ve uyarlanabilir arayüz kütüphanesi.

Belgeler

Bileşenler

Kaynaklar

Apache License 2.0

·

Türkçe