The Alert control provides brief messages to users, indicating different severity levels. These messages can include icons and colors to convey the importance and context of the information.
/* Basic */
new ac.notifications.Alert(
{
content: "Your profiles has been disabled."
},
"#cntlDefaultBasic"
);
/* Information */
new ac.notifications.Alert(
{
content: "Your profile is missing details.",
severity: "Info"
},
"#cntlDefaultInfo"
);
/* Success */
new ac.notifications.Alert(
{
content: "Your payment has been submitted.",
severity: "Success"
},
"#cntlDefaultSuccess"
);
/* Warning */
new ac.notifications.Alert(
{
content: "Please validate you entry before submitting.",
severity: "Warning"
},
"#cntlDefaultWarning"
);
/* Error */
new ac.notifications.Alert(
{
content: "That did not go as plan!",
severity: "Error"
},
"#cntlDefaultError"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Basic</label>
<div class="col-lg-8">
<div id="cntlDefaultBasic"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Information</label>
<div class="col-lg-8">
<div id="cntlDefaultInfo"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Success</label>
<div class="col-lg-8">
<div id="cntlDefaultSuccess"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Warning</label>
<div class="col-lg-8">
<div id="cntlDefaultWarning"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Error</label>
<div class="col-lg-8">
<div id="cntlDefaultError"></div>
</div>
</div>
</div>/* Basic */
new ac.notifications.Alert(
{
content: "Your profiles has been disabled.",
variant: "Outlined",
showCloseIcon: true
},
"#cntlFilledBasic"
);
/* Information */
new ac.notifications.Alert(
{
content: "Your profile is missing details.",
severity: "Info",
variant: "Outlined",
showCloseIcon: true
},
"#cntlFilledInfo"
);
/* Success */
new ac.notifications.Alert(
{
content: "Your payment has been submitted.",
severity: "Success",
variant: "Outlined",
showCloseIcon: true
},
"#cntlFilledSuccess"
);
/* Warning */
new ac.notifications.Alert(
{
content: "Please validate you entry before submitting.",
severity: "Warning",
variant: "Outlined",
showCloseIcon: true
},
"#cntlFilledWarning"
);
/* Error */
new ac.notifications.Alert(
{
content: "That did not go as plan!",
severity: "Error",
variant: "Outlined",
showCloseIcon: true
},
"#cntlFilledError"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Basic</label>
<div class="col-lg-8">
<div id="cntlOutlinedBasic"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Information</label>
<div class="col-lg-8">
<div id="cntlOutlinedInfo"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Success</label>
<div class="col-lg-8">
<div id="cntlOutlinedSuccess"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Warning</label>
<div class="col-lg-8">
<div id="cntlOutlinedWarning"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Error</label>
<div class="col-lg-8">
<div id="cntlOutlinedError"></div>
</div>
</div>
</div>/* Basic */
new ac.notifications.Alert(
{
content: "Your profiles has been disabled.",
variant: "Filled",
showCloseIcon: true
},
"#cntlFilledBasic"
);
/* Information */
new ac.notifications.Alert(
{
content: "Your profile is missing details.",
severity: "Info",
variant: "Filled",
showCloseIcon: true
},
"#cntlFilledInfo"
);
/* Success */
new ac.notifications.Alert(
{
content: "Your payment has been submitted.",
severity: "Success",
variant: "Filled",
showCloseIcon: true
},
"#cntlFilledSuccess"
);
/* Warning */
new ac.notifications.Alert(
{
content: "Please validate you entry before submitting.",
severity: "Warning",
variant: "Filled",
showCloseIcon: true
},
"#cntlFilledWarning"
);
/* Error */
new ac.notifications.Alert(
{
content: "That did not go as plan!",
severity: "Error",
variant: "Filled",
showCloseIcon: true
},
"#cntlFilledError"
);<div class="form-horizontal form-bordered">
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Basic</label>
<div class="col-lg-8">
<div id="cntlFilledBasic"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Information</label>
<div class="col-lg-8">
<div id="cntlFilledInfo"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Success</label>
<div class="col-lg-8">
<div id="cntlFilledSuccess"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Warning</label>
<div class="col-lg-8">
<div id="cntlFilledWarning"></div>
</div>
</div>
<div class="form-group row">
<label class="form-label col-form-label col-lg-4">Error</label>
<div class="col-lg-8">
<div id="cntlFilledError"></div>
</div>
</div>
</div>