116 lines
9.6 KiB
JSON
116 lines
9.6 KiB
JSON
{
|
||
"slug": "typography",
|
||
"curated": true,
|
||
"mode": "scenarios",
|
||
"examples": [
|
||
{
|
||
"id": "typography-ex-1",
|
||
"title": "默认与常用变体",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-typography\">\n <h2 class=\"kole-typography-title\">页面标题</h2>\n <p class=\"kole-typography-desc\">辅助说明文字，展示信息层级和阅读节奏。</p>\n <p class=\"kole-typography-compact\">长文本省略示例：订单提交后将进入审核流程……</p>\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-typography\">\n <h2 class=\"kole-typography-title\">页面标题</h2>\n <p class=\"kole-typography-desc\">辅助说明文字，展示信息层级和阅读节奏。</p>\n <p class=\"kole-typography-compact\">长文本省略示例：订单提交后将进入审核流程……</p>\n</div>",
|
||
"jsx": "import { KoleTypography } from 'kole-ui/react';\n\n<>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" maxLength={20} />\n</>",
|
||
"vue3": "<template>\n <div>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" :max-length=\"20\" />\n </div>\n</template>\n\n<script setup>\nimport { KoleTypography } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <div>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" :max-length=\"20\" />\n </div>\n</template>\n\n<script>\nimport { KoleTypography } from 'kole-ui/vue2';\nexport default { components: { KoleTypography } };\n</script>",
|
||
"tsx": "import { KoleTypography } from 'kole-ui/react';\n\nexport default function KoleTypographyDemo(): JSX.Element {\n return (\n <>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" maxLength={20} />\n </>\n );\n}",
|
||
"vue3ts": "<template>\n\n <div>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" :max-length=\"20\" />\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTypography } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <div>\n <KoleTypography variant=\"primary\" text=\"页面标题\" align=\"left\" />\n <KoleTypography variant=\"default\" text=\"辅助说明文字，展示信息层级和阅读节奏。\" align=\"left\" />\n <KoleTypography variant=\"compact\" text=\"长文本省略示例：订单提交后将进入审核流程……\" :max-length=\"20\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTypography } from 'kole-ui/vue2';\n\nexport default { components: { KoleTypography },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Typography.html 第一个 .demo-block 的三行真实文本：h2②页面标题、p「辅助说明文字，展示信息层级和阅读节奏。」、p.kole-typography-compact「长文本省略示例：订单提交后将进入审核流程……」，分别对应 variant 三档（取值 primary|default|compact 见 site/details/typography.json 的 contract.dims）。",
|
||
"text / variant / align / maxLength 四个 prop 名见 frameworks/Typography.jsx 第 4 行参数表与 frameworks/Typography.vue3.vue 第 7-11 行 defineProps；省略行为由 maxLength 触发。"
|
||
]
|
||
},
|
||
{
|
||
"id": "typography-ex-2",
|
||
"title": "状态与使用场景",
|
||
"titleSrc": "demo",
|
||
"desc": "",
|
||
"html": "<div class=\"demo-block\">\n <div class=\"row kole-typography\">\n <div class=\"kole-typography-surface\" style=\"padding:12px\">统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。</div>\n <span class=\"kole-typography-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-typography\">\n <div class=\"kole-typography-surface\" style=\"padding:12px\">统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。</div>\n <span class=\"kole-typography-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
|
||
"jsx": "import { KoleTypography } from 'kole-ui/react';\n\n// 业务卡片内的层级组合：标题 + 正文，children 作为补充正文\n<KoleTypography\n variant=\"default\"\n align=\"center\"\n maxLength={24}\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n>\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n</KoleTypography>",
|
||
"vue3": "<template>\n <KoleTypography\n variant=\"default\"\n align=\"center\"\n :max-length=\"24\"\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n >\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n </KoleTypography>\n</template>\n\n<script setup>\nimport { KoleTypography } from 'kole-ui/vue3';\n</script>",
|
||
"vue2": "<template>\n <KoleTypography\n variant=\"default\"\n align=\"center\"\n :max-length=\"24\"\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n >\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n </KoleTypography>\n</template>\n\n<script>\nimport { KoleTypography } from 'kole-ui/vue2';\nexport default { components: { KoleTypography } };\n</script>",
|
||
"tsx": "import { KoleTypography } from 'kole-ui/react';\n\nexport default function KoleTypographyDemo(): JSX.Element {\n // 业务卡片内的层级组合：标题 + 正文，children 作为补充正文\n return (\n <KoleTypography\n variant=\"default\"\n align=\"center\"\n maxLength={24}\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n >\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n </KoleTypography>\n );\n}",
|
||
"vue3ts": "<template>\n\n <KoleTypography\n variant=\"default\"\n align=\"center\"\n :max-length=\"24\"\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n >\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n </KoleTypography>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTypography } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\n\n</script>",
|
||
"vue2ts": "<template>\n\n <KoleTypography\n variant=\"default\"\n align=\"center\"\n :max-length=\"24\"\n text=\"订单提交后将进入审核流程，预计 1 个工作日内完成。\"\n >\n 零运行时依赖；数据请求、权限和国际化由宿主接入方决定。\n </KoleTypography>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTypography } from 'kole-ui/vue2';\n\nexport default { components: { KoleTypography },\n data(): Record<string, never> {\n return {};\n }\n};\n</script>"
|
||
},
|
||
"notes": [
|
||
"依据 frameworks/Typography.html 第二个 .demo-block 的文案（「统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。」+「零运行时依赖；数据请求、权限和国际化由宿主接入方决定。」）；该 block 的 <script> 为空，用 children / 默认插槽承载正文文案，与示例 1 的三档并排写法区分。",
|
||
"组件对子节点的支持来自四端实现：frameworks/Typography.jsx 第 4 行参数表中的 children 与 frameworks/Typography.vue3.vue 第 2 行的 <slot />；align 默认值 left 在此显式改为 center。"
|
||
]
|
||
}
|
||
]
|
||
}
|