{ "schemaVersion": 1, "sourceKind": "authored-spec", "provenance": "authored-in-repo", "specFile": "spec/移动端规格.md", "confidence": "high", "specSection": "8 · 分割线 Divider", "slug": "mobile-divider", "name": "分割线 Divider", "semanticTypeCandidates": [ "divider", "separator" ], "variantDimensions": [ { "name": "orientation", "values": [ "horizontal", "vertical" ] }, { "name": "align", "values": [ "left", "center", "right" ] }, { "name": "dashed", "values": [ "false", "true" ] } ], "representativeVariants": [ { "orientation": "horizontal", "align": "center", "label": "水平分割线" }, { "orientation": "horizontal", "align": "left", "label": "带文字(左对齐)" }, { "orientation": "horizontal", "align": "center", "label": "带文字(居中)" }, { "orientation": "vertical", "align": "center", "label": "垂直分割线" } ], "anatomy": { "divider": "根元素,水平时为 1px 高", "text": "可选文字,居中或左/右对齐", "line": "文字两侧的线" }, "structurePatterns": { "orientation": "horizontal / vertical", "align": "left / center / right(带文字时生效)" }, "usageHints": [ "在内容之间画一条细分隔线;带文字时用于分区标题", "纯静态,不参与点击与手势", "垂直分割线高度跟随父容器(用 align-self: stretch)", "纯装饰:role=separator + aria-hidden=true(对读屏无信息量)" ], "doNotInvent": [ "主题化分割线(渐变、图片)的表现" ], "unknowns": [ "垂直分割线的推荐间距" ], "interaction": [ "纯静态,不参与点击与手势", "垂直分割线高度跟随父容器(用 align-self: stretch)" ], "accessibility": [ "纯装饰:role=\"separator\" + aria-hidden=\"true\"(对读屏无信息量)", "带文字的分割线不隐藏,文字本身即语义" ], "api": { "source": "implementation", "note": "props / events / slots 为 6 端实现的公共接口(说明文字取自规格对应小节)。字段名与各端源码逐名核对:node tools/verify-mobile-docs.mjs", "requiredNote": "「必传」按严格定义:实现里**没有默认值**时才为 Y(本门禁逐条核对 props 与各端源码的默认值,防止契约与实现脱节)。", "props": [ { "name": "orientation", "type": "'horizontal' | 'vertical'", "default": "'horizontal'", "desc": "变体 orientation(规格 §8.3)", "required": false }, { "name": "align", "type": "'left' | 'center' | 'right'", "default": "'center'", "desc": "变体 align:带文字时的对齐方式(规格 §8.3)", "required": false }, { "name": "dashed", "type": "boolean", "default": "false", "desc": "变体 dashed:虚线(规格 §8.3)", "required": false } ], "events": [], "slots": [ { "name": "default", "desc": "可选文字,居中或左/右对齐(规格 §8.2)" } ] }, "variantClasses": { "orientation": { "horizontal": [], "vertical": [ ".kole-m-divider--vertical" ] }, "align": { "left": [ ".kole-m-divider--left" ], "center": [ ".kole-m-divider--center" ], "right": [ ".kole-m-divider--right" ] }, "dashed": { "false": [], "true": [ ".kole-m-divider--dashed" ] } }, "demos": [ { "id": "basic", "group": "01 组件类型", "title": "基础用法", "desc": "一条 1px 的水平分隔线。", "variant": "orientation=horizontal" }, { "id": "text-center", "group": "01 组件类型", "title": "带文字(居中)", "desc": "文字两侧各一条线,用作分区标题。", "variant": "align=center" }, { "id": "align", "group": "01 组件类型", "title": "文字对齐", "desc": "左/右对齐时另一侧的线自然变长。", "variant": "align=left | right" }, { "id": "vertical", "group": "02 组件状态", "title": "垂直分割线", "desc": "行内并列元素之间用垂直分割线,高度跟随父容器。", "variant": "orientation=vertical" }, { "id": "dashed", "group": "02 组件状态", "title": "虚线", "desc": "虚线用于弱分隔(如「没有更多了」)。", "variant": "dashed=true" } ], "related": [ { "slug": "cell", "why": "单元格自带行间分隔线,列表里不需要再插分割线" }, { "slug": "cell", "why": "列表单元格自带内容分隔;独立内容区之间才使用分割线" } ] }