Top Apps Toggle Board
介绍
天空底图上浮起的排行榜卡片，右上角黑色滑块分段切换“收入 / 下载”，切换时数值淡出淡入、进度条平滑伸缩，首行用主色高亮。窄屏自动隐藏进度条只留数值。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Top Apps Toggle Board 加进你的项目并换成你的配色。
适用场景
仪表盘、数据表格、图表卡片、对比表和状态面板。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add top-apps-toggle-board
mcp › 使用 8pt MCP 调用 get_component("top-apps-toggle-board")
代码
Top Apps Toggle Board 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tab"><div class="tab-sky"><div class="tab-card"><div class="tab-head"><div><b>热门应用</b><small class="tab-cap">月收入估算 · 示意</small></div><div class="tab-seg" role="tablist"><button class="on" data-k="r" role="tab">收入</button><button data-k="d" role="tab">下载</button><i class="tab-thumb"></i></div></div><ol class="tab-list"><li><em>1</em><span class="ic" style="background:#F59E0B"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h7v14H4zM13 5h7v14h-7z"/></svg></span><b>背词鸭</b><i><u style="--w:92%"></u></i><span data-r="¥300万–500万" data-d="20万–50万">¥300万–500万</span></li><li><em>2</em><span class="ic" style="background:#EC4899"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg></span><b>光修</b><i><u style="--w:70%"></u></i><span data-r="¥200万–400万" data-d="5万–10万">¥200万–400万</span></li><li><em>3</em><span class="ic" style="background:#6366F1"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 12.5h2"/></svg></span><b>圆账</b><i><u style="--w:52%"></u></i><span data-r="¥150万–300万" data-d="2万–5万">¥150万–300万</span></li><li><em>4</em><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><b>轻食记</b><i><u style="--w:30%"></u></i><span data-r="¥80万–150万" data-d="1万–2万">¥80万–150万</span></li><li><em>5</em><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><b>声浪口语</b><i><u style="--w:24%"></u></i><span data-r="¥50万–100万" data-d="5千–1万">¥50万–100万</span></li></ol></div></div></div>
.x-tab{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-tab,.x-tab *{box-sizing:border-box}.x-tab a{color:inherit;text-decoration:none}.x-tab button{font:inherit;cursor:pointer}.x-tab{width:100%;max-width:980px;margin:0 auto;text-align:left}.x-tab .tab-sky{position:relative;border-radius:20px;overflow:hidden;background:#CFE4FB url(https://8pt.dev/api/media/8d6547efdad29210b7d11a4e.webp) center/cover;padding:64px 9% 0;min-height:540px;display:flex;align-items:flex-end}.x-tab .tab-card{width:100%;max-width:640px;margin:0 auto;background:#fff;border-radius:16px 16px 0 0;padding:20px 18px 14px;box-shadow:0 -10px 40px -18px rgba(30,70,140,.35)}.x-tab .tab-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.x-tab .tab-head b{display:block;font-size:15px;font-weight:600}.x-tab .tab-cap{font-size:12px;color:#98A2B3}.x-tab .tab-seg{position:relative;display:flex;background:#F2F4F7;border-radius:999px;padding:3px}.x-tab .tab-seg button{position:relative;z-index:1;border:0;background:none;font-size:12px;color:#667085;padding:5px 13px;border-radius:999px;transition:color .25s}.x-tab .tab-seg button.on{color:#fff}.x-tab .tab-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--ink);transition:transform .35s cubic-bezier(.3,.8,.3,1)}.x-tab .tab-seg.d .tab-thumb{transform:translateX(100%)}.x-tab ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}.x-tab li{display:grid;grid-template-columns:16px 32px 1fr 70px 108px;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:13px}.x-tab li:first-child{background:#F3F5F9}.x-tab li em{font-style:normal;color:#98A2B3;font-size:12px}.x-tab .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}.x-tab .ic svg{width:16px;height:16px}.x-tab li b{font-weight:500;white-space:nowrap}.x-tab li i{height:5px;border-radius:5px;background:#EEF1F6;overflow:hidden}.x-tab li u{display:block;height:100%;width:var(--w);border-radius:5px;background:#C9CFD8;transition:width .7s cubic-bezier(.2,.8,.2,1)}.x-tab li:first-child u{background:var(--blue)}.x-tab li>span:not(.ic){text-align:right;font-weight:600;white-space:nowrap;transition:opacity .2s}.x-tab li>span.fade{opacity:0}@media (max-width:640px){.x-tab .tab-sky{padding:40px 4% 0;min-height:0}.x-tab li{grid-template-columns:14px 28px 1fr 92px;gap:8px;padding:8px 6px}.x-tab li i{display:none}}@media (prefers-reduced-motion:reduce){.x-tab *{transition:none!important}}.x-tab{max-width:none;padding:64px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-tab .tab-sky{max-width:860px;margin:0 auto}(root) => {
const seg = root.querySelector('.tab-seg');
const btns = [...seg.querySelectorAll('button')];
const vals = [...root.querySelectorAll('li > span:last-child')];
const bars = [...root.querySelectorAll('li u')];
const cap = root.querySelector('.tab-cap');
const base = bars.map(b => b.style.getPropertyValue('--w'));
const alt = ['96%', '58%', '44%', '36%', '20%'];
let t;
const onClick = (e) => {
const k = e.currentTarget.dataset.k;
btns.forEach(b => b.classList.toggle('on', b === e.currentTarget));
…订阅 Builder 查看完整源码。查看价格