Alert

Kullanıcının o an yaptığı işle ilgili bir mesaj; ilgili olduğu şeyin yanında gösterilir: az önce gönderilen form, silinmek üzere olan satır, bir kez daha bakılması gereken tek alan.

import com.pantrixui.components.container.alert.PantrixAlert

• Altı ton. tone alert'in rengini, ikonunu ve nasıl duyurulduğunu seçer. Anlamlı dört ton, Info, Success, Warning ve Danger, işin nasıl gittiğini üç yoldan söyler: renk tek başına onu göremeyene ulaşmaz. Primary ve Neutral bunu söylemez ve kendi ikonları yoktur.
• Üç çizim. variant: Soft tonun soluk dolgusu, Outline dolgusuz bir kenar, Accent dolguyla birlikte baş kenarda bir çubuk: soldan sağa düzende solda, sağdan sola düzende sağda.
• Bağlantılı mesaj. message bir AnnotatedString da olabilir: içindeki LinkAnnotation alert'in yazı renginde, altı çizili bir bağlantı olur.
• Başlık ve ikon. title mesajın üstünde, daha kalın bir satırdır. icon tonun kendi ikonunun yerine başka bir ikon koyar ya da null ile ikonu kaldırır.
• Eylem. action mesajın altına, bitiş kenarına bir ya da iki küçük düğme koyar.
• Kapatma. onDismiss verilince bir kapatma düğmesi çıkar. Alert kendiliğinden kaybolmaz: çağıran onu göstermeyi bırakana kadar durur.
• İlk satır. İkon ve kapatma düğmesi, yazı ne kadar büyütülürse büyütülsün, metnin ilk satırında durur. İkonlu ve ikonsuz alert aynı yüksekliktedir.
• Platform. Köşeler Android'de ve iOS'ta orta, masaüstünde ve web'de küçüktür; iç boşluk 12dp ve 10dp, çubuk 4dp ve 3dp'dir (AlertStyle).
• Yazı. textStyle mesajın yazısını, başlık onun kalınıyla, değiştirir; ikon ve kapatma düğmesi o yazının ilk satırında durur.
• Kendi renkleri. AlertColors dolguyu, yazının ve tonu işaretleyenlerin rengini, border ikondan ayrı bir kenarın rengini verir; ikonu ve duyurulma biçimini yine ton belirler.
• Otomasyon. tagKey ile alert Alert_<tagKey>, kapatma düğmesi AlertClose_<tagKey> olur. Bir kapatma, tonu ve çizimiyle bildirilir; mesajıyla hiçbir zaman.

Örnekler

Mesaj ve başlık

En az yazılan hâli yalnızca message'dır: ton Info, çizim Soft olur, ikon tondan gelir. Alert bulunduğu yerin genişliğini doldurur.

title mesajın üstüne daha kalın yazılan bir satır koyar: alert'in neyle ilgili olduğunu birkaç sözcükle söyler. Ekran okuyucu başlığı ve mesajı tek parça duyar.

PantrixAlert(message = "Profil fotoğrafınız güncellendi", tagKey = "plain")
PantrixAlert(
    message = "Yeni adresinize bir doğrulama bağlantısı gönderdik",
    title = "E-postanızı doğrulayın",
    tagKey = "titled"
)

Altı ton

tone temanın bir renk rolüdür; alert'in rengini, ikonunu ve ekran okuyucuya nasıl duyurulduğunu birlikte seçer. Anlamlı dört ton üç yoldan ulaşır: renk, ikon ve duyurulma biçimi. Danger araya girerek duyurulan tek tondur.

Primary ve Neutral işin nasıl gittiğini söylemez; ikonları yoktur. Onlardaki alert, çevresindeki metinden ayrılmış bir nottur: denenecek bir özellik, gözü çağırmayan bir bilgi.

PantrixAlert(message = "Yeni sürüm kurulmaya hazır", tagKey = "info")
PantrixAlert(message = "Değişiklikleriniz kaydedildi", tone = AlertTone.Success, tagKey = "success")
PantrixAlert(message = "Depolama alanınız dolmak üzere", tone = AlertTone.Warning, tagKey = "warning")
PantrixAlert(message = "Mesaj gönderilemedi", tone = AlertTone.Danger, tagKey = "danger")
PantrixAlert(message = "Yeni düzenleyiciyi deneyin", tone = AlertTone.Primary, tagKey = "primary")
PantrixAlert(message = "Son açılış: dün", tone = AlertTone.Neutral, tagKey = "neutral")

Üç çizim

variant alert'in nasıl çizildiğini seçer: soluk dolgu, yalnızca kenar ya da dolguyla birlikte baş kenarda bir çubuk. Soft varsayılandır ve bir sayfanın üstünde istenen odur. Accent alt alta duran uyarıları bir bakışta ayırır.

