{ "slug": "typography", "curated": true, "mode": "scenarios", "examples": [ { "id": "typography-ex-1", "title": "默认与常用变体", "titleSrc": "demo", "desc": "", "html": "
\n
\n

页面标题

\n

辅助说明文字,展示信息层级和阅读节奏。

\n

长文本省略示例:订单提交后将进入审核流程……

\n
\n
", "preview": { "show": [ [ 0, 2 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 3 ], [ 0, 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n

页面标题

\n

辅助说明文字,展示信息层级和阅读节奏。

\n

长文本省略示例:订单提交后将进入审核流程……

\n
", "jsx": "import { KoleTypography } from 'kole-ui/react';\n\n<>\n \n \n \n", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleTypography } from 'kole-ui/react';\n\nexport default function KoleTypographyDemo(): JSX.Element {\n return (\n <>\n \n \n \n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "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": "
\n
\n
统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。
\n 支持键盘焦点、状态反馈和令牌化样式。\n
\n

零运行时依赖;数据请求、权限和国际化由宿主接入方决定。

\n
", "preview": { "show": [ [ 0, 3 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n
统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。
\n 支持键盘焦点、状态反馈和令牌化样式。\n
\n

零运行时依赖;数据请求、权限和国际化由宿主接入方决定。

", "jsx": "import { KoleTypography } from 'kole-ui/react';\n\n// 业务卡片内的层级组合:标题 + 正文,children 作为补充正文\n\n 零运行时依赖;数据请求、权限和国际化由宿主接入方决定。\n
", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { KoleTypography } from 'kole-ui/react';\n\nexport default function KoleTypographyDemo(): JSX.Element {\n // 业务卡片内的层级组合:标题 + 正文,children 作为补充正文\n return (\n \n 零运行时依赖;数据请求、权限和国际化由宿主接入方决定。\n
\n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Typography.html 第二个 .demo-block 的文案(「统一标题、正文、辅助文字、数字和省略文本的层级与阅读体验。」+「零运行时依赖;数据请求、权限和国际化由宿主接入方决定。」);该 block 的