aurora-admin/.design_library/kole-ui-mobile/components/actionsheet.json

{
  "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": "面板从底部滑出，与底部标签栏同区域 —— 面板打开时应盖住它"
    }
  ]
}