{ "schemaVersion": 1, "sourceKind": "authored-spec", "provenance": "authored-in-repo", "specFile": "spec/移动端规格.md", "specSection": "3 · 动作面板 ActionSheet", "confidence": "high", "slug": "actionsheet", "name": "动作面板 ActionSheet", "semanticTypeCandidates": [ "sheet", "action-sheet", "dialog" ], "variantDimensions": [ { "name": "tone", "values": [ "default", "danger" ] }, { "name": "cancel", "values": [ "inline", "separate" ] } ], "representativeVariants": [ { "tone": "default", "cancel": "separate", "label": "标准操作组" }, { "tone": "danger", "cancel": "separate", "label": "含危险操作" }, { "tone": "default", "cancel": "inline", "label": "取消为普通项" }, { "tone": "default", "cancel": "separate", "label": "含禁用项" } ], "anatomy": { "mask": "遮罩,点击关闭", "panel": "面板容器,自底部滑出", "title": "可选标题说明", "action": "操作项,高度 56px,可标记危险操作", "cancel": "底部取消按钮,与操作项之间有间隔" }, "structurePatterns": { "tone": "default / danger(危险项用错误色)", "cancel": "inline(取消作为普通项)/ separate(取消独立成块)" }, "usageHints": [ "从底部弹出的操作列表,用于在少量互斥操作中做一次选择", "点击遮罩关闭;点击操作项或取消后关闭", "面板滑出动画 240ms,缓动曲线 cubic-bezier(.32,.72,0,1)", "操作项点击热区高度不小于 56px", "面板 role=dialog + aria-modal=true,遮罩为纯装饰,不参与焦点", "操作项为原生 button,危险项带 aria-label 说明" ], "doNotInvent": [ "多级面板的堆叠规则", "手势下滑关闭的触发阈值" ], "unknowns": [ "操作项超过多少条时需要内部滚动", "危险项是否需要二次确认" ], "interaction": [ "点击遮罩关闭;点击操作项或取消后关闭", "面板滑出动画 240ms,缓动曲线 cubic-bezier(.32,.72,0,1)", "操作项点击热区高度不小于 56px" ], "accessibility": [ "面板 role=dialog + aria-modal=true", "遮罩为纯装饰,不参与焦点", "操作项为原生 button,危险项带 aria-label 说明" ], "api": { "source": "implementation", "note": "props / events / slots 为 6 端实现的公共接口(说明文字取自规格对应小节)。字段名与各端源码逐名核对:node tools/verify-mobile-docs.mjs", "props": [ { "name": "visible", "type": "boolean", "default": "false", "desc": "面板开合(closed / open 由它表达,规格 §3.4)", "required": false }, { "name": "title", "type": "string", "default": "''", "desc": "可选标题说明(规格 §3.2)", "required": false }, { "name": "actions", "type": "Action[]", "default": "[]", "desc": "操作项:{ key, label, tone?, disabled?, ariaLabel? }(规格 §3.2/§3.3)", "required": false }, { "name": "cancelText", "type": "string", "default": "'取消'", "desc": "底部取消按钮文案(规格 §3.2)", "required": false }, { "name": "cancelStyle", "type": "'separate' | 'inline'", "default": "'separate'", "desc": "变体 cancel:取消独立成块或作为普通项(规格 §3.3)", "required": false }, { "name": "label", "type": "string", "default": "'动作面板'", "desc": "面板的无障碍名称(规格 §3.6)", "required": false } ], "events": [ { "name": "select", "params": "key, action", "desc": "点击某个操作项时触发(禁用项不触发)" }, { "name": "close", "params": "—", "desc": "点击遮罩、操作项或取消后触发" } ], "slots": [ { "name": "—", "desc": "无插槽;结构由 title / actions / cancelText 驱动(规格 §3.2)" } ], "requiredNote": "「必传」按严格定义:实现里**没有默认值**时才为 Y(本门禁逐条核对 props 与各端源码的默认值,防止契约与实现脱节)。" }, "variantClasses": { "tone": { "default": [], "danger": [ ".kole-m-actionsheet__action--danger" ] }, "cancel": { "separate": [ ".kole-m-actionsheet__cancel" ], "inline": [ ".kole-m-actionsheet--inline" ] } }, "demos": [ { "id": "default", "group": "01 组件类型", "title": "标准操作组", "desc": "标题说明 + 操作项 + 独立成块的取消;操作项高度 56px。", "variant": "tone=default / cancel=separate" }, { "id": "danger", "group": "01 组件类型", "title": "含危险操作", "desc": "危险项用错误色并补 aria-label;不要把它和普通项做成同色。", "variant": "tone=danger" }, { "id": "inline-cancel", "group": "01 组件类型", "title": "取消为普通项", "desc": "操作项较多时取消不必独立成块,跟随列表一起滑出即可。", "variant": "cancel=inline" }, { "id": "disabled", "group": "02 组件状态", "title": "含禁用项", "desc": "禁用项置灰、点击无效;面板仍可关闭,不阻塞其它操作。", "variant": "disabled" } ], "related": [ { "slug": "swipecell", "why": "单行操作用滑动单元格;整页级别的少量互斥操作用动作面板" }, { "slug": "tabbar", "why": "面板从底部滑出,与底部标签栏同区域 —— 面板打开时应盖住它" } ] }