SnackbarSnackbar
Snackbar bileşeni, sayfada kısa uygulama süreci bilgilerini görüntülemek için kullanılır.
Bu bileşeni doğrudan kullanmanın yanı sıra, mdui ayrıca Snackbar bileşeninin kullanımını kolaylaştıran bir mdui.snackbar fonksiyonu sunar.
Bileşeni ihtiyacınıza göre içe aktarın:
import 'mdui/components/snackbar.js';
Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:
import type { Snackbar } from 'mdui/components/snackbar.js';
Kullanım örneği:
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar class="example-snackbar">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
placement özniteliği aracılığıyla Snackbar'ın görüntüleneceği konumu ayarlayabilirsiniz.
Fotoğraf arşivlendi
üst-sol
Fotoğraf arşivlendi
üst
Fotoğraf arşivlendi
üst-sağ
Fotoğraf arşivlendi
alt-sol
Fotoğraf arşivlendi
alt
Fotoğraf arşivlendi
alt-sağ
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">üst-sol</mdui-button>
<mdui-snackbar placement="top">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">üst</mdui-button>
<mdui-snackbar placement="top-end">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">üst-sağ</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">alt-sol</mdui-button>
<mdui-snackbar placement="bottom">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">alt</mdui-button>
<mdui-snackbar placement="bottom-end">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button variant="outlined">alt-sağ</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
Kaynak Kodu
Snackbar'ın sağ tarafına bir işlem butonu eklemek için action özniteliğini kullanabilir ve butonun metnini bu öznitelik aracılığıyla belirtebilirsiniz. İşlem butonuna tıklamak action-click olayını tetikler. İşlem butonunun yükleniyor durumunda görünmesini istiyorsanız action-loading özniteliğini ekleyebilirsiniz.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar action="Geri Al" class="example-action">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak KoduAyrıca action slot'u aracılığıyla Snackbar'ın sağ tarafına özel bir öğe de ekleyebilirsiniz.
Fotoğraf arşivlendi
Geri Al
Snackbar'ı Aç
<mdui-snackbar class="example-action-slot">
Fotoğraf arşivlendi
<mdui-button slot="action" variant="text">Geri Al</mdui-button>
</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak Kodu
closeable özniteliğini ekledikten sonra, Snackbar'ın sağ tarafında bir kapatma butonu belirir. Bu butona tıklamak Snackbar'ı kapatır ve close olayını tetikler.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar closeable class="example-closeable">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak KoduKapatma butonunun öğesini close-button slot'u aracılığıyla özelleştirebilirsiniz.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar closeable class="example-close-button-slot">
Fotoğraf arşivlendi
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak KoduVarsayılan kapatma butonundaki Material Icons simgesini değiştirmek için close-icon özniteliğini kullanabilirsiniz. Ayrıca kapatma butonundaki simge öğesini close-icon slot'u aracılığıyla da özelleştirebilirsiniz.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak Kodu
Varsayılan olarak, mesaj metninin satır sayısı sınırlandırılmamıştır. Metin satır sayısını message-line özniteliği aracılığıyla sınırlayabilirsiniz, en fazla 2 satır olabilir.
Öğe zaten "seyahat" etiketine sahip. Yeni bir etiket ekleyebilirsiniz. Yeni bir etiket ekleyebilirsiniz.
Snackbar'ı Aç
<mdui-snackbar message-line="1" class="example-line">Öğe zaten "seyahat" etiketine sahip. Yeni bir etiket ekleyebilirsiniz. Yeni bir etiket ekleyebilirsiniz.</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak Kodu
Otomatik kapanma gecikmesini ayarlamak için auto-close-delay özniteliğini kullanabilirsiniz. Birim milisaniyedir. Varsayılan değer 5000 milisaniyedir.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak Kodu
close-on-outside-click özniteliğini ekleyerek, Snackbar'ın dışındaki bir alana tıklandığında Snackbar'ın kapanmasını sağlayabilirsiniz.
Fotoğraf arşivlendi
Snackbar'ı Aç
<mdui-snackbar close-on-outside-click class="example-outside">Fotoğraf arşivlendi</mdui-snackbar>
<mdui-button>Snackbar'ı Aç</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
Kaynak Kodu| Öznitelik | Özellik | Reflect | Tür | Varsayılan |
|---|
open | open | | boolean | false |
Snackbar'ın gösterilip gösterilmeyeceği.
|
placement | placement | | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'bottom' |
Snackbar'ın gösterim konumu. Varsayılan bottom'dır. Olası değerler:
top: Üstte ortalanmıştop-start: Üstte sola hizalıtop-end: Üstte sağa hizalıbottom: Altta ortalanmışbottom-start: Altta sola hizalıbottom-end: Altta sağa hizalı
|
action | action | | string | - |
İşlem butonunun metni. slot="action" ile işlem butonu da ayarlanabilir.
|
action-loading | actionLoading | | boolean | false |
İşlem butonunun yüklenme durumunda olup olmadığı.
|
closeable | closeable | | boolean | false |
Sağ tarafta kapatma butonu gösterilip gösterilmeyeceği.
|
close-icon | closeIcon | | string | - |
Kapatma butonunun Material Icons simge adı. slot="close-icon" ile de ayarlanabilir.
|
message-line | messageLine | | 1 | 2 | - |
Mesaj metninin maksimum görüntülenme satır sayısı. Varsayılan olarak sınır yoktur. Olası değerler:
1: En fazla bir satır gösterir2: En fazla iki satır gösterir
|
auto-close-delay | autoCloseDelay | | number | 5000 |
Otomatik kapanma gecikme süresi (milisaniye). 0 olarak ayarlanırsa otomatik kapanmaz. Varsayılan 5000 milisaniyedir.
|
close-on-outside-click | closeOnOutsideClick | | boolean | false |
Snackbar dışındaki bir alana tıklandığında veya dokunulduğunda Snackbar'ın kapanıp kapanmayacağı.
|
| Ad |
|---|
open |
Snackbar gösterilmeye başladığında tetiklenir. event.preventDefault() çağrılarak Snackbar'ın gösterilmesi engellenebilir.
|
opened |
Snackbar gösterim animasyonu tamamlandığında tetiklenir.
|
close |
Snackbar gizlenmeye başladığında tetiklenir. event.preventDefault() çağrılarak Snackbar'ın kapanması engellenebilir.
|
closed |
Snackbar gizleme animasyonu tamamlandığında tetiklenir.
|
action-click |
İşlem butonuna tıklandığında tetiklenir.
|
| Ad |
|---|
| Varsayılan |
Snackbar'ın mesaj metin içeriği.
|
action |
Sağdaki işlem butonu.
|
close-button |
Sağdaki kapatma butonu. closeable özelliğinin true olarak ayarlanması gerekir.
|
close-icon |
Kapatma butonundaki simge.
|
Önceki Bölüm
Slider Kaydırıcı
Sonraki Bölüm
Switch Anahtar
