Requirement:
Multiple rows with close option should be displayed. On click on close icon beside a specific row it should be cleared. There is a need to give index for the icon if you use lightning:icon you cannot assign dynamic id as aura:id won't support dynamic value.
To achieve the above requirement it should be a html button/ html icon. To should the svg icon without using lighting:icon following approach will be helpful.
Reusable Lighting Component for svg icon -
Usage for the above component -
Note:
Go to LightingDesignSystem Website > Icons > save as the icon in IE browser (It should be saved in svg format). You can open the file in note pad and copy the pathd.
Multiple rows with close option should be displayed. On click on close icon beside a specific row it should be cleared. There is a need to give index for the icon if you use lightning:icon you cannot assign dynamic id as aura:id won't support dynamic value.
To achieve the above requirement it should be a html button/ html icon. To should the svg icon without using lighting:icon following approach will be helpful.
Reusable Lighting Component for svg icon -
Usage for the above component -
Note:
Go to LightingDesignSystem Website > Icons > save as the icon in IE browser (It should be saved in svg format). You can open the file in note pad and copy the pathd.
No comments:
Post a comment