Pricing Toggle
介绍
滑块式计费周期切换，价格数字纵向切换，不触发布局抖动。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Pricing Toggle 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add pricing-toggle
mcp › 使用 8pt MCP 调用 get_component("pricing-toggle")
代码
Pricing Toggle 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-pt">
<div class="x-pt__switch" role="tablist">
<span class="x-pt__thumb" aria-hidden="true"></span>
<button type="button" role="tab" aria-selected="true">月付</button>
<button type="button" role="tab" aria-selected="false">年付</button>
</div>
<div class="x-pt__plans">
<div class="x-pt__plan"><span>Nimbus Lite</span><b class="x-pt__price"><i>$12</i><i>$9</i></b><em>/ 月</em></div>
<div class="x-pt__plan x-pt__plan--hi"><span>Nimbus Crew</span><b class="x-pt__price"><i>$29</i><i>$24</i></b><em>/ 月</em></div>
</div>
</div>.x-pt{display:grid;justify-items:center;gap:18px;color:var(--d-fg,#fff)}
.x-pt__switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.1))}
.x-pt__switch button{position:relative;z-index:1;width:76px;height:32px;border:0;background:transparent;color:var(--d-muted,#a0a0ab);font:600 13px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:color .3s}
.x-pt__switch button[aria-selected=true]{color:var(--d-bg,#000)}
.x-pt__thumb{position:absolute;left:4px;top:4px;width:76px;height:32px;border-radius:7px;background:var(--d-fg,#fff);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.x-pt.yearly .x-pt__thumb{transform:translateX(76px)}
.x-pt__plans{display:flex;gap:12px}
.x-pt__plan{display:grid;gap:6px;min-width:120px;padding:16px 18px;border-radius:14px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.1))}
.x-pt__plan--hi{border-color:color-mix(in srgb,var(--d-accent,#4D74FF) 70%,transparent)}
.x-pt__plan span{font:500 12px/1 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#a0a0ab)}
.x-pt__plan em{font:12px/1 var(--d-font,system-ui,sans-serif);font-style:normal;color:var(--d-muted,#a0a0ab)}
.x-pt__price{display:grid;height:1.1em;overflow:hidden;font:700 28px/1.1 var(--d-font,system-ui,sans-serif);font-variant-numeric:tabular-nums}
…const init = (root) => {
const box = root.querySelector('.x-pt'), tabs = box.querySelectorAll('[role=tab]');
tabs.forEach((t, i) => t.addEventListener('click', () => {
box.classList.toggle('yearly', i === 1);
tabs.forEach((x, j) => x.setAttribute('aria-selected', String(i === j)));
}));
};订阅 Builder 查看完整源码。查看价格