Segmented Control
介绍
等宽分段 + 滑块，切换时滑块弹簧位移，下方内容淡入。支持方向键切换。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Segmented Control 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add segmented-control
mcp › 使用 8pt MCP 调用 get_component("segmented-control")
代码
Segmented Control 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-seg">
<div class="x-seg__bar" role="tablist" aria-label="视图">
<span class="x-seg__thumb" aria-hidden="true"></span>
<button type="button" role="tab" aria-selected="true">日</button>
<button type="button" role="tab" aria-selected="false">周</button>
<button type="button" role="tab" aria-selected="false">月</button>
<button type="button" role="tab" aria-selected="false">年</button>
</div>
<div class="x-seg__out"><b>2,481</b><span>今日访问</span></div>
</div>.x-seg{display:grid;justify-items:center;gap:18px;color:var(--d-fg,#fff)}
.x-seg__bar{--n:4;--w:62px;position:relative;display:grid;grid-template-columns:repeat(var(--n),var(--w));padding:4px;border-radius:12px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.1))}
.x-seg__bar button{position:relative;z-index:1;height:34px;border:0;background:transparent;color:var(--d-muted,#9b9ba8);font:600 13px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:color .25s}
.x-seg__bar button[aria-selected=true]{color:var(--d-fg,#fff)}
.x-seg__thumb{position:absolute;left:4px;top:4px;width:var(--w);height:34px;border-radius:9px;background:color-mix(in srgb,var(--d-fg,#fff) 10%,var(--d-card,#14141c));border:1px solid var(--d-line,rgba(255,255,255,.14));box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
.x-seg__out{display:grid;justify-items:center;gap:4px;transition:opacity .25s,transform .25s}
.x-seg__out.swap{opacity:0;transform:translateY(6px)}
.x-seg__out b{font:700 34px/1 var(--d-font,system-ui,sans-serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.x-seg__out span{font:12px/1 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}const init = (root) => {
const bar = root.querySelector('.x-seg__bar'), tabs = [...bar.querySelectorAll('[role=tab]')], thumb = bar.querySelector('.x-seg__thumb');
const out = root.querySelector('.x-seg__out'), b = out.querySelector('b'), s = out.querySelector('span');
const data = [['2,481', '今日访问'], ['16,920', '本周访问'], ['71,305', '本月访问'], ['842,117', '全年访问']];
let cur = 0, t;
const go = (i) => { if (i === cur) return; cur = i;
thumb.style.transform = `translateX(${i * 100}%)`;
tabs.forEach((x, j) => { x.setAttribute('aria-selected', String(j === i)); x.tabIndex = j === i ? 0 : -1; });
out.classList.add('swap'); clearTimeout(t); t = setTimeout(() => { b.textContent = data[i][0]; s.textContent = data[i][1]; out.classList.remove('swap'); }, 200); };
tabs.forEach((x, i) => { x.tabIndex = i ? -1 : 0; x.addEventListener('click', () => go(i)); });
bar.addEventListener('keydown', e => { if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { const n = (cur + (e.key === 'ArrowRight' ? 1 : 3)) % 4; go(n); tabs[n].focus(); } });
return () => clearTimeout(t);
…订阅 Builder 查看完整源码。查看价格