21 KiB
21 KiB
Toast
Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically.
Function
Toast(message, type = 'alert-info', duration = 3500)
| Param | Type | Default | Description |
|---|---|---|---|
message |
string | VNode |
- |
Message content to display |
type |
string |
'alert-info' |
Alert type: 'alert-info', 'alert-success', 'alert-warning', 'alert-error' |
duration |
number |
3500 |
Auto-dismiss duration in milliseconds |
Live Examples
Basic Toast
Live Demo
const BasicDemo = () => {
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
class: 'btn btn-info',
onclick: () => Toast('This is an info message', 'alert-info', 3000)
}, 'Info Toast'),
Button({
class: 'btn btn-success',
onclick: () => Toast('Operation successful!', 'alert-success', 3000)
}, 'Success Toast'),
Button({
class: 'btn btn-warning',
onclick: () => Toast('Please check your input', 'alert-warning', 3000)
}, 'Warning Toast'),
Button({
class: 'btn btn-error',
onclick: () => Toast('An error occurred', 'alert-error', 3000)
}, 'Error Toast')
]);
};
$mount(BasicDemo, '#demo-basic');
Different Durations
Live Demo
const DurationDemo = () => {
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
class: 'btn btn-sm',
onclick: () => Toast('Short (1s)', 'alert-info', 1000)
}, '1 Second'),
Button({
class: 'btn btn-sm',
onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
}, '3 Seconds'),
Button({
class: 'btn btn-sm',
onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
}, '5 Seconds'),
Button({
class: 'btn btn-sm',
onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
}, '8 Seconds')
]);
};
$mount(DurationDemo, '#demo-duration');
Interactive Toast
Live Demo
const InteractiveDemo = () => {
const count = $(0);
const showRandomToast = () => {
const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
const messages = [
'You clicked the button!',
'Action completed successfully',
'Processing your request...',
'Something interesting happened'
];
const randomType = types[Math.floor(Math.random() * types.length)];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
count(count() + 1);
Toast(`${randomMessage} (${count()})`, randomType, 2000);
};
return Div({ class: 'flex flex-col gap-4 items-center' }, [
Button({
class: 'btn btn-primary',
onclick: showRandomToast
}, 'Show Random Toast'),
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
$mount(InteractiveDemo, '#demo-interactive');
Form Validation Toast
Live Demo
const FormToastDemo = () => {
const email = $('');
const password = $('');
const handleSubmit = () => {
if (!email()) {
Toast('Please enter your email', 'alert-warning', 3000);
return;
}
if (!email().includes('@')) {
Toast('Please enter a valid email address', 'alert-error', 3000);
return;
}
if (!password()) {
Toast('Please enter your password', 'alert-warning', 3000);
return;
}
if (password().length < 6) {
Toast('Password must be at least 6 characters', 'alert-error', 3000);
return;
}
Toast('Login successful! Redirecting...', 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
Input({
label: 'Email',
type: 'email',
value: email,
placeholder: 'user@example.com',
oninput: (e) => email(e.target.value)
}),
Input({
label: 'Password',
type: 'password',
value: password,
placeholder: 'Enter password',
oninput: (e) => password(e.target.value)
}),
Button({
class: 'btn btn-primary',
onclick: handleSubmit
}, 'Login')
]);
};
$mount(FormToastDemo, '#demo-form');
Success Feedback
Live Demo
const FeedbackDemo = () => {
const items = $([
{ id: 1, name: 'Item 1', saved: false },
{ id: 2, name: 'Item 2', saved: false },
{ id: 3, name: 'Item 3', saved: false }
]);
const saveItem = (id) => {
items(items().map(item =>
item.id === id ? { ...item, saved: true } : item
));
Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
};
const saveAll = () => {
items(items().map(item => ({ ...item, saved: true })));
Toast('All items saved!', 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'font-bold' }, 'Items to Save'),
Button({
class: 'btn btn-sm btn-primary',
onclick: saveAll
}, 'Save All')
]),
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
Span({}, item.name),
item.saved
? Span({ class: 'badge badge-success' }, '✓ Saved')
: Button({
class: 'btn btn-xs btn-primary',
onclick: () => saveItem(item.id)
}, 'Save')
])
))
]);
};
$mount(FeedbackDemo, '#demo-feedback');
Error Handling
Live Demo
const ErrorDemo = () => {
const simulateApiCall = () => {
const success = Math.random() > 0.3;
if (success) {
Toast('Data loaded successfully!', 'alert-success', 2000);
} else {
Toast('Failed to load data. Please try again.', 'alert-error', 3000);
}
};
const simulateNetworkError = () => {
Toast('Network error: Unable to connect to server', 'alert-error', 4000);
};
const simulateTimeout = () => {
Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
};
return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
Button({
class: 'btn btn-primary',
onclick: simulateApiCall
}, 'Simulate API Call'),
Button({
class: 'btn btn-error',
onclick: simulateNetworkError
}, 'Network Error'),
Button({
class: 'btn btn-warning',
onclick: simulateTimeout
}, 'Timeout')
]);
};
$mount(ErrorDemo, '#demo-error');
Custom Messages
Live Demo
const CustomDemo = () => {
const showCustomToast = (type, message) => {
Toast(message, type, 3000);
};
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
class: 'btn btn-info',
onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
}, 'Email'),
Button({
class: 'btn btn-success',
onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
}, 'Payment'),
Button({
class: 'btn btn-warning',
onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
}, 'Session Warning'),
Button({
class: 'btn btn-error',
onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
}, 'Security Alert')
]);
};
$mount(CustomDemo, '#demo-custom');
Multiple Toasts
Live Demo
const MultipleDemo = () => {
const showMultipleToasts = () => {
Toast('First message', 'alert-info', 3000);
setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
};
return Div({ class: 'flex justify-center' }, [
Button({
class: 'btn btn-primary',
onclick: showMultipleToasts
}, 'Show Multiple Toasts')
]);
};
$mount(MultipleDemo, '#demo-multiple');