{ "schemaVersion": 1, "sourceKind": "authored-spec", "provenance": "authored-in-repo", "specFile": "spec/移动端规格.md", "confidence": "high", "specSection": "7 · 单元格 Cell", "slug": "cell", "name": "单元格 Cell", "semanticTypeCandidates": [ "cell", "list-item" ], "variantDimensions": [ { "name": "arrow", "values": [ "false", "true" ] }, { "name": "link", "values": [ "false", "true" ] } ], "representativeVariants": [ { "arrow": "true", "link": "true", "label": "可点单元格(带箭头)" }, { "arrow": "false", "link": "false", "label": "纯展示单元格" }, { "arrow": "false", "link": "true", "label": "可点无箭头" }, { "arrow": "true", "link": "false", "label": "有箭头但不可点" } ], "anatomy": { "cell": "根元素,一行两类内容(左侧主区 / 右侧值区)", "title": "主标题,单行省略", "desc": "可选副标题,单行省略", "value": "右侧值或状态文字", "arrow": "可选右箭头,表示可进入", "icon": "可选左侧图标" }, "structurePatterns": { "arrow": "false / true", "link": "false(纯展示)/ true(整行可点)" }, "usageHints": [ "列表的基本单元:一行里承载「标题 + 说明 + 值 + 箭头」,可整行点击进入下级", "可点单元格整行都是热区,高度不小于 56px", "按下反馈是整行背景变化,不是只有文字变色", "单元格之间默认有 1px 分隔线,可用 borderless 关掉" ], "doNotInvent": [ "多行标题的折叠规则", "单元格内多列布局的栅格规则" ], "unknowns": [ "副标题最多显示几行", "右侧值超长时的截断策略" ], "interaction": [ "可点单元格整行都是热区,高度不小于 56px", "按下反馈是整行背景变化,不是只有文字变色", "单元格之间默认有 1px 分隔线,可用 borderless 关掉" ], "accessibility": [ "可点单元格用原生 button;纯展示单元格用 div", "值区只作展示时不要放进可聚焦元素" ], "api": { "source": "implementation", "note": "props / events / slots 为 6 端实现的公共接口(说明文字取自规格对应小节)。字段名与各端源码逐名核对:node tools/verify-mobile-docs.mjs", "requiredNote": "「必传」按严格定义:实现里**没有默认值**时才为 Y(本门禁逐条核对 props 与各端源码的默认值,防止契约与实现脱节)。", "props": [ { "name": "title", "type": "string", "default": "''", "desc": "主标题,单行省略(规格 §7.2)", "required": false }, { "name": "desc", "type": "string", "default": "''", "desc": "可选副标题,单行省略(规格 §7.2)", "required": false }, { "name": "value", "type": "string", "default": "''", "desc": "右侧值或状态文字(规格 §7.2)", "required": false }, { "name": "arrow", "type": "boolean", "default": "false", "desc": "变体 arrow:显示右箭头表示可进入(规格 §7.3)", "required": false }, { "name": "link", "type": "boolean", "default": "false", "desc": "变体 link:整行可点(规格 §7.3)", "required": false }, { "name": "borderless", "type": "boolean", "default": "false", "desc": "关掉底部 1px 分隔线(规格 §7.5)", "required": false }, { "name": "disabled", "type": "boolean", "default": "false", "desc": "置灰且不响应(规格 §7.4)", "required": false } ], "events": [ { "name": "click", "params": "—", "desc": "可点单元格(link=true)点击时触发" } ], "slots": [ { "name": "default", "desc": "右侧自定义内容,替代 value(规格 §7.2)" }, { "name": "icon", "desc": "可选左侧图标(规格 §7.2)" } ] }, "variantClasses": { "arrow": { "false": [], "true": [ ".kole-m-cell__arrow" ] }, "link": { "false": [], "true": [ ".kole-m-cell--link" ] } }, "demos": [ { "id": "basic", "group": "01 组件类型", "title": "基础用法", "desc": "标题 + 右侧值 + 箭头,最常见的可点单元格。", "variant": "link=true / arrow=true" }, { "id": "desc", "group": "01 组件类型", "title": "带副标题", "desc": "两行文字(主 + 副),副标题单行省略。", "variant": "desc" }, { "id": "custom", "group": "01 组件类型", "title": "自定义右侧", "desc": "右侧放开关、标签等非文字内容(此处用标签示意)。", "variant": "slots.default" }, { "id": "group", "group": "02 组件状态", "title": "分组列表", "desc": "一组单元格共享分隔线;组内最后一条用 borderless 收尾。", "variant": "borderless" }, { "id": "disabled", "group": "02 组件状态", "title": "禁用", "desc": "置灰且不响应点击(无权限项的常见表达)。", "variant": "disabled=true" } ], "related": [ { "slug": "swipecell", "why": "行内还需要滑动操作时用滑动单元格;只进入下级用普通单元格" }, { "slug": "actionsheet", "why": "点击单元格后需要提供多个动作时用动作面板;单一跳转保留单元格语义" } ] }