lightning-spinner for a Section

DEX602 - Unit 6 Working with Data

📄 第 403 页 🎬 视频课程

课程章节介绍

今天我们来聊聊如何在Salesforce的Lightning组件中实现一个闪电旋转器(Spinner)。这个旋转器通常用于在数据加载时显示一个加载动画,给用户一个视觉反馈。 首先,我们不会在练习中直接使用区域(Region)的闪电旋转器,因为那样会影响到整个页面的布局。相反,我们可以通过使用相对定位(Relative Positioning)来构建一个仅位于你个人Lightning卡上方的旋转器。这样做的好处是,旋转器只会出现在你指定的卡片上方,而不会影响到页面的其他部分。 具体怎么做呢?你可以通过CSS来设置旋转器的位置。首先,你需要给旋转器一个相对定位的父容器,然后在这个父容器内部,使用绝对定位(Absolute Positioning)来放置旋转器。这样,旋转器就会相对于父容器的位置进行定位,而不会影响到其他元素。 举个例子,假设你有一个Lightning卡,你可以在这个卡片的CSS样式中设置`position: relative;`,然后在旋转器的CSS样式中设置`position: absolute;`,并调整`top`和`left`属性来精确控制旋转器的位置。 这样,当数据加载时,旋转器就会出现在你指定的卡片上方,给用户一个清晰的加载提示,而不会干扰到页面的其他部分。 希望这个解释对你有帮助!如果你有任何问题,随时问我。