Applying SLDS Classes - 93

DEX601 - Unit 2 Getting Started

📄 第 93 页 🎬 视频课程

课程章节介绍

同学们,今天我们来聊聊Salesforce Lightning Design System(SLDS)中的一个非常实用的类别——SDDS。这个类别在布局和设计中非常有用,尤其是在你想要将文本或内容精确地放置在容器的中心时。 首先,SDDS和BEM(Block Element Modifier)在某些方面是不同的。BEM是一种命名约定,用于CSS类名,而SDDS是Salesforce提供的一套预定义的CSS类,用于快速实现常见的UI模式。 现在,假设你有一个容器,你想让里面的文本或内容绝对居中。在SDDS中,这非常简单。你只需要在包含文本的块级元素上添加一个类名,叫做`slds-ign_absolute-center`。这个类会自动处理所有的CSS属性,比如`position: absolute;`、`top: 50%;`、`left: 50%;`以及`transform: translate(-50%, -50%);`,这样你的内容就会完美地居中显示在容器中。 举个例子,如果你有一个`div`标签,里面有一些文本,你希望这些文本在`div`中居中,你可以这样写: ```html
这里是居中的文本
``` 这样,无论你的容器大小如何变化,文本都会保持在中心位置。这种方法既简单又高效,非常适合快速开发和维护。 希望这个解释对你们有帮助,如果还有任何疑问,随时提问哦!