Toast

მიმოხილვა

Toast

        <!-- Basic Toast Trigger -->
                                 <button  class="gk-button button-outline-info"  data-toast-target="toastBasicComponent">დამაჭირე</button>
                         
                                 <!-- Basic Toast Component -->
                                 <template  data-toast-id="toastBasicComponent">
                                     <div  class="gk-toast-wrapper slide-down">
                                         <div  class="gk-toast-label">მომხმარებელმა პირველმა შეცვალა პროფილის ფოტო</div>
                                         <button  class="gk-button gk-toast-button"  toast-close="true">დახურვა</button>
                                     </div>
                                 </template>
                         
                                 <!-- Success Toast Trigger -->
                                 <button  class="gk-button button-outline-success"  data-toast-target="toastSuccessComponent">დამაჭირე</button>
                                 <!-- Success Toast Component -->
                                 <template  data-toast-id="toastSuccessComponent">
                                     <div  class="gk-toast-welldone slide-down gk-toast-wrapper">
                                         <div  class="gk-toast-message">
                                             <button  class="gk-button button-icon">
                                                 <i  class="material-symbols-outlined gk-success">done</i>
                                             </button>
                                             <div  class="gk-toast-label gk-toast-welldone-content">
                                                 თქვენ წარმატებით გაიარეთ რეგისტრაცია! 
                                             </div>
                                             <button  class="gk-button button-icon gk-toaster-action"  toast-close="true">
                                                 <i  class="material-symbols-outlined gk-success icon-sm">close</i>
                                             </button>
                                         </div>
                                     </div>
                                 </template>
                                 
                                 <!-- Failure Toast Trigger -->
                                 <button  class="gk-button button-outline-danger"  data-toast-target="toastFailureComponent">დამაჭირე</button>
                         
                                 <!-- Failure Toast Component -->
                                 <template  data-toast-id="toastFailureComponent">
                                     <div  class="gk-toast-warning slide-down gk-toast-wrapper">
                                         <div  class="gk-toast-message">
                                             <button  class="gk-button button-icon">
                                                 <i  class="material-symbols-outlined gk-warning">done</i>
                                             </button>
                                             <div  class="gk-toast-label gk-toast-warning-content">
                                                 პაროლის აღდგენისას შეიქმნა პრობლემა!
                                             </div>
                                             <button  class="gk-button button-icon gk-toast-action"  toast-close="true">
                                                 <i  class="material-symbols-outlined gk-warning icon-sm">close</i>
                                             </button>
                                         </div>
                                     </div>
                                 </template>

Basic Toast -

Success Toast -

Failure Toast -

კონფიგურაცია

კომპონენტის კონფიგურაცია

Toast კომპონენტს სჭირდება, რომ ჰქონდეს Button და Template ელემენტები, რომლებსაც უნდა ჰქონდეთ იგივე ID. Template-ს უნდა ჰქონდეს ატრიბუტი data-toast-id, ხოლო Button-ს data-toast-target.

ფუნქციები

კომპონენტის ფუნქციები

Toast კომპონენტი შეგვიძლია შევქმნათ default-ად, Javascript კლასის მეთოდით

document.addEventListener("DomContentLoaded", { 
    const { toastService } = frameWork; 
     toastService.createSuccessToast('მომხმარებელი წარმატებით დაემატა'); 
     toastService.createDangerToast('მომხმარებლის პაროლი ან მეილი არასწორია'); 
     toastService.showToast('თქვენ მიიღეთ ახალი მესიჯი საჯარო რეესტრიდან'); 
 })