396 lines
24 KiB
HTML
396 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MetonaToast — 全功能演示</title>
|
||
<style>
|
||
:root {
|
||
--bg: #0b1121; --surface: #151d33; --border: #1e2d4d;
|
||
--text: #e2e8f0; --muted: #64748b; --accent: #6366f1; --accent-light: #818cf8;
|
||
--radius: 14px;
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh;
|
||
}
|
||
.hero {
|
||
text-align: center; padding: 70px 20px 50px;
|
||
background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 60%),
|
||
linear-gradient(180deg, #0f172a 0%, var(--bg) 100%);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.hero h1 { font-size: 42px; font-weight: 800; }
|
||
.hero h1 span {
|
||
background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||
}
|
||
.hero p { color: var(--muted); font-size: 15px; margin-top: 6px; }
|
||
.nav {
|
||
position: sticky; top: 0; z-index: 100;
|
||
background: rgba(11,17,33,0.85); backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-inner { max-width: 1300px; margin: 0 auto; display: flex; overflow-x: auto; padding: 0 20px; gap: 4px; }
|
||
.nav a {
|
||
padding: 14px 16px; color: var(--muted); text-decoration: none; font-size: 13px;
|
||
font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: 0.2s;
|
||
}
|
||
.nav a:hover, .nav a.active { color: var(--accent-light); border-bottom-color: var(--accent); }
|
||
.container { max-width: 1300px; margin: 0 auto; padding: 40px 20px; }
|
||
.section { margin-bottom: 56px; }
|
||
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
|
||
.section-icon {
|
||
width: 42px; height: 42px; border-radius: 10px;
|
||
background: linear-gradient(135deg, var(--accent), #8b5cf6);
|
||
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
||
}
|
||
.section-title { font-size: 24px; font-weight: 700; }
|
||
.section-desc { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
|
||
.card {
|
||
background: var(--surface); border: 1px solid var(--border);
|
||
border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
|
||
}
|
||
.card-label {
|
||
font-size: 12px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: 0.8px; color: var(--muted); margin-bottom: 16px;
|
||
}
|
||
.btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
|
||
.btn-grid-sm { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); }
|
||
.btn {
|
||
padding: 10px 16px; border: none; border-radius: 8px; font-size: 13px;
|
||
font-weight: 500; cursor: pointer; transition: 0.2s; color: #fff;
|
||
display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
|
||
}
|
||
.btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
|
||
.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: 6px; }
|
||
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }
|
||
.btn-outline:hover { background: var(--border); }
|
||
.c-success { background: #10b981; } .c-error { background: #ef4444; }
|
||
.c-warning { background: #f59e0b; color: #1e293b; } .c-info { background: #3b82f6; }
|
||
.c-primary { background: #6366f1; } .c-purple { background: #8b5cf6; }
|
||
.c-pink { background: #ec4899; } .c-orange { background: #f97316; }
|
||
.c-teal { background: #14b8a6; } .c-cyan { background: #06b6d4; }
|
||
.c-rose { background: #f43f5e; } .c-slate { background: #475569; }
|
||
.c-indigo { background: #4f46e5; }
|
||
.theme-swatch {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
|
||
cursor: pointer; transition: 0.2s; font-size: 13px; font-weight: 500;
|
||
}
|
||
.theme-swatch:hover { border-color: var(--accent); }
|
||
.swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); }
|
||
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; }
|
||
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 40px 20px; border-top: 1px solid var(--border); }
|
||
footer a { color: var(--accent-light); text-decoration: none; }
|
||
@media (max-width: 768px) {
|
||
.hero h1 { font-size: 28px; }
|
||
.btn-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="hero">
|
||
<h1><span>MetonaToast</span></h1>
|
||
<p>轻量 · 零依赖 · 精致美观 — 全功能演示</p>
|
||
</header>
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<a href="#types">图标类型</a>
|
||
<a href="#positions">位置</a>
|
||
<a href="#animations">动画</a>
|
||
<a href="#themes">主题</a>
|
||
<a href="#advanced">高级</a>
|
||
<a href="#plugins">插件</a>
|
||
<a href="#i18n">国际化</a>
|
||
<a href="#management">管理</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="container">
|
||
|
||
<!-- ===== TYPES ===== -->
|
||
<section id="types" class="section">
|
||
<div class="section-head"><div class="section-icon">🎨</div><div><h2 class="section-title">图标类型</h2><p class="section-desc">80+ 内置图标类型</p></div></div>
|
||
<div class="card">
|
||
<div class="card-label">常用</div>
|
||
<div class="btn-grid">
|
||
<button class="btn c-success" onclick="showType('success')">✓ success</button>
|
||
<button class="btn c-error" onclick="showType('error')">✕ error</button>
|
||
<button class="btn c-warning" onclick="showType('warning')">⚠ warning</button>
|
||
<button class="btn c-info" onclick="showType('info')">ℹ info</button>
|
||
<button class="btn c-slate" onclick="showType('default')">— default</button>
|
||
<button class="btn c-purple" onclick="showType('loading')">⟳ loading</button>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-label">操作</div>
|
||
<div class="btn-grid btn-grid-sm">
|
||
<button class="btn btn-outline btn-sm" onclick="showType('check')">check</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('x')">x</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('alert')">alert</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('question')">question</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('star')">star</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('heart')">heart</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('bell')">bell</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('mail')">mail</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('settings')">settings</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('user')">user</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('home')">home</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('search')">search</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('plus')">plus</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('minus')">minus</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('edit')">edit</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('trash')">trash</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('download')">download</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('upload')">upload</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('share')">share</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('link')">link</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('external')">external</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('copy')">copy</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('cut')">cut</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('paste')">paste</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('save')">save</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('print')">print</button>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-label">系统 & 设备</div>
|
||
<div class="btn-grid btn-grid-sm">
|
||
<button class="btn btn-outline btn-sm" onclick="showType('cpu')">cpu</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('database')">database</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('server')">server</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('terminal')">terminal</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('code')">code</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('git')">git</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('package')">package</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('layers')">layers</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('grid')">grid</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('list')">list</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('filter')">filter</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('sort')">sort</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('refresh')">refresh</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('sync')">sync</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('wifi')">wifi</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('bluetooth')">bluetooth</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('battery')">battery</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('power')">power</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('volume')">volume</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('mic')">mic</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('camera')">camera</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('image')">image</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('video')">video</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('music')">music</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('file')">file</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('folder')">folder</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('clipboard')">clipboard</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('eye')">eye</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('eyeOff')">eyeOff</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('lock')">lock</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('unlock')">unlock</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('shield')">shield</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('key')">key</button>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-label">自然 & 几何</div>
|
||
<div class="btn-grid btn-grid-sm">
|
||
<button class="btn btn-outline btn-sm" onclick="showType('cloud')">cloud</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('sun')">sun</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('moon')">moon</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('zap')">zap</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('compass')">compass</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('globe')">globe</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('map')">map</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('clock')">clock</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('calendar')">calendar</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('flag')">flag</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('bookmark')">bookmark</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('tag')">tag</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('gift')">gift</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('award')">award</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('target')">target</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('crosshair')">crosshair</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('checkCircle')">checkCircle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('xCircle')">xCircle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('alertCircle')">alertCircle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('infoCircle')">infoCircle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('helpCircle')">helpCircle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('alertTriangle')">alertTriangle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('checkSquare')">checkSquare</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('square')">square</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('circle')">circle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('triangle')">triangle</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('hexagon')">hexagon</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('octagon')">octagon</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('pentagon')">pentagon</button>
|
||
<button class="btn btn-outline btn-sm" onclick="showType('diamond')">diamond</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== POSITIONS ===== -->
|
||
<section id="positions" class="section">
|
||
<div class="section-head"><div class="section-icon">📍</div><div><h2 class="section-title">位置</h2><p class="section-desc">6 种预设位置</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-slate" onclick="MeToast.success('左上角',{position:'top-left'})">↖ top-left</button>
|
||
<button class="btn c-slate" onclick="MeToast.success('顶部居中',{position:'top-center'})">↑ top-center</button>
|
||
<button class="btn c-slate" onclick="MeToast.success('右上角',{position:'top-right'})">↗ top-right</button>
|
||
<button class="btn c-slate" onclick="MeToast.success('左下角',{position:'bottom-left'})">↙ bottom-left</button>
|
||
<button class="btn c-slate" onclick="MeToast.success('底部居中',{position:'bottom-center'})">↓ bottom-center</button>
|
||
<button class="btn c-slate" onclick="MeToast.success('右下角',{position:'bottom-right'})">↘ bottom-right</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ANIMATIONS ===== -->
|
||
<section id="animations" class="section">
|
||
<div class="section-head"><div class="section-icon">🎭</div><div><h2 class="section-title">动画效果</h2><p class="section-desc">11 种动画，每种效果明显不同</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-primary" onclick="anim('slide')">slide 右侧滑入</button>
|
||
<button class="btn c-info" onclick="anim('fade')">fade 淡入模糊</button>
|
||
<button class="btn c-success" onclick="anim('scale')">scale 弹性放大</button>
|
||
<button class="btn c-warning" onclick="anim('bounce')">bounce 弹跳</button>
|
||
<button class="btn c-purple" onclick="anim('flip')">flip 3D翻开</button>
|
||
<button class="btn c-pink" onclick="anim('rotate')">rotate 旋转</button>
|
||
<button class="btn c-teal" onclick="anim('zoom')">zoom 爆发</button>
|
||
<button class="btn c-orange" onclick="anim('slideUp')">slideUp ↑</button>
|
||
<button class="btn c-cyan" onclick="anim('slideDown')">slideDown ↓</button>
|
||
<button class="btn c-rose" onclick="anim('slideLeft')">slideLeft ←</button>
|
||
<button class="btn c-indigo" onclick="anim('slideRight')">slideRight →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== THEMES ===== -->
|
||
<section id="themes" class="section">
|
||
<div class="section-head"><div class="section-icon">🎨</div><div><h2 class="section-title">主题</h2><p class="section-desc">四种基础主题，支持 registerTheme() 自定义注册</p></div></div>
|
||
<div class="card">
|
||
<div class="card-label">基础主题</div>
|
||
<div class="theme-grid">
|
||
<div class="theme-swatch" onclick="switchTheme('light')"><span class="swatch-dot" style="background:#fff"></span>浅色 light</div>
|
||
<div class="theme-swatch" onclick="switchTheme('dark')"><span class="swatch-dot" style="background:#1c2028"></span>深色 dark</div>
|
||
<div class="theme-swatch" onclick="switchTheme('auto')"><span class="swatch-dot" style="background:linear-gradient(135deg,#fff,#1c2028)"></span>自动 auto</div>
|
||
<div class="theme-swatch" onclick="switchTheme('warm')"><span class="swatch-dot" style="background:#fffbeb"></span>暖色 warm</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== ADVANCED ===== -->
|
||
<section id="advanced" class="section">
|
||
<div class="section-head"><div class="section-icon">⚡</div><div><h2 class="section-title">高级功能</h2><p class="section-desc">Promise / 确认框 / 输入框 / 进度条 / 倒计时 / 队列 / 堆叠</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-purple" onclick="demoPromise()">Promise 风格</button>
|
||
<button class="btn c-pink" onclick="demoConfirm()">确认对话框</button>
|
||
<button class="btn c-teal" onclick="demoPrompt()">输入对话框</button>
|
||
<button class="btn c-orange" onclick="demoProgress()">进度条</button>
|
||
<button class="btn c-cyan" onclick="demoCountdown()">倒计时 5s</button>
|
||
<button class="btn c-primary" onclick="demoQueue()">队列展示</button>
|
||
<button class="btn c-indigo" onclick="demoStack()">堆叠展示</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PLUGINS ===== -->
|
||
<section id="plugins" class="section">
|
||
<div class="section-head"><div class="section-icon">🔌</div><div><h2 class="section-title">插件系统</h2><p class="section-desc">3 款预设插件，按需安装</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-purple" onclick="usePlugin('keyboard')">keyboard ESC关闭</button>
|
||
<button class="btn c-info" onclick="usePlugin('persistence')">persistence 持久化</button>
|
||
<button class="btn c-teal" onclick="usePlugin('accessibility')">accessibility 无障碍</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== I18N ===== -->
|
||
<section id="i18n" class="section">
|
||
<div class="section-head"><div class="section-icon">🌍</div><div><h2 class="section-title">国际化</h2><p class="section-desc">切换语言查看效果</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-primary" onclick="switchLang('zh-CN')">简体中文</button>
|
||
<button class="btn c-info" onclick="switchLang('en-US')">English</button>
|
||
<button class="btn c-success" onclick="switchLang('ja')">日本語</button>
|
||
<button class="btn c-purple" onclick="switchLang('ko')">한국어</button>
|
||
<button class="btn c-pink" onclick="switchLang('fr')">Français</button>
|
||
<button class="btn c-teal" onclick="switchLang('de')">Deutsch</button>
|
||
<button class="btn c-orange" onclick="switchLang('es')">Español</button>
|
||
<button class="btn c-cyan" onclick="switchLang('ru')">Русский</button>
|
||
<button class="btn c-rose" onclick="switchLang('ar')">العربية</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== MANAGEMENT ===== -->
|
||
<section id="management" class="section">
|
||
<div class="section-head"><div class="section-icon">🔧</div><div><h2 class="section-title">Toast 管理</h2><p class="section-desc">统计、关闭、清除</p></div></div>
|
||
<div class="card">
|
||
<div class="btn-grid">
|
||
<button class="btn c-success" onclick="MeToast.success('消息 '+Date.now()%100)">发一条消息</button>
|
||
<button class="btn c-info" onclick="MeToast.info('消息 '+Date.now()%100)">再发一条</button>
|
||
<button class="btn c-warning" onclick="alert('当前: '+MeToast.count()+' 条')">查看数量</button>
|
||
<button class="btn c-error" onclick="MeToast.dismiss()">关闭全部</button>
|
||
<button class="btn c-slate" onclick="MeToast.clear()">清除全部</button>
|
||
<button class="btn c-purple" onclick="MeToast.pauseAll()">暂停全部</button>
|
||
<button class="btn c-teal" onclick="MeToast.resumeAll()">恢复全部</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<p>MetonaToast v2.0.0 · <a href="index.html">← 代码示例</a></p>
|
||
</footer>
|
||
|
||
<script src="../dist/metona-toast.js"></script>
|
||
<script>
|
||
MeToast.configure({ position: 'top-right', duration: 4000, theme: 'dark', animation: 'slide', pauseOnHover: true, showProgress: true });
|
||
|
||
function showType(type) {
|
||
if (type === 'loading') { const l = MeToast.loading('加载中...'); setTimeout(() => l.success('完成！'), 2000); return; }
|
||
if (type === 'success') { MeToast.success(type); return; }
|
||
if (type === 'error') { MeToast.error(type); return; }
|
||
if (type === 'warning') { MeToast.warning(type); return; }
|
||
if (type === 'info') { MeToast.info(type); return; }
|
||
if (type === 'default') { MeToast.show('默认消息'); return; }
|
||
MeToast.show(type, { type });
|
||
}
|
||
function anim(name) { MeToast.success('动画: ' + name, { animation: name, duration: 3000 }); }
|
||
function switchTheme(t) { MeToast.themes.switchTheme(t); MeToast.configure({ theme: t }); MeToast.info('主题: ' + t, { theme: t }); }
|
||
function switchLang(l) { MeToast.i18n.switchLocale(l); MeToast.success(MeToast.i18n.getLocaleName(l) + ' (' + l + ')'); }
|
||
function usePlugin(n) { MeToast.use(n); MeToast.success('插件: ' + n); }
|
||
|
||
async function demoPromise() {
|
||
const p = new Promise((r, e) => setTimeout(() => Math.random() > 0.3 ? r('ok') : e('fail'), 2000));
|
||
try { await MeToast.promise(p, { loading: '处理中...', success: '成功！', error: '失败' }); } catch (_) {}
|
||
}
|
||
async function demoConfirm() {
|
||
const ok = await MeToast.confirm('确定删除吗？', { confirmText: '删除', confirmColor: '#ef4444' });
|
||
if (ok) MeToast.success('已删除'); else MeToast.info('已取消');
|
||
}
|
||
async function demoPrompt() {
|
||
const v = await MeToast.prompt('请输入姓名', { placeholder: '请输入...' });
|
||
if (v) MeToast.info('你好，' + v + '！');
|
||
}
|
||
function demoProgress() {
|
||
const p = MeToast.progress('上传中...');
|
||
let v = 0;
|
||
const t = setInterval(() => { v += Math.random() * 28; if (v >= 100) { clearInterval(t); p.complete('完成！'); } else p.setProgress(v); }, 400);
|
||
}
|
||
function demoCountdown() {
|
||
MeToast.countdown('{seconds} 秒后执行', 5, { onComplete: () => MeToast.success('已执行') });
|
||
}
|
||
async function demoQueue() {
|
||
await MeToast.queue(['步骤一', '步骤二', '步骤三'], { delay: 800, duration: 2000, type: 'info' });
|
||
}
|
||
function demoStack() {
|
||
MeToast.stack(['消息 1', '消息 2', '消息 3', '消息 4'], { stagger: 150, type: 'info' });
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|