- 标题
f-heading,右上无关闭键——下拉或点遮罩关闭。 - 主操作通宽 56 固定在底部拇指区,留安全区;取消退化为下方一行文字。
- 字号
f-input17、输入框 48、描边 1.5px——戴手套和强光下的下限。 - 内容超过 70% 屏高改整页。
- iOS
presentationDetents([.medium, .large]),AndroidModalBottomSheet。
消费者提供:标题、内容、主操作。
移动端底部抽屉:表单、选项列表、二级操作都用它,不用居中弹窗(拇指够不到)。card 底、顶部两角 radius-lg、shadow-overlay,顶部一条 36×4 的拖动条(border)。
f-heading,右上无关闭键——下拉或点遮罩关闭。f-input 17、输入框 48、描边 1.5px——戴手套和强光下的下限。presentationDetents([.medium, .large]),Android ModalBottomSheet。消费者提供:标题、内容、主操作。
import { BottomSheet } from "@wutong/ui";
主操作通宽 56 固定拇指区,取消退化成文字
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
| open / onClose | boolean / () => void | — | 受控 |
| title | ReactNode | — | f-heading |
| primary | ReactNode | — | 通宽主按钮(size=field block) |