wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
28 lines
1.9 KiB
HTML
28 lines
1.9 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Components" name="按钮" subtitle="主/次/幽灵/危险/禁用/图标" viewport="700x150" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--font-sans);padding:24px}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:16px}
|
|
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
|
|
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:14px;border:none;border-radius:var(--radius-full);padding:11px 20px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
|
|
.btn svg{width:16px;height:16px}
|
|
.primary{background:var(--accent);color:var(--fg-on-accent)}
|
|
.primary:hover{background:var(--accent-hover)}
|
|
.secondary{background:var(--surface);color:var(--fg1);border:1.5px solid var(--border-strong)}
|
|
.ghost{background:transparent;color:var(--accent)}
|
|
.ghost:hover{background:var(--accent-subtle)}
|
|
.danger{background:var(--danger-subtle);color:var(--red-600)}
|
|
.disabled{background:var(--sand-200);color:var(--sand-400);cursor:not-allowed}
|
|
.icon{padding:11px;border-radius:var(--radius-full)}</style>
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script></head><body>
|
|
<div class="lab">BUTTONS · 全圆角 (full) · hover 加深 · press 收缩</div>
|
|
<div class="row">
|
|
<button class="btn primary"><i data-lucide="power"></i>连接 Connect</button>
|
|
<button class="btn secondary"><i data-lucide="globe"></i>选择节点</button>
|
|
<button class="btn ghost">了解更多</button>
|
|
<button class="btn danger"><i data-lucide="x"></i>断开</button>
|
|
<button class="btn disabled">连接中…</button>
|
|
<button class="btn primary icon"><i data-lucide="settings"></i></button>
|
|
</div>
|
|
<script>lucide.createIcons()</script>
|
|
</body></html>
|