Applying SLDS Classes - 86

DEX602 - Unit 2 Introducing Lightning Web Components

📄 第 86 页 🎬 视频课程

课程章节介绍

同学们,今天我们来聊聊Salesforce Lightning Design System,也就是我们常说的SLDS。这是一个非常强大的工具,它帮助我们创建既美观又符合Salesforce风格的界面。 首先,我们来看一个简单的HTML按钮,使用原生的``标签。这个按钮虽然功能上没问题,但它的外观可能并不吸引人,也不符合Salesforce的设计标准。这时候,SLDS就派上用场了。 当我们使用``这个组件时,按钮不仅功能齐全,还会自动应用SLDS的样式,这样按钮看起来就更加专业和吸引人了。而且,如果我们把多个按钮放在一个按钮组里,它们会以一种非常整洁和有序的方式排列,这样用户界面看起来就更加统一和协调。 接下来,我们来看一个具体的例子。假设我们想要在页面上居中显示一段文本。在传统的BEM(Block Element Modifier)方法中,我们可能需要写一些复杂的CSS代码来实现这一点。但在SLDS中,我们只需要给包含文本的块级元素添加一个简单的类名`slds-ign_absolute-center`,文本就会自动居中显示。这种方法不仅简单,而且非常直观,大大提高了我们的开发效率。 总之,SLDS提供了一系列的类和组件,帮助我们快速构建出既美观又符合Salesforce设计标准的用户界面。通过使用这些工具,我们可以更专注于业务逻辑的实现,而不是花费大量时间在样式的调整上。希望今天的讲解对你们有所帮助,下次再见!