Check with your designers to help you design this section
Check with your designers to help you design this section
Basic inline info alert
Basic inline warning alert
Basic inline success alert
Basic inline error alert
<p class="alert alert-info">
Basic inline info alert
</p>
<p class="alert alert-warning">
Basic inline warning alert
</p>
<p class="alert alert-success">
Basic inline success alert
</p>
<p class="alert alert-error">
Basic inline error alert
</p>This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content. This is the same as how bootstrap 4 alerts work.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>
This example text is going to run a bit longer so that you can see how spacing within an alert
works with this kind of content. This is the same as how bootstrap 4 alerts work.
</p>
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</div>We implement XSS sanitization for dynamic / javascript alerts. We utilize a whitelist of tag and attribute combinations to determine what we allow inside of the content. Alerts need to be flexible enough to accomodate various products needs. However, there are certain precautions that need to be taken. If this list is too restrictive, we can expand on it as we integrate among teams.
Content should be appended after this text
<div id="dynamic-alert-container">
<p>Content should be appended after this text</p>
</div>
<button
class="btn btn-default"
type="button"
data-alert-toggle
data-alert-class="my-additional-class another-cool-class"
data-alert-message="
<h2>This is a title</h2>;
<p class='mb-0'>Dynamic alert example using data attributes</p>;
"
data-alert-target="#dynamic-alert-container"
data-alert-type="info"
>
Create Persistent Info Alert
</button>
<button
class="btn btn-default"
type="button"
data-alert-toggle
data-alert-class="my-class another-class"
data-alert-message="
<h2>Self-Destruct</h2>;
<p class='mb-0'>This will self destruct in 3 seconds</p>
"
data-alert-target="#dynamic-alert-container"
data-alert-type="warning"
data-alert-ttl="3000"
>
Create Warning Alert with a TTL
</button>
Alert javascript usage is pretty straight forward: create an instance of Alert
with desired options, then call #add method. You can also decide to pass in
a selector to the #add method, which will override the location where your alert
will be appended to.
| Option | Expected | Default | Description |
|---|---|---|---|
class
|
string
|
''
|
Add additional classes to alert container, separated by a space |
message
|
string
|
''
|
Message can be a simple string, or markup that follows some restrictoins. We use a whitelins of tags and attributes as below: |
target
|
string
Should represent DOM selector |
'body'
|
The target should be a valid selector where the alert will be
appended. If not supplied in the options you will need to add it
when calling Please note that if multiple results are found for the target, the first found element will be used. |
type
|
string
Valid options:
|
'info'
|
Type determines the Alert style that will be added. |
ttl
|
number
Represents time in milliseconds |
null
|
Alert will remove itself after specified time in this option |
| Method | Syntax | Parameters | Description |
|---|---|---|---|
<constructor>
|
new RAUL.Alert(options)
|
Optional options object (described above)
|
Creates a new alert instance. |
.template
|
RAUL.Alert.template(templateOptions)
|
Object representing template options: {classes = '', message, type}.
|
|
#add
|
alert.add([target])
|
Optional target selector as a string.
|
Adds alert to it's target, whether supplied in the options during instantiation, or supplied to this method as an override. |
#remove
|
alert.remove()
|
N/A |
Detaches alert from the dom. |
<fn> = contructor method
.fn = class (static) method
#fn = instance method
|
|||
// Basic usage:
const alert = new RAUL.Alert({
class: 'my-additional-classes here',
message: 'My alert from a JS',
target: '#my-location',
type: 'error',
ttl: 3000,
})
alert.add()
alert.remove()
// Specifying location after creation:
const alert2 = new RAUL.Alert({
class: 'my-additional-classes here',
message: 'My alert from a JS #2',
type: 'error',
})
alert2.add('#my-other-location')
setTimeOut(() => alert2.add('#my-third-location'), 3000)