左侧是原始代码示例,我们定义并使用了 primary-color css 自定义属性。右侧的样式钩子定义和用法完全相同。使用样式钩子时,该实现不会发生变化。
这种方法和效果相同,但设计处理方式更流畅、更有条理。当使用样式钩子成为习惯后,设计更新就变得轻而易举了。
在应用程序级别,样式钩子会为您处理颜色分配,因此开发人员可以专注于有趣的事情。无需再手动调整每个元素。现在,您可以为按钮的背景颜色等设置应用正确的样式钩子,并且所有内容都会一次性更新。此外,如果您正在使用 Salesforce 的标准组件或设计系统蓝图,SLDS 类会自动应用正确的系统样式。
让我们来解析一下样式钩子背后的魔力:
命名空间- 始终为“slds” - 告诉我们该钩子属于 Salesforce Lightning 设计系统。
范围,标记为“g”(代表全局),表示这些钩子可以影响整个应用程序。颜色和字 越南 whatsapp 号码数据 体等类别有助于按视觉设计领域组织样式。
属性是指比例、系列或重量等特定样式方面,可帮助您微调排版。
角色和状态增加了精确度并指示了诸如强调色或禁用按钮等属性。
样式钩子的语法图。
样式钩子的语法和类别。
类别构成了样式钩子的基础,允许您使用预定义的比例来控制视觉设计元素,例如颜色、字体、半径、阴影、间距和大小。这种标准化使设计更加一致且更易于实现。您无需为每个元素重新设计轮子,而是可以依靠这些经过验证的组件来保持整个应用的统一外观。
用于颜色、间距和半径的造型钩子。
样式钩子类别中的一些差异。
以下是一些样式钩子的示例:
现在我们已经掌握了语法,让我们来探索一个设计用例:为销售排行榜构建自定义 Salesforce 组件。