{
 "slug": "avatar",
 "mode": "scenarios",
 "examples": [
  {
   "id": "avatar-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-avatar\">\n    <span class=\"kole-avatar-item\">\n      <span class=\"kole-avatar-avatar\" aria-label=\"林工\">林</span>\n      <span class=\"kole-avatar-status\" aria-label=\"在线\"></span>\n    </span>\n    <span class=\"kole-avatar-avatar kole-avatar-avatar is-offline\" aria-label=\"陈工\">陈</span>\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-avatar\">\n  <span class=\"kole-avatar-item\">\n    <span class=\"kole-avatar-avatar\" aria-label=\"林工\">林</span>\n    <span class=\"kole-avatar-status\" aria-label=\"在线\"></span>\n  </span>\n  <span class=\"kole-avatar-avatar kole-avatar-avatar is-offline\" aria-label=\"陈工\">陈</span>\n</div>",
    "jsx": "import { KoleAvatar } from 'kole-ui/react';\n\n<>\n  <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n</>",
    "vue3": "<template>\n  <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n</template>\n\n<script setup>\nimport { KoleAvatar } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n    <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n  </div>\n</template>\n\n<script>\nimport { KoleAvatar } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAvatar }\n};\n</script>",
    "tsx": "import { KoleAvatar } from 'kole-ui/react';\n\nexport default function KoleAvatarDemo(): JSX.Element {\n  return (\n    <>\n      <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n      <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAvatar } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleAvatar avatar=\"林\" size=\"40px\" status=\"online\" />\n    <KoleAvatar avatar=\"陈\" size=\"40px\" status=\"offline\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAvatar } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAvatar },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Avatar.html 第一个 demo-block：kole-avatar-avatar 文字头像「林」+ kole-avatar-status 在线状态点，以及第二个头像「陈」带 is-offline；avatar/size/status 见 Avatar.jsx 形参与 Avatar.vue3 defineProps（status 默认 online）。"
   ]
  },
  {
   "id": "avatar-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-avatar\">\n    <div class=\"kole-avatar-surface\" style=\"padding:12px\">展示成员、审批人或操作者，支持文字、图片、尺寸和在线状态点。</div>\n    <span class=\"kole-avatar-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-avatar\">\n  <div class=\"kole-avatar-surface\" style=\"padding:12px\">展示成员、审批人或操作者，支持文字、图片、尺寸和在线状态点。</div>\n  <span class=\"kole-avatar-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleAvatar } from 'kole-ui/react';\n\n<>\n  <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n  <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n</>",
    "vue3": "<template>\n  <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n  <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n</template>\n\n<script setup>\nimport { KoleAvatar } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n    <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n    <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n  </div>\n</template>\n\n<script>\nimport { KoleAvatar } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAvatar }\n};\n</script>",
    "tsx": "import { KoleAvatar } from 'kole-ui/react';\n\nexport default function KoleAvatarDemo(): JSX.Element {\n  return (\n    <>\n      <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n      <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n      <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n  <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n  <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAvatar } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleAvatar avatar=\"林工\" size=\"32px\" status=\"online\" />\n    <KoleAvatar avatar=\"陈工\" size=\"40px\" status=\"online\" />\n    <KoleAvatar src=\"/avatars/lin.png\" avatar=\"林工\" size=\"48px\" status=\"offline\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAvatar } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAvatar },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Avatar.html 第二个 demo-block（kole-avatar-surface）文案「支持文字、图片、尺寸和在线状态点」；文字头像用 avatar、图片头像用 src、尺寸用 size，三者在 Avatar.jsx 与 Avatar.vue3 的 src/avatar/size/status 声明中均有定义。"
   ]
  }
 ],
 "curated": true
}