631 lines
21 KiB
Markdown
631 lines
21 KiB
Markdown
# 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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-duration" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
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');
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initToastExamples = () => {
|
|
|
|
// 1. Basic Toast
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
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, basicTarget);
|
|
}
|
|
|
|
// 2. Different Durations
|
|
const durationTarget = document.querySelector('#demo-duration');
|
|
if (durationTarget && !durationTarget.hasChildNodes()) {
|
|
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, durationTarget);
|
|
}
|
|
|
|
// 3. Interactive Toast
|
|
const interactiveTarget = document.querySelector('#demo-interactive');
|
|
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
|
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, interactiveTarget);
|
|
}
|
|
|
|
// 4. Form Validation Toast
|
|
const formTarget = document.querySelector('#demo-form');
|
|
if (formTarget && !formTarget.hasChildNodes()) {
|
|
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, formTarget);
|
|
}
|
|
|
|
// 5. Success Feedback
|
|
const feedbackTarget = document.querySelector('#demo-feedback');
|
|
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
|
|
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, feedbackTarget);
|
|
}
|
|
|
|
// 6. Error Handling
|
|
const errorTarget = document.querySelector('#demo-error');
|
|
if (errorTarget && !errorTarget.hasChildNodes()) {
|
|
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, errorTarget);
|
|
}
|
|
|
|
// 7. Custom Messages
|
|
const customTarget = document.querySelector('#demo-custom');
|
|
if (customTarget && !customTarget.hasChildNodes()) {
|
|
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, customTarget);
|
|
}
|
|
|
|
// 8. Multiple Toasts
|
|
const multipleTarget = document.querySelector('#demo-multiple');
|
|
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
|
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, multipleTarget);
|
|
}
|
|
};
|
|
|
|
initToastExamples();
|
|
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initToastExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|