{
 "curated": true,
 "slug": "popover",
 "mode": "scenarios",
 "examples": [
  {
   "id": "popover-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-popover\">\n    <div class=\"kole-popover-popover-wrap\">\n      <button class=\"kole-popover-button kole-popover-primary\" type=\"button\" aria-controls=\"kole-popover-pop\" aria-expanded=\"false\" data-pop>查看信息</button>\n      <div class=\"kole-popover-popover\" id=\"kole-popover-pop\" role=\"dialog\" hidden>这里可以放解释、统计或操作。</div>\n    </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-popover\">\n  <div class=\"kole-popover-popover-wrap\">\n    <button class=\"kole-popover-button kole-popover-primary\" type=\"button\" aria-controls=\"kole-popover-pop\" aria-expanded=\"false\">查看信息</button>\n    <div class=\"kole-popover-popover\" role=\"dialog\" hidden>这里可以放解释、统计或操作。</div>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KolePopover } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <KolePopover\n      content=\"这里可以放解释、统计或操作。\"\n      placement=\"bottom\"\n      trigger=\"click\"\n      open={open}\n      onClick={() => setOpen(!open)}\n      onClose={() => setOpen(false)}\n    />\n  );\n}",
    "vue3": "<template>\n  <KolePopover\n    content=\"这里可以放解释、统计或操作。\"\n    placement=\"bottom\"\n    trigger=\"click\"\n    :open=\"visible\"\n    @open=\"visible = true\"\n    @close=\"visible = false\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePopover } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
    "vue2": "<template>\n  <KolePopover\n    content=\"这里可以放解释、统计或操作。\"\n    placement=\"bottom\"\n    trigger=\"click\"\n    :open=\"visible\"\n    @open=\"visible = true\"\n    @close=\"visible = false\"\n  />\n</template>\n\n<script>\nimport { KolePopover } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopover },\n  data() {\n    return { visible: false };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KolePopover } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [open, setOpen] = useState<boolean>(false);\n\n  return (\n    <KolePopover\n      content=\"这里可以放解释、统计或操作。\"\n      placement=\"bottom\"\n      trigger=\"click\"\n      open={open}\n      onClick={() => setOpen(!open)}\n      onClose={() => setOpen(false)}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KolePopover\n    content=\"这里可以放解释、统计或操作。\"\n    placement=\"bottom\"\n    trigger=\"click\"\n    :open=\"visible\"\n    @open=\"visible = true\"\n    @close=\"visible = false\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopover } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\n</script>",
    "vue2ts": "<template>\n\n  <KolePopover\n    content=\"这里可以放解释、统计或操作。\"\n    placement=\"bottom\"\n    trigger=\"click\"\n    :open=\"visible\"\n    @open=\"visible = true\"\n    @close=\"visible = false\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopover } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopover },\n  data(): Record<string, unknown> {\n    return { visible: false };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Popover.html:6 的 kole-popover-popover-wrap + 触发按钮文案\"查看信息\" + 内容\"这里可以放解释、统计或操作。\"，以及同段脚本的 aria-expanded 点击切换；trigger/placement 取值对齐 site/details/popover.json contract.dims（trigger=hover|click、placement=top|right|bottom）"
  },
  {
   "id": "popover-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-popover\">\n    <div class=\"kole-popover-surface\" style=\"padding:12px\">展示比 Tooltip 更丰富的就近信息、表单或操作，支持点击和 Escape 关闭。</div>\n    <span class=\"kole-popover-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-popover\">\n  <div class=\"kole-popover-surface\" style=\"padding:12px\">展示比 Tooltip 更丰富的就近信息、表单或操作，支持点击和 Escape 关闭。</div>\n  <span class=\"kole-popover-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { useState } from 'react';\nimport { KolePopover } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <div className=\"kole-popover-surface\">\n      <KolePopover\n        content=\"就近展示统计、表单或操作入口\"\n        placement=\"right\"\n        trigger=\"hover\"\n        open={visible}\n        onClick={() => setVisible(true)}\n        onClose={() => setVisible(false)}\n      >\n        <span>悬停查看详情</span>\n      </KolePopover>\n    </div>\n  );\n}",
    "vue3": "<template>\n  <div class=\"kole-popover-surface\">\n    <KolePopover\n      content=\"就近展示统计、表单或操作入口\"\n      placement=\"right\"\n      trigger=\"hover\"\n      :open=\"visible\"\n      @open=\"visible = true\"\n      @close=\"visible = false\"\n    >\n      <span>悬停查看详情</span>\n    </KolePopover>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePopover } from 'kole-ui/vue3';\n\nconst visible = ref(false);\n</script>",
    "vue2": "<template>\n  <div class=\"kole-popover-surface\">\n    <KolePopover\n      content=\"就近展示统计、表单或操作入口\"\n      placement=\"right\"\n      trigger=\"hover\"\n      :open=\"visible\"\n      @open=\"visible = true\"\n      @close=\"visible = false\"\n    >\n      <span>悬停查看详情</span>\n    </KolePopover>\n  </div>\n</template>\n\n<script>\nimport { KolePopover } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopover },\n  data() {\n    return { visible: false };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KolePopover } from 'kole-ui/react';\n\nexport default function Demo(): JSX.Element {\n  const [visible, setVisible] = useState<boolean>(false);\n\n  return (\n    <div className=\"kole-popover-surface\">\n      <KolePopover\n        content=\"就近展示统计、表单或操作入口\"\n        placement=\"right\"\n        trigger=\"hover\"\n        open={visible}\n        onClick={() => setVisible(true)}\n        onClose={() => setVisible(false)}\n      >\n        <span>悬停查看详情</span>\n      </KolePopover>\n    </div>\n  );\n}",
    "vue3ts": "<template>\n\n  <div class=\"kole-popover-surface\">\n    <KolePopover\n      content=\"就近展示统计、表单或操作入口\"\n      placement=\"right\"\n      trigger=\"hover\"\n      :open=\"visible\"\n      @open=\"visible = true\"\n      @close=\"visible = false\"\n    >\n      <span>悬停查看详情</span>\n    </KolePopover>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KolePopover } from 'kole-ui/vue3';\n\nconst visible = ref<boolean>(false);\n</script>",
    "vue2ts": "<template>\n\n  <div class=\"kole-popover-surface\">\n    <KolePopover\n      content=\"就近展示统计、表单或操作入口\"\n      placement=\"right\"\n      trigger=\"hover\"\n      :open=\"visible\"\n      @open=\"visible = true\"\n      @close=\"visible = false\"\n    >\n      <span>悬停查看详情</span>\n    </KolePopover>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePopover } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePopover },\n  data(): Record<string, unknown> {\n    return { visible: false };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Popover.html:6 第二段的 kole-popover-surface 与 kole-popover-desc（\"展示比 Tooltip 更丰富的就近信息、表单或操作，支持点击和 Escape 关闭\"）；trigger=hover、placement=right 取自 site/details/popover.json contract.dims.trigger / contract.dims.placement"
  }
 ]
}