Kendi toast mesajınızı yazın

Web uygulamalarda temel ihtiyaçlardan biri, bir işlem gerçekleşirken veya gerçekleştikten sonra kullanıcının haberdar edilmesidir. Toast mesajlar burada yardımımıza yetişir. Bunu hakkıyla yapan yığınla NPM paket var ancak bazen yeterli olmayabiliyorlar, araya girip bir şeyleri değiştirmemiz gerekiyor. Peki kendimiz yazsak nasıl yazardık?

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

Hadi başlayalı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)
}
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;
}
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%);
}
}
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
App.vue<script setup>
import message from './toast-message'
</script>
<template>
<button @click="message.error('Error message')">Error</button></template>

--

--

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

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

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