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

{
  "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": "列表单元格自带内容分隔；独立内容区之间才使用分割线"
    }
  ]
}