For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.
Important note Alert markup is not hard coded, instead its built on the fly when the trigger button is clicked. To make this happen, you will need to build your own script to trigger these alerts. You can see how we put everything together below, in our structure section.
The recommended way to fire off an alert is to generate the markup with JS, and not place a hardcoded
<pearson-alert> tag in the document.
First we'll create a button element that triggers the alert script.
In this example we'll use the following attributes on the button to pass information to the alert script:
id- This should be passed into the
returnNodeattribute on the alert markup.
data-level- This should be passed into the
levelattribute on the alert markup.
data-animated- (optional) If added, this should be passed as a bool attribute of
animatedto the alert markup.
Next we will build out the script that generates the alert.
We start the script by querying the button that triggers the alert.
Next, we create a couple of functions that build the alert, and render it when the trigger is clicked.
Finally, well add an event listener to the trigger to fire off the alert when the trigger is clicked.
Last but not least, add the script to your document.
Important note: To view the full script we used in these demos you can view it on GitHub.
All these attributes are required.
An alert whose level is
global will appear in the top-left of the current page; an alert whose level is
inline will appear in flow.
|String||unset||The position of the alert. Permitted values: |
|String||unset||Unique ID of the element that will receive focus after the alert is dismissed.|
|String||unset||Denotes the type of the alert. Permitted values: |
All these attributes are optional.
|Boolean||Denotes whether the alert will appear and disappear with animations.|
<pearson-alert> only emits one event: dismiss. Once an alert is dismissed, it is removed from the DOM.
|Will fire when the user interacts with the close button.|
Do you want to use your own JS to make the alert function? No problem, use the markup below along with CSS to build an alert with your own JS.
Important note: Refer to the UXF guidelines for the suggested functionality of the alert.