Modal

Uygulamanın kendi modal katmanı: bütün pencerenin üstünde bir perde ve onun üstünde, Pantrix'in bir modalının yaptığı her şeyle, uygulamanın çizdiği içerik. PantrixDialog'un ve PantrixCommandPalette'in üstünde durduğu katmandır; ikisinin de çizmediği bir katman için: kendi süzgeçleri olan bir arama, büyük gösterilen bir resim, bir telefonu dolduran bir düzenleyici.

import com.pantrixui.components.overlay.modal.PantrixModal

• Kendini kapatmaz. Geri, Escape ve perdeye basmak onDismissRequest'i çağırır; visible'ı çağıran kapatır. İçerik temanın hareketiyle girer ve çıkar; kapandıktan sonra modalın hiçbir şeyi çizilmez.
• Yeri. position içeriği pencerenin ortasına ya da üstüne koyar: Top, alanı yerinde kalan bir arama için. margin içerikle pencerenin güvenli alanı arasında kalan boşluktur; perdenin parçasıdır.
• Kendi sayfası. Boşluksuz bir margin, kendini dolduran içerik ve temanın zemini olan bir scrimColor modalı telefonda bir sayfa yapar.
• Katlanma. Bir katlanma pencereyi ikiye bölünce içerik açıldığı yarıda kalır; bir pencere çiziminin içinde açılan modal o çizimi pencere sayar.

Örnekler

Üstte bir arama

Kendi aramanız, pencerenin üstünde: alan yerinde kalır, sonuçlar altında büyüyüp küçülür. Escape, geri ya da perdeye basmak kapatır; bir sonuca basmak da.

var searching by remember { mutableStateOf(false) }
var query by remember { mutableStateOf("") }
PantrixButton(
    text = "Aramayı aç",
    onClick = { searching = true },
    variant = ButtonVariant.Outline,
    tagKey = "search"
)
PantrixModal(
    visible = searching,
    onDismissRequest = { searching = false },
    position = ModalPosition.Top,
    paneTitle = "Ara",
    tagKey = "search"
) {
    PantrixSurface(Modifier.widthIn(max = 560.dp), shape = PantrixTheme.shapes.lg, elevation = 8.dp) {
        Column(Modifier.padding(PantrixTheme.spacing.md)) {
            PantrixTextField(
                value = query,
                onValueChange = { query = it },
                modifier = Modifier.fillMaxWidth(),
                placeholder = "Bir sayfa ara",
                // Etiketi olmayan alanın ekran okuyucudaki adı.
                contentDescription = "Sayfa ara",
                tagKey = "search_query"
            )
            // Her sonucun anahtarı sözleri değil, listedeki yeridir.
            PAGES.withIndex().filter { it.value.contains(query, ignoreCase = true) }.forEach { (index, page) ->
                PantrixListItem(
                    headline = page,
                    leading = { PantrixIcon(PantrixIcons.File, contentDescription = null) },
                    onClick = { searching = false },
                    tagKey = "result_$index"
                )
            }
        }
    }
}

private val PAGES = listOf("Kurulum", "Temalar", "Bileşenler", "Rehberler", "Değişiklik günlüğü")

Kendi sayfası

Telefonda bir sayfa: boşluksuz bir margin, temanın zemini olan perde ve kendini dolduran içerik. Pencerenin çubuklarının arkası da zeminin renginde kalır.

var editing by remember { mutableStateOf(false) }
var note by remember { mutableStateOf("Pazartesi: tasarımı gözden geçir") }
PantrixButton(text = "Notu düzenle", onClick = { editing = true }, variant = ButtonVariant.Outline, tagKey = "edit")
PantrixModal(
    visible = editing,
    onDismissRequest = { editing = false },
    margin = PaddingValues(),
    paneTitle = "Not",
    scrimColor = PantrixTheme.colors.background,
    tagKey = "editor"
) {
    Column(
        Modifier.fillMaxSize().padding(PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            PantrixText(text = "Not", style = PantrixTheme.typography.title, modifier = Modifier.weight(1f))
            PantrixButton(text = "Bitti", onClick = { editing = false }, tagKey = "done")
        }
        PantrixTextArea(value = note, onValueChange = { note = it }, label = "Not", tagKey = "note")
    }
}

Bir karar isteyen

Bir karar verilmeden kapanmayan bir modal: perdeye basmak da geri de bir şey yapmaz (dismissOnScrimClick ve dismissOnBack kapalı); içerikteki iki düğmeden biri seçilir.

var asking by remember { mutableStateOf(false) }
var answer by remember { mutableStateOf("Henüz seçilmedi") }
PantrixButton(
    text = "Şartları göster",
    onClick = { asking = true },
    variant = ButtonVariant.Outline,
    tagKey = "terms"
)
PantrixText(text = answer, style = PantrixTheme.typography.footnote, tagKey = "answer")
PantrixModal(
    visible = asking,
    onDismissRequest = { asking = false },
    paneTitle = "Kullanım şartları",
    dismissOnScrimClick = false,
    dismissOnBack = false,
    tagKey = "decision"
) {
    PantrixSurface(Modifier.widthIn(max = 420.dp), shape = PantrixTheme.shapes.lg) {
        Column(
            Modifier.padding(PantrixTheme.spacing.lg),
            verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
        ) {
            PantrixText(text = "Devam etmek için kullanım şartlarını kabul edin.")
            Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
                PantrixButton(
                    text = "Kabul et",
                    onClick = {
                        answer = "Kabul edildi"
                        asking = false
                    },
                    tagKey = "accept"
                )
                PantrixButton(
                    text = "Reddet",
                    onClick = {
                        answer = "Reddedildi"
                        asking = false
                    },
                    variant = ButtonVariant.Outline,
                    tagKey = "decline"
                )
            }
        }
    }
}

API

visible

Uygulamanın kendi modal katmanı: bütün pencerenin üstünde bir perde ve onun üstünde, Pantrix'in bir modalının yaptığı her şeyle, uygulamanın çizdiği içerik. PantrixDialog'un ve PantrixCommandPalette'in üstünde durduğu katmandır; ikisinin de çizmediği bir katman için: kendi süzgeçleri olan bir arama, büyük gösterilen bir resim, bir telefonu dolduran bir düzenleyici.

Erişilebilirlik

• Odak içinde kalır. Klavyeyle açılınca odak içeriğin ilk denetimine geçer, Tab içeride döner ve altındaki uygulamaya gitmez; dokunarak açılınca odak olduğu yerde kalır, yazılım klavyesi istenmeden açılmaz. Kapanınca odak eski yerine döner.
• Ekran okuyucu. paneTitle modal açılırken okunur; perde içerikten sonra tek bir "Kapat" eylemidir.