114 lines
7.3 KiB
JSON
114 lines
7.3 KiB
JSON
{
|
||
"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
|
||
}
|