{
 "slug": "divider",
 "mode": "scenarios",
 "curated": true,
 "examples": [
  {
   "id": "divider-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-divider\">\n    <div style=\"width:100%\">\n      <div class=\"kole-divider-desc\">基础信息</div>\n      <hr class=\"kole-divider-divider\" />\n      <div class=\"kole-divider-desc\">安全设置</div>\n    </div>\n    <div class=\"kole-divider-divider is-vertical\" role=\"separator\" aria-label=\"分隔\"></div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-divider\">\n  <div style=\"width:100%\">\n    <div class=\"kole-divider-desc\">基础信息</div>\n    <hr class=\"kole-divider-divider\" />\n    <div class=\"kole-divider-desc\">安全设置</div>\n  </div>\n  <div class=\"kole-divider-divider is-vertical\" role=\"separator\" aria-label=\"分隔\"></div>\n</div>",
    "jsx": "import { KoleDivider } from 'kole-ui/react';\n\n<>\n  <KoleDivider title=\"基础信息\" />\n  <KoleDivider title=\"安全设置\" />\n  <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n</>",
    "vue3": "<template>\n  <div class=\"kole-divider-row\">\n    <KoleDivider title=\"基础信息\" />\n    <KoleDivider title=\"安全设置\" />\n    <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n  </div>\n</template>\n\n<script setup>\nimport { KoleDivider } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div class=\"kole-divider-row\">\n    <KoleDivider title=\"基础信息\" />\n    <KoleDivider title=\"安全设置\" />\n    <KoleDivider orientation=\"vertical\" aria-label=\"分隔\" />\n  </div>\n</template>\n\n<script>\nimport { KoleDivider } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDivider },\n};\n</script>",
    "tsx": "import { KoleDivider } from 'kole-ui/react';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n  key: string;\n  title?: string;\n  orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n  { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n  { key: 'security', title: '安全设置', orientation: 'horizontal' },\n  { key: 'separate', orientation: 'vertical' },\n];\n\nconst separate: DividerSample = samples[2];\nconst labeled: ReadonlyArray<DividerSample> = samples.slice(0, 2);\n\nexport default function DividerDefaultDemo(): JSX.Element {\n  return (\n    <div className=\"kole-divider-row\">\n      {labeled.map((sample) => (\n        <KoleDivider key={sample.key} title={sample.title} />\n      ))}\n      <KoleDivider orientation={separate.orientation} aria-label=\"分隔\" />\n    </div>\n  );\n}",
    "vue3ts": "<template>\n  <div class=\"kole-divider-row\">\n    <KoleDivider v-for=\"sample in labeled\" :key=\"sample.key\" :title=\"sample.title\" />\n    <KoleDivider :orientation=\"separate.orientation\" aria-label=\"分隔\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDivider } from 'kole-ui/vue3';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n  key: string;\n  title?: string;\n  orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n  { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n  { key: 'security', title: '安全设置', orientation: 'horizontal' },\n  { key: 'separate', orientation: 'vertical' },\n];\n\nconst separate: DividerSample = samples[2];\nconst labeled: ReadonlyArray<DividerSample> = samples.slice(0, 2);\n</script>",
    "vue2ts": "<template>\n  <div class=\"kole-divider-row\">\n    <KoleDivider v-for=\"sample in labeled\" :key=\"sample.key\" :title=\"sample.title\" />\n    <KoleDivider :orientation=\"separate.orientation\" aria-label=\"分隔\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDivider } from 'kole-ui/vue2';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\ninterface DividerSample {\n  key: string;\n  title?: string;\n  orientation: DividerOrientation;\n}\n\nconst samples: ReadonlyArray<DividerSample> = [\n  { key: 'basic', title: '基础信息', orientation: 'horizontal' },\n  { key: 'security', title: '安全设置', orientation: 'horizontal' },\n  { key: 'separate', orientation: 'vertical' },\n];\n\nexport default Vue.extend({\n  components: { KoleDivider },\n  data(): { samples: ReadonlyArray<DividerSample> } {\n    return { samples };\n  },\n  computed: {\n    labeled(): ReadonlyArray<DividerSample> {\n      return this.samples.slice(0, 2);\n    },\n    separate(): DividerSample {\n      return this.samples[2];\n    },\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Divider.html:5 第一个 demo-block（基础信息 → hr.kole-divider-divider → 安全设置，另有 div.kole-divider-divider.is-vertical 带 role=separator / aria-label=分隔）；prop 取 frameworks/Divider.jsx:4 的 title、orientation",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 type DividerOrientation 字面量联合 + ReadonlyArray<DividerSample>（orientation 见 Divider.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + computed 标注返回类型；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "divider-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-divider\">\n    <div class=\"kole-divider-surface\" style=\"padding:12px\">分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。</div>\n    <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-divider\">\n  <div class=\"kole-divider-surface\" style=\"padding:12px\">分隔表单段落、菜单组或内容块，支持水平/垂直方向和带文字分隔。</div>\n  <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleDivider } from 'kole-ui/react';\n\n<>\n  <span className=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n  <KoleDivider orientation=\"vertical\" />\n  <span className=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n</>",
    "vue3": "<template>\n  <div class=\"kole-divider-row\">\n    <span class=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n    <KoleDivider orientation=\"vertical\" />\n    <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n  </div>\n</template>\n\n<script setup>\nimport { KoleDivider } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div class=\"kole-divider-row\">\n    <span class=\"kole-divider-desc\">分隔表单段落、菜单组或内容块</span>\n    <KoleDivider orientation=\"vertical\" />\n    <span class=\"kole-divider-desc\">支持键盘焦点、状态反馈和令牌化样式</span>\n  </div>\n</template>\n\n<script>\nimport { KoleDivider } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDivider },\n};\n</script>",
    "tsx": "import { KoleDivider } from 'kole-ui/react';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n  previous: string;\n  next: string;\n  orientation: DividerOrientation;\n}\n\nconst copy: DividerCopy = {\n  previous: '分隔表单段落、菜单组或内容块',\n  next: '支持键盘焦点、状态反馈和令牌化样式',\n  orientation: 'vertical',\n};\n\nexport default function DividerScenarioDemo(): JSX.Element {\n  return (\n    <div className=\"kole-divider-row\">\n      <span className=\"kole-divider-desc\">{copy.previous}</span>\n      <KoleDivider orientation={copy.orientation} />\n      <span className=\"kole-divider-desc\">{copy.next}</span>\n    </div>\n  );\n}",
    "vue3ts": "<template>\n  <div class=\"kole-divider-row\">\n    <span class=\"kole-divider-desc\">{{ copy.previous }}</span>\n    <KoleDivider :orientation=\"copy.orientation\" />\n    <span class=\"kole-divider-desc\">{{ copy.next }}</span>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDivider } from 'kole-ui/vue3';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n  previous: string;\n  next: string;\n  orientation: DividerOrientation;\n}\n\nconst copy: DividerCopy = {\n  previous: '分隔表单段落、菜单组或内容块',\n  next: '支持键盘焦点、状态反馈和令牌化样式',\n  orientation: 'vertical',\n};\n</script>",
    "vue2ts": "<template>\n  <div class=\"kole-divider-row\">\n    <span class=\"kole-divider-desc\">{{ copy.previous }}</span>\n    <KoleDivider :orientation=\"copy.orientation\" />\n    <span class=\"kole-divider-desc\">{{ copy.next }}</span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDivider } from 'kole-ui/vue2';\n\ntype DividerOrientation = 'horizontal' | 'vertical';\n\ninterface DividerCopy {\n  previous: string;\n  next: string;\n  orientation: DividerOrientation;\n}\n\nexport default Vue.extend({\n  components: { KoleDivider },\n  data(): { copy: DividerCopy } {\n    return {\n      copy: {\n        previous: '分隔表单段落、菜单组或内容块',\n        next: '支持键盘焦点、状态反馈和令牌化样式',\n        orientation: 'vertical',\n      },\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/Divider.html:5 第二个 demo-block（span.kole-divider-desc 说明文案「分隔表单段落、菜单组或内容块」）与同页 is-vertical 用法；orientation 取 frameworks/Divider.jsx:4 / Divider.vue3.vue defineProps 的 horizontal|vertical"
   ]
  }
 ]
}