Using <lightning-button-group>

DEX602 - Unit 4 Implementing Navigation and Layouts

📄 第 291 页 🎬 视频课程

课程章节介绍

同学们,今天我们来聊聊如何在Salesforce的Lightning组件中使用``来创建一个按钮组。这个按钮组会放在我们之前提到的`certifiedStudentList`组件的右上角,里面会有三个按钮:电子邮件、发送证书和删除。 首先,我们来看一下这三个按钮的功能: 1. ,电子邮件,按钮暂时不会做任何事情,但稍后我们会添加一个提示,告诉用户这个功能目前不可用。 2. ,发送证书,按钮也是一样,暂时没有功能,稍后会有提示说明。 3. ,删除,按钮则会实际执行操作,删除证书持有记录。 在之前我们构建闪电垂直导航时,我们为整个菜单分配了一个控制器操作。但这次有点不同。对于``,我们不会在容器级别分配控制器,而是为每个按钮单独分配控制器操作。 虽然我们可以为每个按钮提供不同的控制器功能,但通常我们会像在这个例子中一样,为多个按钮分配相同的控制器操作,并通过按钮的某些属性来区分是哪个按钮被点击了。这里我们不会使用按钮的标签来区分,因为标签可能会根据用户的需求变化。 特别要注意的是,不要使用常规的`id`属性来标识按钮。因为在模板渲染时,`id`值可能会被转换为全局唯一值。相反,我们可以使用元素的`class`属性或者`data-*`属性,比如`data-id`。在这个例子中,我们使用了一个名为`data-btn-id`的属性。 在幻灯片中,为了简洁,我们用了`btn1`、`btn2`、`btn3`作为`data-btn-id`的值,但在实际代码中,我们会使用更有意义的名称。 最后,我建议大家熟悉一下`Data-*`属性,以及如何通过`DataSets`属性来访问它们。这里有一个链接,大家可以参考:[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset)。 好了,这就是今天的内容。希望大家能够理解并应用到实际的项目中去。如果有任何问题,随时提问!