Outline bir kart ya da bir dialog içindir: soluk bir dolgu onların kendi dolgusunda kaybolurdu. Buradaki, dolgulu bir kartın içinde: kendi dolgusu olmadığı için kartın dolgusu görünür ve yazısı kartın üstünde okunan renkle yazılır. Bu alert'in announce'u da false: kullanıcı gelmeden önce orada duran bir not, belirdiğinde duyurulmaz.

PantrixAlert(
    message = "Soluk dolgu: sayfanın üstünde böyle durur",
    title = "Soft",
    tagKey = "soft"
)
PantrixCard(modifier = Modifier.fillMaxWidth(), variant = CardVariant.Filled) {
    PantrixAlert(
        message = "Arşivlenmiş kayıtlar değiştirilemez",
        variant = AlertVariant.Outline,
        title = "Outline: salt okunur",
        // Kullanıcı geldiğinde zaten buradaydı: ekran okuyucu ona sırası gelince ulaşır.
        announce = false,
        tagKey = "outline"
    )
}
PantrixAlert(
    message = "Alt alta duran uyarılar bir bakışta ayrılır",
    tone = AlertTone.Success,
    variant = AlertVariant.Accent,
    title = "Accent",
    tagKey = "accent"
)

İkonu değiştirmek ve kaldırmak

icon yazının önündeki işarettir: verilmezse tonun kendi ikonu, null verilirse hiçbiri. Primary ve Neutral tonun kendi ikonu yoktur; burada ikisine birer ikon verildi. İkon hiçbir zaman okunmaz: neyi anlattığını mesaj söyler.

İkonlu ve ikonsuz alert aynı yüksekliktedir: metnin ilk satırı, yanında ikon olsun olmasın bir ikon kadar yer tutar.

PantrixAlert(message = "İkonu kaldırılmış bir bilgi notu", icon = null, tagKey = "no_icon")
PantrixAlert(
    message = "Favorilerinize eklendi",
    tone = AlertTone.Primary,
    icon = PantrixIcons.Star,
    tagKey = "star_icon"
)
PantrixAlert(
    message = "Toplantı yarın 10.00'da",
    tone = AlertTone.Neutral,
    icon = PantrixIcons.Calendar,
    tagKey = "calendar_icon"
)

Eylem ve kapatma

İki eylemi ve kapatma düğmesi olan uyarı. action düğmeleri mesajın altına, bitiş kenarına koyar. Metin düğmesinin kendi rengi markanınkidir; tonun rolünden alınan buttonColors(ButtonVariant.Text) onu tonun renginde çizer ve tonun dolgusunda o okunur.

onDismiss verildiği için bir kapatma düğmesi var. Çarpıya ya da "Sonra"ya bas: alert'i kaldıran alert değil, ekranın durumudur; yerine onu geri getiren düğme gelir. Ekran okuyucu kullanan biri alert'i düğmeyi aramadan, kapatma eylemiyle de kapatır.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
var shown by rememberSaveable { mutableStateOf(true) }
// Metin düğmesinin kendi rengi markanınkidir; uyarının dolgusunda tonun kendi rengi okunur.
val inTheTone = PantrixTheme.colors.warning.buttonColors(ButtonVariant.Text)
if (shown) {
    PantrixAlert(
        message = "Yeni fotoğraflar yedeklenemeyebilir",
        tone = AlertTone.Warning,
        variant = AlertVariant.Accent,
        title = "Depolama alanınız dolmak üzere",
        action = {
            PantrixButton(
                text = "Sonra",
                onClick = { shown = false },
                variant = ButtonVariant.Text,
                size = ButtonSize.Small,
                colors = inTheTone,
                tagKey = "storage_later"
            )
            PantrixButton(
                text = "Yönet",
                onClick = { scope.launch { snackbars?.show(message = "Depolama açıldı", tagKey = "storage") } },
                variant = ButtonVariant.Text,
                size = ButtonSize.Small,
                colors = inTheTone,
                tagKey = "storage_manage"
            )
        },
        onDismiss = { shown = false },
        tagKey = "storage"
    )
} else {
    PantrixButton(
        text = "Uyarıyı yeniden göster",
        onClick = { shown = true },
        variant = ButtonVariant.Outline,
        tagKey = "storage_again"
    )
}

Form hatası

Gönderilince hata veren bir form. "Gönder"e bas: hata alert'i o anda düğmenin üstünde belirir. Tonu Danger olduğu için ekran okuyucuya hemen, o an söylediğinin arasına girerek duyurulur. Çarpı onu kaldırır.

var failed by rememberSaveable { mutableStateOf(false) }
if (failed) {
    PantrixAlert(
        message = "Adresi denetleyip birkaç dakika sonra yeniden deneyin",
        tone = AlertTone.Danger,
        title = "Gönderilemedi",
        onDismiss = { failed = false },
        tagKey = "form_error"
    )
}
PantrixButton(text = "Gönder", onClick = { failed = true }, tagKey = "form_send")

Bağlantılı mesaj

