前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载typeRampMinus1LineHeight是microsoft/fast-componentsFAST Frame 设计系统导出的一个排版类设计令牌Design Token用于定义排版坡道Type Ramp中Minus 1级别即比正文字体小一档的辅助文字的行高。本文基于当前仓库中的 API 文档与设计令牌文档系统讲解该变量的类型签名、在完整排版坡道中的位置、底层 Design Token 工作机制以及在实际组件样式与运行时的使用方法帮助你掌握如何在 FAST 设计系统中声明、覆盖和消费行高类设计令牌。typeRampMinus1LineHeight 是什么根据仓库中的 API 文档 fast-components.typerampminus1lineheight.mdtypeRampMinus1LineHeight是microsoft/fast-components模块公开导出的一个变量variable其完整类型签名如下typeRampMinus1LineHeight: import(microsoft/fast-foundation).CSSDesignTokenstring从签名可以解读出三层信息所属模块该变量由microsoft/fast-components导出即 FAST Frame 设计系统的组件与样式包它的类型引用自microsoft/fast-foundation说明底层实现由 FAST Foundation 的 Design Token 基础架构提供。令牌类型它是一个CSSDesignTokenstring。CSSDesignToken是 FAST Foundation 中会向 CSS 自定义属性Custom Property发射值的设计令牌类型其泛型参数string表示该令牌的值类型为字符串——行高在 CSS 中通常以px、rem、em或无单位数字等形式出现以字符串承载。命名语义typeRamp表示它隶属于 FAST Frame 的排版坡道令牌族Minus1表示它对应坡道上比 Base正文小一档的层级LineHeight表示它管理的是行高而非字号字号由同名姊妹令牌typeRampMinus1FontSize管理见 fast-components.typerampminus1fontsize.md。排版坡道中的位置Minus 1 级别FAST Frame 的排版设计围绕一条排版坡道Type Ramp展开坡道上的每一级都由一对令牌组成字号Font Size与行高Line Height。typeRampMinus1LineHeight是坡道上Minus 1比正文小一档级别的行高令牌。仓库中的设计系统文档 fast-frame.md 给出了 FAST Frame 完整的排版坡道令牌命名表级别字号令牌名Font Size行高令牌名Line HeightMinus 2最小typeRampMinus2FontSizetypeRampMinus2LineHeightMinus 1typeRampMinus1FontSizetypeRampMinus1LineHeightBase正文typeRampBaseFontSizetypeRampBaseLineHeightPlus 1typeRampPlus1FontSizetypeRampPlus1LineHeightPlus 2typeRampPlus2FontSizetypeRampPlus2LineHeightPlus 3typeRampPlus3FontSizetypeRampPlus3LineHeightPlus 4typeRampPlus4FontSizetypeRampPlus4LineHeightPlus 5typeRampPlus5FontSizetypeRampPlus5LineHeightPlus 6最大typeRampPlus6FontSizetypeRampPlus6LineHeight在 FAST 组件的 API 参考清单fast-components.md中这 18 个排版令牌全部作为独立的导出变量列示typeRampMinus1LineHeight与typeRampMinus1FontSize相邻成对出现印证了字号 行高成对构成一级排版的设计约定。从语义上看Minus 1 级别通常用于正文之下的辅助性文字——例如表单的辅助说明、次要标签、脚注、时间戳等小字号文本。此时typeRampMinus1LineHeight负责为该级别的文字提供与之匹配的行高保证小字号文本在多行场景下仍具备舒适的阅读行距。说明本文所引用的 1.x API 文档由 API Documenter 自动生成原文并未给出typeRampMinus1LineHeight的默认行高数值。具体默认值由 FAST Frame 的令牌定义与对应的组件样式消费逻辑决定应用层可通过下文介绍的 Design Token API 获取或覆盖。CSSDesignToken 底层的设计令牌机制要真正理解typeRampMinus1LineHeight的行为需要回到 FAST Foundation 的 Design Token 实现。仓库中的 design-tokens.md 对该机制做了完整说明Design Token 是一种语义化、具名的变量用来描述设计系统如排版、颜色、尺寸、间距等中的设计概念。CSSDesignTokenstring本质上是 FAST Foundation 中具备CSS 自定义属性发射能力的设计令牌按节点设置作用域令牌的值针对某个FASTElement或HTMLBodyElement节点设置因此同一令牌可以在不同的 DOM 子树中拥有不同的值实现局部覆盖。自动发射 CSS 变量默认情况下只要为某个元素设置了令牌值令牌就会自动以 CSS 自定义属性的形式发射到该元素除非创建时显式配置为不发射。typeRampMinus1LineHeight对应发射的 CSS 自定义属性名称即为--type-ramp-minus-1-line-height形式的变量可直接在组件样式外层使用。默认值发射令牌的默认值需要DesignToken.registerRoot()或通过DesignSystem.register()自动触发后才会向文档或指定的根元素发射为 CSS 自定义属性。设置、获取与删除值设计令牌的常规取值 API 如下以typeRampMinus1LineHeight为例// 为某个元素或其 DOM 子树设置行高令牌值 typeRampMinus1LineHeight.setValueFor(element, 24px); // 读取某元素实际生效的令牌值取最近祖先的设置值 const lineHeight typeRampMinus1LineHeight.getValueFor(element); // 删除某节点上的显式设置回退到最近祖先的值 typeRampMinus1LineHeight.deleteValueFor(element);如果希望在不做任何覆盖时所有未设置该令牌的节点都能拿到一个兜底值可以调用withDefault()声明默认值typeRampMinus1LineHeight.withDefault(20px);订阅变化DesignToken支持订阅当令牌值在文档树中发生变化时订阅者会收到通知。既可以订阅整个文档范围内的变化也可以只订阅某个具体元素的变化const subscriber { handleChange(record) { console.log(DesignToken ${record.token} changed for element ${record.target}); } }; // 订阅任意元素上的变化 typeRampMinus1LineHeight.subscribe(subscriber); // 只订阅某个特定元素上的变化 typeRampMinus1LineHeight.subscribe(subscriber, targetElement); // 取消订阅 typeRampMinus1LineHeight.unsubscribe(subscriber); typeRampMinus1LineHeight.unsubscribe(subscriber, targetElement);这一机制使得基于typeRampMinus1LineHeight的组件能够在应用层调整行高后自动获得样式更新通知而无需组件手动监听。派生值与别名typeRampMinus1LineHeight作为标准设计令牌同样支持两类高级用法派生值可以为令牌设置一个接收目标元素作为参数的函数返回值类型必须匹配令牌的泛型此处为string。派生函数内部可以读取其他令牌形成依赖关系当被依赖的令牌或可观察属性变化时派生值会自动重算并更新对应的 CSS 自定义属性。别名Aliasing可以将一个令牌的值直接设置为另一个令牌从而在令牌之间建立引用关系适合在复杂的设计令牌层级中复用行高定义。在组件样式中消费行高令牌在 FAST 组件中typeRampMinus1LineHeight可以像普通值一样直接嵌入css模板字符串FAST 会在运行时把它替换为对应的 CSS 自定义属性并确保该自定义属性被添加到元素上import { css } from microsoft/fast-element; import { typeRampMinus1FontSize, typeRampMinus1LineHeight } from microsoft/fast-components; const styles css .caption { font-size: ${typeRampMinus1FontSize}; line-height: ${typeRampMinus1LineHeight}; } ;这样定义的样式会自动消费当前 DOM 树中对该令牌设置的值无论是 FAST Frame 的默认值还是应用层通过setValueFor()/withDefault()覆盖后的值实现行高与字号在Minus 1层级上的协同。结合 fast-frame.md 中关于样式配置的说明FAST Frame 允许通过 Design Token 对组件进行大幅度视觉定制而几乎不修改代码——修改typeRampMinus1LineHeight这类令牌即可整体调整所有消费它的组件文本的行距。典型应用场景在实际项目中typeRampMinus1LineHeight通常与typeRampMinus1FontSize搭配使用服务于正文以下一档的 UI 文本常见场景包括表单字段下方的辅助说明文字、校验提示列表项中的次要元信息时间戳、作者、来源脚注、角标、标签Tag等小字号文本需要满足多行换行且行距一致的紧凑型信息区块。当应用需要全局收紧或放宽这一层级的行距时只需在入口处对令牌做一次withDefault()或setValueFor()覆盖所有消费该令牌的组件样式会自动同步。小结typeRampMinus1LineHeight是 FAST Frame 排版坡道中Minus 1层级的行高设计令牌其类型签名CSSDesignTokenstring明确了值类型为字符串、可发射 CSS 自定义属性的特性。本文结合仓库中的 API 参考、排版坡道令牌表 与 Design Token 完整文档梳理了它的定位、底层机制与消费方式。继续阅读同一目录下的其他排版令牌文档如typeRampBaseLineHeight、typeRampPlus1LineHeight等可以构建出对 FAST Frame 排版体系更完整的认识。赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐FAST Components 排版设计令牌 typeRampMinus1FontSize 详解字体缩放斜坡Type Ramp体系与动态字号控制FAST Components 排版设计令牌 typeRampMinus1FontSize 详解字体缩放斜坡Type Ramp体系与动态字号控制 type前端UI组件Wasp Actions 实战指南声明、实现与前端调用的完整教程Wasp Actions 实战指南声明、实现与前端调用的完整教程 在 Wasp 的教程体系中 第 5 节 https://link.gitcode.com/前端UI组件深入解析 typeRampBaseFontSizeFAST Components 基础字体设计令牌的声明、定位与配置深入解析 typeRampBaseFontSize FAST Components 基础字体设计令牌的声明、定位与配置 typeRampBaseFontSiz前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考