You need to sign in to do that
Don't have an account?
Graeme Smith 7
Notification doesn't close
I was having a go at trying to implement a custom notification according to this site: https://lightningdesignsystem.com/components/notifications/ and adding it to an aura component.
Versus the examples the first issue I had was it didnt want to save with svg tags, so I replaced those with <lightning:icon/>. The notification now displays okay but when I click the dismiss/close icon nothing is happening. There is no mention on the page of needing a custom controller or anything, but am I missing something?
My modified code is below.
Versus the examples the first issue I had was it didnt want to save with svg tags, so I replaced those with <lightning:icon/>. The notification now displays okay but when I click the dismiss/close icon nothing is happening. There is no mention on the page of needing a custom controller or anything, but am I missing something?
My modified code is below.
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId"> <div class="Breach-Notification" style="height:0rem"> <div class="slds-notification-container"> <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">Breach Imminent!</div> <section class="slds-notification" role="dialog" aria-labelledby="noti52" aria-describedby="dialog-body-id-49"> <div class="slds-notification__body" id="dialog-body-id-49"> <a class="slds-notification__target slds-media" href="javascript:void(0);"> <span class="slds-icon_container slds-icon-standard-event slds-media__figure" title="Action now!"> <lightning:icon iconName="custom:custom82" size="large" alternativeText="Action"/> </span> <div class="slds-media__body"> <h2 class="slds-text-heading_small slds-m-bottom_xx-small" id="noti52"> Breach Imminent</h2> <p>This is just a test - don't panic!</p> </div> </a> <button class="slds-button slds-button_icon slds-button_icon-container slds-notification__close" title="Dismiss Alert"> <lightning:icon iconName="utility:close" size="xx-small" alternativeText="Close"/> <span class="slds-assistive-text">Dismiss Alert</span> </button> </div> </section> </div> </div> </aura:component>
lightning:icon shows you the UI, you will have to write "onClick" function to get it working.