Defining Menu Items

DEX601 - Unit 5 Implementing Navigation and Layouts

📄 第 401 页 🎬 视频课程

课程章节介绍

让我们一起来看一下这个Salesforce的Lightning组件示例。这个例子展示了一个带有图标的多项选择菜单,我们可以把它想象成一个披萨配料选择器。 首先,我们有一个``标签,这是我们的菜单按钮。它有几个属性: - `alternativeText="Select Pizza Toppings"`:这是当用户将鼠标悬停在按钮上时显示的提示文本,告诉用户这个按钮是用来选择披萨配料的。 - `onselect="{!c.onMenuSelect}"`:这是当用户选择一个菜单项时,会触发的控制器方法。你可以在这个方法里处理用户的选择。 - `iconName="utility:add"`:这是按钮上显示的图标,这里是一个加号图标,表示添加配料。 接下来,我们有几个``标签,这些是菜单项,也就是用户可以选择的披萨配料。每个菜单项都有以下属性: - `label`:这是菜单项显示的文字,比如“Tomatoes”就是“西红柿”。 - `value`:这是菜单项的值,当用户选择这个菜单项时,这个值会被传递给控制器方法。 - `checked`:这个属性决定菜单项是否默认被选中。`true`表示默认选中,`false`表示默认不选中。 - `iconName`:这是菜单项旁边显示的图标。比如“utility:favorite”是一个心形图标,表示用户喜欢的配料。 - `disabled`:这个属性决定菜单项是否可以被选择。`true`表示不可选择,`false`表示可以选择。 在这个例子中,我们有五个菜单项: 1. 西红柿(Tomatoes):默认选中,旁边有一个心形图标。 2. 洋葱(Onion):默认选中,旁边也有一个心形图标。 3. 多力多滋(Doritos):默认不选中,没有图标。 4. 水牛城鸡肉(Buffalo Chicken):默认不选中,旁边有一个点赞图标。 5. 鹿肉(Venison):默认不选中,并且不可选择。 所以,这个菜单按钮可以让用户选择他们喜欢的披萨配料,并且有一些配料是默认选中的,还有一些是不可选择的。希望这个解释能帮助你理解这个Lightning组件的用法!