Alert

Yumuşak renkli bir yüzey üzerinde satır içi bildirim. Kullanıcıya bulunduğu sayfayı etkileyen bir şeyi söyler: başarısız bir senkronizasyon, biten bir deneme süresi, başarılı bir ödeme.

KararlıKaynak kod

Yeni sürüm hazır

En son özellikleri almak için sayfayı yenile.

<Alert title="Yeni sürüm hazır">
En son özellikleri almak için sayfayı yenile.
</Alert>

Import

tsx

import { Alert } from "@merid/react";

Örnekler

Tonlar

Her tonun kendi arka plan rengi, metin rengi ve ikonu vardır.

Bilgin olsun

Bakım pazar günü 02:00 UTC'de yapılacak.

Ödeme alındı

Faturan ödendi olarak işaretlendi.

Depolama alanı dolmak üzere

Kotanın %92'sini kullandın.

Senkronizasyon başarısız

Sunucuya ulaşılamadı. Bağlantını kontrol et.

<Alert tone="info" title="Bilgin olsun">Bakım pazar günü 02:00 UTC'de yapılacak.</Alert>
<Alert tone="success" title="Ödeme alındı">Faturan ödendi olarak işaretlendi.</Alert>
<Alert tone="warning" title="Depolama alanı dolmak üzere">Kotanın %92'sini kullandın.</Alert>
<Alert tone="danger" title="Senkronizasyon başarısız">Sunucuya ulaşılamadı. Bağlantını kontrol et.</Alert>

Aksiyonlu

action, bir buton ya da kapatma için bir IconButton koyabileceğin sondaki slot'tur. Kapatma işi sende: alert'i kendi state'inden kaldır.

Deneme süren 3 gün sonra bitiyor

Çalışma alanını kaybetmemek için bir ödeme yöntemi ekle.

2 üye onay bekliyor.

<Alert
tone="warning"
title="Deneme süren 3 gün sonra bitiyor"
action={<IconButton size="sm" label="Kapat" icon={<CloseIcon />} onClick={() => setOpen(false)} />}
>
Çalışma alanını kaybetmemek için bir ödeme yöntemi ekle.
</Alert>

<Alert tone="info" action={<Button size="sm">İncele</Button>}>
2 üye onay bekliyor.
</Alert>

İkonsuz ve live region'sız

icon={null} ikonu gizler; herhangi bir node verirsen ikonun yerini alır. live="off" rolü olmayan sade bir not render'lar.

İkonu ve live region'ı olmayan sade bir not.

<Alert icon={null} live="off">
İkonu ve live region'ı olmayan sade bir not.
</Alert>

API referansı

Bir div render'lar; ref ve diğer div attribute'ları iletilir (native title attribute'unun yerini title prop'u alır).

Prop	Tip	Varsayılan	Açıklama
`tone`	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Renk tonu ve varsayılan ikon.
`title`	`ReactNode`	–	Orta kalınlıkta ilk satır.
`icon`	`ReactNode \| null`	–	Baştaki ikon. Varsayılan olarak tona ait simge; null ikonu gizler.
`action`	`ReactNode`	–	Sondaki slot; örneğin bir aksiyon butonu ya da kapatma için bir IconButton.
`live`	`"polite" \| "assertive" \| "off"`	–	Live region davranışı. Varsayılan olarak info/success için polite, warning/danger için assertive.
`children`	`ReactNode`	–	Gövde metni.

Stil verme

Seçici	Değerler
`.mrd-alert`	Root
`.mrd-alert__icon`	İkon slot'u
`.mrd-alert__content`, `__title`, `__body`	Metin kolonu
`.mrd-alert__action`	Sondaki aksiyon slot'u
`data-tone`	`info` · `success` · `warning` · `danger`

Component değişkenleri: --mrd-alert-bg ve --mrd-alert-fg; her ton için ilgili -soft ve -strong token'larına ayarlanır.

css

.billing .mrd-alert[data-tone="info"] {
  --mrd-alert-bg: var(--mrd-tray);
  --mrd-alert-fg: var(--mrd-ink);
}

Erişilebilirlik

polite, role="status"; assertive, role="alert" render'lar. Live region'lar yalnızca mount olduktan sonra değişen içeriği okur; bu yüzden hidden'ı açıp kapatmak yerine alert'i olay gerçekleştiğinde render'la.
Sayfa yüklenirken zaten orada olan sabit notlar için live="off" kullan; ekran okuyucular araya girmesin.
İkon dekoratiftir; anlamı başlık ve gövde taşır, o yüzden yalnızca renge güvenme.

Kullanım ilkeleri

Yap

Ne olduğunu ve sırada ne yapılacağını bir iki cümlede söyle: “Senkronizasyon başarısız. Bağlantını kontrol et.”

Kaçın

Sayfanın üstüne birden çok alert yığmak ya da hata olmayan bir şey için danger kullanmak.

Yap

Alert'i mevcut sayfaya bağlı ve görünür kalması gereken mesajlar için kullan.

Kaçın

Kısa ömürlü onaylar için kullanmak; onlar bir Toast işi.

İlgili sayfalar

Toast: geçici bildirimler için.
AlertDialog: yanıt bekleyen onaylar için.
Badge: kompakt durum etiketleri için.