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