Mesaj bir AnnotatedString da olabilir: bir sözcüğü kalın yazmak ya da bir bağlantı koymak için. Bağlantı bir LinkAnnotation'dır; alert onu yazısının renginde ve altı çizili çizer. LinkAnnotation.Clickable basılınca uygulamanın kendi işini yapar, LinkAnnotation.Url adresi tarayıcıda açar.

val report = LocalExampleEvents.current
PantrixAlert(
    message = buildAnnotatedString {
        append("Bu sayfa bir sonraki sürümde kalkacak. Yerine ")
        withLink(LinkAnnotation.Clickable(tag = "guide") { report("Yeni rehber açıldı") }) {
            append("yeni rehbere")
        }
        append(" bakın.")
    },
    tone = AlertTone.Warning,
    title = "Eski sayfa",
    tagKey = "with_link"
)

Kendi renkleriyle

Dolgusu, yazısı ve işaretlerinin rengi dışarıdan verilen bir alert. AlertColors üç renk alır: dolgu (container), yazı (content) ve tonu işaretleyenler (accent): ikon, Outline'ın kenarı ve Accent'in çubuğu. Verilmeyen renk tonunki kalır. İkonu ve duyurulma biçimi yine tonundan gelir: değişen yalnızca neyle boyandığıdır.

val own = ownColors()
PantrixAlert(
    message = "Dolgusu, yazısı ve işaretlerinin rengi dışarıdan verildi",
    variant = AlertVariant.Accent,
    colors = AlertColors(container = own.container, content = own.onContainer, accent = own.color),
    tagKey = "own"
)
PantrixText(
    text = "Renkler AlertColors ile verilir; verilmeyen renk tonunki kalır.",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary
)

Kendi stiliyle

style alert'in geometrisini değiştirir: köşeleri, iç boşluğu, parçalarının arasını, Outline'ın kenarının ve Accent'in çubuğunun kalınlığını. Yalnızca verilen alanlar değişir, gerisi platformun stilinden gelir.

Üçüncüsü bir not: dolgusu ve ikonu tonun, kenarı onlardan ayrı bir renkte (AlertColors(border = …)), iç boşluğu yatayda ve dikeyde ayrı (horizontalPadding, verticalPadding), yazısı temanın label'ı (textStyle): ikon ve kapatma düğmesi o yazının ilk satırında durur, rengi yine alert'indir.

PantrixAlert(
    message = "Köşeli, çubuk 8dp",
    tone = AlertTone.Success,
    variant = AlertVariant.Accent,
    style = AlertStyle(shape = ShapeSpec.Fixed(RectangleShape), accentWidth = 8.dp),
    tagKey = "own_style_accent"
)
PantrixAlert(
    message = "İç boşluk 20dp, kenar 2dp",
    tone = AlertTone.Warning,
    variant = AlertVariant.Outline,
    style = AlertStyle(padding = 20.dp, borderWidth = 2.dp),
    tagKey = "own_style_outline"
)
PantrixAlert(
    message = "Kenar dolgudan ve ikondan ayrı bir renkte; iç boşluk yatayda 14, dikeyde 10dp; yazı etiket boyunda",
    tone = AlertTone.Warning,
    style = AlertStyle(horizontalPadding = 14.dp, verticalPadding = 10.dp),
    colors = AlertColors(border = PantrixTheme.colors.warning.color.copy(alpha = 0.45f)),
    tagKey = "own_style_note",
    textStyle = PantrixTheme.typography.label
)

API

message

Kullanıcının o an yaptığı işle ilgili bir mesaj; ilgili olduğu şeyin yanında gösterilir: az önce gönderilen form, silinmek üzere olan satır, bir kez daha bakılması gereken tek alan.

message

Sözcüklerden fazlasını taşıyan bir mesaj için PantrixAlert: kod olarak yazılan bir değer, kalın yazılan bir sözcük, daha fazlasını söyleyen sayfaya bir bağlantı. Öteki biçim gibi çizilir, duyurulur ve bildirilir; ekran okuyucu mesajın sözcüklerini başlıkla birlikte duyar ve her bağlantıya, eyleme ulaştığı gibi, ayrı ayrı ulaşır.

AlertStyle

PantrixAlert'in geometrisi: köşeleri, içindekilerin çevresindeki ve parçalarının arasındaki boşluk, bir de çizimlerinin çektiği iki çizgi, yani çepeçevre bir kenar ya da baş kenar boyunca bir çubuk.

AlertColors

Tonunun renklerini almayan bir PantrixAlert'in boyandığı renkler: verilen renk kullanılır, verilmeyen tonunki kalır.

Erişilebilirlik

• Ekran okuyucu. Başlık ve mesaj tek parça okunur, eylem ve kapatma düğmesi onlardan sonra. Alert belirdiğinde ya da değiştiğinde duyurulur: Danger araya girerek, ötekiler sırasını bekleyerek. announce = false kapatır.