前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载本篇技术指南聚焦microsoft/fast-components1.x中名为typeRampBaseLineHeight的设计令牌Design Token它是 FAST Frame 设计系统排版阶梯type ramp中正文Base一级的行高基准。读完本文你将掌握该令牌的签名含义、它在 9 级字体阶梯中的位置、如何通过 DesignToken API 读取与按 DOM 子树覆盖其取值以及它如何与DesignSystem、CSS 自定义属性机制协同工作。一、API 签名解读这个变量到底是什么该 API 参考条目fast-components.typerampbaselineheight.md由 API Documenter 自动生成属于microsoft/fast-components包对外公开 API 的一部分。完整签名如下typeRampBaseLineHeight: import(microsoft/fast-foundation).CSSDesignTokenstring逐项解读导出来源该变量由microsoft/fast-componentsFAST Frame 组件包导出与typeRampBaseFontSize、typeRampPlus1LineHeight等组成一族排版令牌统一收录在 fast-components.md API 索引中。变量类型import(microsoft/fast-foundation).CSSDesignTokenstring即来自microsoft/fast-foundation的CSS 设计令牌泛型参数为string表示该令牌的取值是字符串——这与行高的 CSS 语义吻合既可写入24px、1.5rem等长度值也可写入1.5这类无单位倍数最终由消费该令牌的组件样式决定解析方式。令牌而非普通常量它不是普通的const字符串而是具有作用域与 CSS 自定义属性发射能力的设计系统变量详见下文第三节。二、它在 FAST Frame 字体阶梯中的位置FAST Frame 设计系统文档见 fast-frame.md通过设计令牌对外暴露排版配置。排版令牌按字体大小分 9 个层级每一级同时配有FontSize与LineHeight两个令牌层级字号令牌行高令牌Minus 2最小typeRampMinus2FontSizetypeRampMinus2LineHeightMinus 1typeRampMinus1FontSizetypeRampMinus1LineHeightBase正文typeRampBaseFontSizetypeRampBaseLineHeightPlus 1typeRampPlus1FontSizetypeRampPlus1LineHeightPlus 2typeRampPlus2FontSizetypeRampPlus2LineHeightPlus 3typeRampPlus3FontSizetypeRampPlus3LineHeightPlus 4typeRampPlus4FontSizetypeRampPlus4LineHeightPlus 5typeRampPlus5FontSizetypeRampPlus5LineHeightPlus 6最大typeRampPlus6FontSizetypeRampPlus6LineHeight可见typeRampBaseLineHeight是Base正文级行高令牌与 typeRampBaseFontSize字号令牌配对使用构成正文排版基线。绝大多数控件与页面正文的行高都以此为基准向上或向下缩放因此它是排版体系中影响面最广的行高令牌之一。其余 8 级行高令牌如typeRampMinus1LineHeight、typeRampPlus2LineHeight均可在 fast-components.md 中找到对应的独立 API 条目。三、为什么要用设计令牌底层机制typeRampBaseLineHeight之所以是CSSDesignToken是因为 FAST Frame 依赖 design-tokens.md 所述的设计令牌体系来实现以极少代码改动换取巨大的视觉差异。该机制的核心能力包括作用域取值令牌值可以为某个FASTElement或HTMLBodyElement节点单独设置不同的 DOM 子树可以拥有不同的行高基线例如对话框区域整体放大正文行高。CSS 自定义属性发射除非显式禁用令牌在为某元素设置值时会自动将值发射为 CSS 自定义属性当令牌值为派生值依赖其他令牌计算得出时依赖令牌变化也会触发重新发射。默认值兜底令牌可注册默认值在没有为任何节点设置值时返回默认结果。3.1 令牌的创建形态同一机制的参考虽然typeRampBaseLineHeight由框架预置但理解其底层形态有助于读懂它的行为。设计令牌的典型创建方式如下出自 design-tokens.mdimport { DesignToken } from microsoft/fast-foundation; export const specialColor DesignToken.createstring(special-color);其中类型参数声明了令牌可被设置/取回的值类型对应本主题中的string名称参数则用于派生 CSS 自定义属性名。3.2 默认值发射与根注册要让令牌的默认值发射为 CSS 自定义属性需要完成令牌根注册DesignToken.registerRoot(); // 默认值自此对整个文档发射也可以指定根元素将发射范围限定到该子树const root document.querySelector(#root)! as HTMLDivElement; DesignToken.registerRoot(root); // 不再需要时 DesignToken.unregisterRoot(root);四、读取与覆盖 typeRampBaseLineHeight 的完整操作以下操作全部基于 design-tokens.md 中记录的 DesignToken API可直接套用于typeRampBaseLineHeight。4.1 为指定节点设置行高import { typeRampBaseLineHeight } from microsoft/fast-components; const app document.querySelector(#app) as FASTElement; const dialog app.querySelector(my-dialog) as FASTElement; // 给整个 app 子树设置正文行高基线 typeRampBaseLineHeight.setValueFor(app, 26px); // 在 dialog 子树上覆盖为更紧凑的布局 typeRampBaseLineHeight.setValueFor(dialog, 22px);4.2 读取行高取值取值遵循最近祖先优先规则返回的是该节点或其最近祖先上设置的值。typeRampBaseLineHeight.getValueFor(app); // 26px typeRampBaseLineHeight.getValueFor(dialog); // 22px4.3 注册默认值当某棵子树没有任何显式设置时默认值会被兜底返回typeRampBaseLineHeight.withDefault(24px);4.4 删除节点上的值删除后取值回退到最近祖先的值typeRampBaseLineHeight.deleteValueFor(dialog); typeRampBaseLineHeight.getValueFor(dialog); // 26px回退到 app 层的值4.5 定制或禁用 CSS 自定义属性发射令牌创建时可指定自定义属性名或将cssCustomPropertyName置为null关闭发射参考形态DesignToken.createstring({ name: my-line-height-token, cssCustomPropertyName: my-css-custom-property-name // 发射为 --my-css-custom-property-name }); // 或cssCustomPropertyName: null 表示不发射五、与 DesignSystem 的集成在实际使用中typeRampBaseLineHeight通常随 FAST Frame 组件一起经由DesignSystem工作。FAST Frame 的使用流程为见 fast-frame.md先引入组件注册再注册到设计系统import { fastButton, fastMenu, provideFASTDesignSystem } from microsoft/fast-components; provideFASTDesignSystem() .register( fastButton(), fastMenu() );值得注意的集成点令牌根自动注册调用DesignSystem.register()时令牌根注册会自动完成因此预置令牌的默认值会正常发射为 CSS 自定义属性如需自定义根元素可用DesignSystem.withDesignTokenRoot(root)传null可关闭见 design-tokens.md。组件级覆盖由于令牌支持按节点设置值你可以在注册完组件后针对特定容器节点覆盖正文行高实现局部版式微调而不必改动组件模板与样式文件本身。样式表覆盖的告诫fast-frame.md 明确警告对令牌系统发射出的 CSS 自定义属性应通过DesignToken的 API 修改值而不是在样式表中手工覆盖——令牌系统无法感知 CSS 中的手工改动可能导致渲染结果与令牌值不一致。这一告诫对排版令牌同样适用。六、相关文档导航本条目 API 参考fast-components.typerampbaselineheight.md完整 API 索引含全部排版令牌fast-components.md字体阶梯全表与排版令牌说明fast-frame.md设计令牌机制详解创建/取值/发射/根注册design-tokens.md设计系统总览overview.md赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST designUnit 设计令牌详解理解并驾驭 FAST Frame 组件尺寸体系的单位基石FAST designUnit 设计令牌详解理解并驾驭 FAST Frame 组件尺寸体系的单位基石 designUnit 是 FAST 设计系统FAST前端UI组件深入解析 typeRampBaseFontSizeFAST Components 基础字体设计令牌的声明、定位与配置深入解析 typeRampBaseFontSize FAST Components 基础字体设计令牌的声明、定位与配置 typeRampBaseFontSiz前端UI组件Wasp Actions 实战指南声明、实现与前端调用的完整教程Wasp Actions 实战指南声明、实现与前端调用的完整教程 在 Wasp 的教程体系中 第 5 节 https://link.gitcode.com/前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考