114 lines
7.0 KiB
JSON
114 lines
7.0 KiB
JSON
{
|
|
"slug": "link",
|
|
"curated": true,
|
|
"mode": "scenarios",
|
|
"examples": [
|
|
{
|
|
"id": "link-ex-1",
|
|
"title": "默认与常用变体",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-link\">\n <a class=\"kole-link-link\" href=\"#detail\">查看详情</a>\n <a class=\"kole-link-link kole-link-secondary\" href=\"#download\">下载文件</a>\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-link\">\n <a class=\"kole-link-link\" href=\"#detail\">查看详情</a>\n <a class=\"kole-link-link kole-link-secondary\" href=\"#download\">下载文件</a>\n</div>",
|
|
"jsx": "import { KoleLink } from 'kole-ui/react';\n\n<>\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" className=\"kole-link-secondary\">下载文件</KoleLink>\n</>",
|
|
"vue3": "<template>\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" class=\"kole-link-secondary\">下载文件</KoleLink>\n</template>\n\n<script setup>\nimport { KoleLink } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div>\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" class=\"kole-link-secondary\">下载文件</KoleLink>\n </div>\n</template>\n\n<script>\nimport { KoleLink } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleLink }\n};\n</script>",
|
|
"tsx": "import { KoleLink } from 'kole-ui/react';\n\nexport default function KoleLinkDemo(): JSX.Element {\n return (\n <>\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" className=\"kole-link-secondary\">下载文件</KoleLink>\n </>\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" class=\"kole-link-secondary\">下载文件</KoleLink>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleLink } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\n\n</script>",
|
|
"vue2ts": "<template>\n\n <div>\n <KoleLink href=\"#detail\">查看详情</KoleLink>\n <KoleLink href=\"#download\" class=\"kole-link-secondary\">下载文件</KoleLink>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLink } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleLink },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/Link.html 默认示例的两条链接：a.kole-link-link[href=\"#detail\"]「查看详情」与 a.kole-link-link.kole-link-secondary[href=\"#download\"]「下载文件」；kole-link-secondary 是 Link.css 里的次链接类"
|
|
]
|
|
},
|
|
{
|
|
"id": "link-ex-2",
|
|
"title": "状态与使用场景",
|
|
"titleSrc": "demo",
|
|
"desc": "",
|
|
"html": "<div class=\"demo-block\">\n <div class=\"row kole-link\">\n <div class=\"kole-link-surface\" style=\"padding:12px\">跳转详情、下载文件或打开外部地址，提供主次和禁用状态。</div>\n <span class=\"kole-link-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-link\">\n <div class=\"kole-link-surface\" style=\"padding:12px\">跳转详情、下载文件或打开外部地址，提供主次和禁用状态。</div>\n <span class=\"kole-link-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
|
"jsx": "import { KoleLink } from 'kole-ui/react';\n\n<>\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n</>",
|
|
"vue3": "<template>\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n</template>\n\n<script setup>\nimport { KoleLink } from 'kole-ui/vue3';\n</script>",
|
|
"vue2": "<template>\n <div>\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n </div>\n</template>\n\n<script>\nimport { KoleLink } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleLink }\n};\n</script>",
|
|
"tsx": "import { KoleLink } from 'kole-ui/react';\n\nexport default function KoleLinkDemo(): JSX.Element {\n return (\n <>\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n </>\n );\n}",
|
|
"vue3ts": "<template>\n\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleLink } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\n\n</script>",
|
|
"vue2ts": "<template>\n\n <div>\n <KoleLink href=\"https://example.com/docs\" target=\"_blank\">查看文档</KoleLink>\n <KoleLink href=\"#download\" variant=\"compact\">下载文件</KoleLink>\n <KoleLink href=\"#detail\" disabled>查看详情（无权限）</KoleLink>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleLink } from 'kole-ui/vue2';\n\nexport default {\n components: { KoleLink },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
|
},
|
|
"notes": [
|
|
"依据 frameworks/Link.html「状态与使用场景」正文「跳转详情、下载文件或打开外部地址，提供主次和禁用状态」；target 与 disabled 取自 frameworks/Link.jsx 的 target/_blank 与 disabled（禁用时 href 不下发），variant 取值 default|primary|compact 见 data.json contract dims"
|
|
]
|
|
}
|
|
]
|
|
}
|