SuperAPI AI 工具集

content-density

设计与创作

查看项目

更新于 10-16 03:38

技能介绍

用途:这是 SAP Fundamental Styles 中关于内容密度(Content Density)的技能指南,用于在 cozy、compact、condensed 三种模式间选择,并把密度应用到整个应用或特定区域,以适配触屏与鼠标键盘设备。

主要能力:cozy 为默认模式,触控区 2.75 rem(44 px),适合触屏与宽松布局;compact 触控区 2 rem(32 px),字号不变但组件与间距更小,适合桌面、数据密集界面;condensed 进一步缩小尺寸与字距,适合小屏与多列表格,组件不支持时会回退到 compact。

使用方式:密度通过类名设置,应用级加在 body 或 html 上,如 <body class="is-compact">;区域级可加在容器上,如 <div class="fd-toolbar is-compact">。密度会从父元素继承,可用不同类覆盖,例如在 compact 中加 is-cozy。部分组件另有 --compact 修饰符,但建议优先用全局 .is-compact 保持一致。

适用场景:触屏设备用 cozy;桌面鼠标键盘用 compact;多列表格等极限密度场景用 condensed。混合设备可提供切换。

限制:不要在同一层级混用不同密度;condensed 可能降低可读性,需充分测试;compact 可能不满足触控目标最小值,condensed 不建议用于触屏或运动障碍用户;cozy 满足 WCAG 2.1 触控目标要求。