Bileşen: Toast Mesajı (Toast Message)

Toast bileşeni, sistem olayları veya kullanıcı eylemleri hakkında gerçek zamanlı geri bildirim sağlamak için kullanılan kısa süreli ve otomatik olarak süresi dolan bir bildirimdir. Yüksek görünürlük ancak düşük kesinti sağlayacak şekilde tasarlanmıştır; kullanıcının mevcut iş akışını bozmadan uygulama içeriğinin üzerinde görünür.

Anatomi

Toast şu öğelerden oluşur:

• Özel Mesaj (Custom Message): Kullanıcıya net ve öz geri bildirim sağlayan dinamik bir dize (string).
• Zaman Damgası (Timestamp): Olayın tetiklendiği tam zamanın kaydı olup, kronolojik takibi kolaylaştırır.
• Kapatma Simgesi (Close Icon): Kullanıcının bildirimi manuel olarak kapatmasına olanak tanıyan özel bir etkileşimli öğe.

Özellikler (CoDeSys)

Bileşeni uygularken, içeriğini ve davranışını tanımlamak için aşağıdaki özellikler kullanılır:

Örnek kullanım:

Kullanım Kılavuzu

Mesaj Yapılandırması

Toast mesajı bir string (metin) olarak sağlanır. Bileşenin rahatsız etmeyen doğasını korumak için mesajlar kısa tutulmalıdır. Bir bakışta maksimum okunabilirlik sağlamak için bu metin içinde karmaşık biçimlendirmelerden kaçınılması önerilir.

Davranış ve Kalıcılık

• Otomatik Süre Sonu (Auto-Expiry): Bileşen, duration özelliği tarafından tanımlanan bir yaşam döngüsünü takip eder. Süre dolduğunda, toast otomatik olarak animasyonla kaybolur. Eğer duration değeri 0 olarak ayarlanırsa, toast kullanıcı manuel olarak kapatana kadar süresiz olarak gösterilir.
• Manuel Kapatma: Kapatma Simgesi, kullanıcıların bildirimi anında temizlemesi için bir seçenek sunarak arayüzün kullanıcı kontrolünde kalmasını sağlar.

CSS Değişkenleri

Toast'un görünümünü özelleştirmek için aşağıdaki CSS değişkenleri yeniden atanabilir:

--toast-bg
--toast-accent-color
--toast-border
--toast-height
--toast-width 
--toast-padding 
--toast-font-size 
--toast-font-color
--toast-icon-color 
--toast-icon-size