胶囊弹出下拉菜单

选中一行，胶囊会弹出药槽并飞进顶部，铝箔留下撕开的空槽。

筛选交互六框架TypeScript

演示

点选胶囊切换筛选，点击顶部展开或收起菜单。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

BlisterDropdown.tsx

正在加载代码…

App.tsx

import { BlisterDropdown } from "./BlisterDropdown";

export default function App() {
  return <BlisterDropdown />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.value` 当前选中的状态。	`"all" \| "open" \| "closed"`	`"all"`
`options.expanded` 菜单是否展开。	`boolean`	`true`
`options.autoClose` 胶囊落下后自动收起。	`boolean`	`true`
`options.sound` 展开、收起或选择时播放音效。	`boolean`	`true`
`options.counts` 覆盖各状态旁的示例数量。	`{ all?: number; open?: number; closed?: number }`
`options.onValueChange` 用户选中不同状态时触发。	`(value: "all" \| "open" \| "closed") => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`580`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`