Top Apps Toggle Board
Overview
A ranking card floating over a sky image, with a black slider in the top right switching between Revenue and Downloads. Values fade as they switch and the bars resize smoothly; the first row is highlighted in the accent color. On narrow screens the bars hide and only values remain.
Taken from the page template Chengbang App Market Intelligence Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Top Apps Toggle Board to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add top-apps-toggle-board
mcp › Use 8pt MCP to call get_component("top-apps-toggle-board")
Code
Source for Top Apps Toggle Board. Motion uses only transform and opacity and respects the Reduce motion setting.
<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));
…Subscribe to Builder to see the full source.See pricing