TORİ
İşlevi
Tori basit bir şekilde bildiriim mesajları ve modallar oluşturmanızı sağlayan bir kütüphanedir
Kullanım
Eğer react gibi bir projede kullanıyorsanız ilk önce
npm i t0ri
diyerek kütüphaneyi npm aracılığıyla yüklememiz gerek.
Ardından index js dosyasında cssi import etmek için aşağıdaki kodu eklemeniz gerekir
import 't0ri/dist/css/tori.min.css'
ardından kullanıcağımız sayfada
import { Notification, Modal } from 't0ri'
const tori = new Notification()
diyerek t0ri 'yi kullanabilirsiniz.
Eğer normal bir projede kullanıcaksanız
const { Notification, Modal } = tori;
const tori = new Modal()
diyerek t0ri metodlarına ulaşabilirsiniz
Örnek Kod (Bildirim)
notification.notification("t0ri success mesajı deneme mesajı", {
type: "error",
duration: 5000
});
notification.notification("t0ri error mesajı deneme mesajı", {
type: "success",
duration: 5000
});
Yukarıdaki kodda type özelliği mesajın tipini, duration özelliği ise bildirimin ekranda (ms cinsinden) ne kadar süre kalacağını belirler.
for (let i = 0; i < 5; i++) {
notification.notification("t0ri success deneme bildirimi. t0ri success deneme bildirimi", {
type: "success",
duration: 3000,
delay: i * 0.1
})
}
Eğer yukarıdaki gibi bir döngü içerisinde notification mesajlarını bastırmak istiyorsak bütün mesajların ekrana aynı anda gelmemesi için örnekte olduğu gibi delay özelliğini ekleyebiliriz
const notification = new Notification();
notification.positions = "bottom-right"
Ayrıca mesajların sayfadaki konumunu değiştirmek için yukarıdaki örnekte olduğu gibi positions özelliğine sayfada nerede olmasını istiyorsanız yazabilirsiniz. Yukarıdaki örnekte mesajlar sayfanın alt sağında bulunacaktır
Örnek Kod (Modal)
modal.defaultModal({
msg: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat aliquam animi excepturi veritatis magnam repudiandae",
header: {
showHeader: true, //--- header kısmının görünüp görünmemesini belirliyoruz
text: "MODAL HEADER FOR WEBPACK AND REACT" //--- header kısmında görülecek olan başlığı giriyoruz
},
buttons: {
showButton: true, //--- button kısmı görünüp görünmemesini belirliyoruz
success: () => console.log("success button callback function"), //--- evet butonuna basılınca çalışacak olan fonksiyon
error: () => console.log("Error button callback function") //--- hayır butonuna basılınca çalışacak olan fonksiyon
},
})
Yukarıdaki örnekte msg, header, ve buttons tanımlaması zorunludur. success ve error tanımlaması zorunlu değildir