Kendi toast mesajınızı yazın

Toast mesaj temelde kolayca call edilebilen bir function olmalıdır.

message.success('This is a success message', 'Congratulations!')

Örnekteki gibi call edilebilen bir function işimizi görecektir.

Hadi başlayalım

Öncelikle toast mesajın ihtiyaç duyacağı HTML elementleri oluşturan ve ekrana basan bir function yazalım.

toast-message.tsfunction printer(type = '', message = '', title = '', duration = 3) {
const toastWrapper = document.createElement('div')
toastWrapper.classList.add('toast-wrapper')
toastWrapper.innerHTML = `
<div class="toast ${type}">
<div class="toast__title">${title}</div>
<div class="toast__message">${message}</div>
</div>
`
toastWrapper.style.animationDuration = `${duration}s`document.body.appendChild(toastWrapper)setTimeout(() => {
toastWrapper.remove()
}, duration * 1000)
}

Burada adı geçen elementlere CSS ile çeki düzen verelim.

toast.css.toast-wrapper {
position: fixed;
inset: 0;
top: 1em;
height: max-content;
display: grid;
place-content: center;
animation-name: toast-top;
animation-fill-mode: forwards;
font-size: 0.9em;
}
.toast {
background-color: #fff;
color: #222;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
padding: 0.5em 1em;
border-radius: 0.5em;
}
.toast__title {
font-size: 1.2em;
font-weight: 600;
padding: 0.2em 0;
}

Adı geçen toast-top animasyonunu oluşturalım.

toast.css@keyframes toast-top {
0% {
transform: translateY(-100%);
}
20% {
transform: translateY(0);
}
80% {
transform: translateY(5%);
}
90% {
transform: translateY(25%);
}
100% {
transform: translateY(-200%);
}
}

printer function’umuzu export edelim.

toast-message.tsconst message = {
info: printer.bind(null, 'info'),
success: printer.bind(null, 'success'),
error: printer.bind(null, 'error'),
warning: printer.bind(null, 'warning'),
}
export default message

Böylece dışarıda import ettikten sonra message.success gibi kullanabiliriz.

App.vue<script setup>
import message from './toast-message'
</script>
<template>
<button @click="message.error('Error message')">Error</button></template>

GitHub Repo: https://github.com/gayret/toast-message-in-vuejs

Canlı Demo: https://toast-message.netlify.app/

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Safa Gayret

147 Followers

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.