底部抽屉 · 抽屉 · 模态框 · 气泡卡片
并排对比 4 个概念，按 3 个维度逐项查看差异。点击表头进入对应概念详情。
先试，再选
同一个任务，不同的操作体验
试试：筛选 ¥200 以内的家居商品，关闭再打开，再点选结果。观察什么被挡住、条件是否保留。三个预览独立操作，关闭不会清除条件；重置或离开本组会清除。
弹窗
遮罩覆盖日常好物
6 件商品 · ¥500 以内
点击商品即可选中
遮住结果、集中完成选择；关闭后才能操作商品。
选择这个组件 →侧边抽屉
非模态日常好物
6 件商品 · ¥500 以内
点击商品即可选中
本例使用非模态抽屉：条件变化时，左侧结果仍可点击。窄容器下结果可见面积会减少。
选择这个组件 →底部面板
遮罩覆盖日常好物
6 件商品 · ¥500 以内
点击商品即可选中
从底部展开，保留上方场景；内容增加时，面板内部滚动。
选择这个组件 →这是受限容器里的交互样板，用于比较行为；抽屉也可设计为模态。实际项目仍需测试设备视口、长内容与辅助技术。