用途:渲染一个 2-3 选项的分段控件(如 Annual / Monthly),激活选项由滑动的药丸背景高亮;当激活项变化时,药丸在选项位置之间做动画过渡。
主要能力:支持通过参数配置选项列表、激活项关键帧、容器背景与圆角/内边距、药丸背景与圆角、激活/非激活文字颜色、字体、字号、字重、滑动缓动曲线与滑动时长帧数。行为上先渲染水平 flex 容器与选项 span,计算各选项 x 位置,再以绝对定位 div 作为药丸按关键帧在选项位置间动画,文字颜色与药丸同步过渡。
使用方式:按给定参数对象传入 options、active_index_keyframes 及样式字段即可;样式包 SP-A(marshmallow)用于定价场景卡片上方,SP-F(product-demo)的 UI 面板常包含此惯用法。
质量检查:药丸宽度需与选项宽度完全一致,不得超出选项文字;容器内边距在药丸两侧相等;文字颜色过渡需与药丸移动同步(药丸到达时激活文字变白)。
限制与失败模式:药丸超出选项边界时应使用 ease-out 而非带弹跳的 spring;文字颜色闪烁时需与药丸 x 使用同一缓动曲线;药丸渲染在文字下方时需设置 z-index 使文字在药丸之上,同时文字颜色为浅色、药丸背景为深色。
其他信息(如具体平台、收费、价格、安装命令)暂未提供。