@lit-element-bootstrap/alert

An implementation of Bootstrap v4.3.1 alert components in LitElement.

Live demo

Go to live demo

Installation

Install via npm:

npm install @lit-element-bootstrap/alert

Install via yarn:

yarn add @lit-element-bootstrap/alert

Install via unpkg:

https://unpkg.com/@lit-element-bootstrap/alert@latest/unpkg/index.bundled.js

Import

import all modules:

import '@lit-element-bootstrap/alert';

import specific module (preferred):

import '@lit-element-bootstrap/alert/bs-alert.js';

import specific class:

// import specific class from all modules
import { BsAlert } from '@lit-element-bootstrap/alert';

// import specific class
import { BsAlert } from '@lit-element-bootstrap/alert/bs-alert.js';

Examples

Plain alert

<bs-alert context="success">
    <p>A simple primary alert—check it out!</p>
</bs-alert>

Dismissable alert

<bs-alert context="warning" dismissable>
    <p>A simple primary alert—check it out!</p>
    <bs-alert-dismiss slot="dismiss"></bs-alert-dismiss>
</bs-alert>

Additional content alert

<bs-alert context="primary" dismissable>
    <h4 slot="heading">Well done!</h4>
    <div>
        Aww yeah, you successfully read this important alert message. 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.
        <bs-alert-hr context="primary"></bs-alert-hr>
        <p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>
    <bs-alert-dismiss slot="dismiss"></bs-alert-dismiss>
</bs-alert>

Components

Tag	Class
<bs-alert>	BsAlert
<bs-alert-link>	BsAlertLink
<bs-alert-hr>	BsAlertHr
<bs-alert-dismiss>	BsAlertDismiss

Methods

bs-alert

Method	Returns	Description
dismiss()	Promise	Dismisses the alert, but it is not removed from the DOM. It is left up to the parent element to either catch the closed.bs.alert event or await on the Promise and then to manually call remove()

Events

bs-alert

Event	Description
close.bs.alert	Fired in the beginning of alert dismissal
closed.bs.alert	Fired in the end of alert dismissal (will wait for CSS transition to complete)

bs-alert-dismiss

Event	Description
close.button.click	Fired when the close button has been clicked

Slots

bs-alert

Name	Description
slot="heading"	Place alert header content
slot="dismiss"	Place content that displays a close button

Theming

bs-alert

Property	Default value	Description
--alert-color	user agent	Set the alert text color
--alert-bg-color	user agent	Set the alert background color
--alert-bd-color	user agent	Set the alert border color
--alert-primary-color	#004085	Set the primary context text color
--alert-primary-bg-color	#cce5ff	Set the primary context background color
--alert-primary-bd-color	#b8daff	Set the primary context border color
--alert-secondary-color	#383d41	Set the secondary context text color
--alert-secondary-bg-color	#e2e3e5	Set the secondary context background color
--alert-secondary-bd-color	#d6d8db	Set the secondary context border color
--alert-success-color	#155724	Set the success context text color
--alert-success-bg-color	#d4edda	Set the success context background color
--alert-success-bd-color	#c3e6cb	Set the success context border color
--alert-info-color	#0c5460	Set the info context text color
--alert-info-bg-color	#d1ecf1	Set the info context background color
--alert-info-bd-color	#bee5eb	Set the info context border color
--alert-warning-color	#856404	Set the warning context text color
--alert-warning-bg-color	#fff3cd	Set the warning context background color
--alert-warning-bd-color	#ffeeba	Set the warning context border color
--alert-danger-color	#721c24	Set the danger context border color
--alert-danger-bg-color	#f8d7da	Set the danger context background color
--alert-danger-bd-color	#f5c6cb	Set the danger context border color
--alert-light-color	#818182	Set the light context text color
--alert-light-bg-color	#fefefe	Set the light context background color
--alert-light-bd-color	#fdfdfe	Set the light context border color
--alert-dark-color	#1b1e21	Set the dark context text color
--alert-dark-bg-color	#d6d8d9	Set the dark context background color
--alert-dark-bd-color	#c6c8ca	Set the dark context border color

bs-alert-link

Property	Default value	Description
--alert-link-color	#007bff	Set the alert link color
--alert-link-font-weight	700	Set the alert link text font weight
--alert-link-text-decoration	none	Set the alert link text decoration
--alert-link-bg-color	transparent	Set the alert link background color
--alert-link-hover-color	#0056b3	Set the alert link hover text color
--alert-link-hover-text-decoration	underline	Set the alert link hover text decoration
--alert-link-primary-color	#002752	Set the alert link primary context text color
--alert-link-secondary-color	#202326	Set the alert link secondary context text color
--alert-link-success-color	#0b2e13	Set the alert link success context text color
--alert-link-info-color	#062c33	Set the alert link info context text color
--alert-link-warning-color	#533f03	Set the alert link warning context text color
--alert-link-danger-color	#491217	Set the alert link danger context text color
--alert-link-light-color	#686868	Set the alert link light context text color
--alert-link-dark-color	#040505	Set the alert link dark context text color

bs-alert-hr

Property	Default value	Description
--alert-hr-bd-top-color	rgba(0, 0, 0, 0.1)	Set the horizontal line top border color
--alert-hr-primary-bd-top-color	#9fcdff	Set the horizontal line context primary top border color
--alert-hr-secondary-bd-top-color	#c8cbcf	Set the horizontal line context secondary top border color
--alert-hr-success-bd-top-color	#b1dfbb	Set the horizontal line context success top border color
--alert-hr-info-bd-top-color	#abdde5	Set the horizontal line context info top border color
--alert-hr-warning-bd-top-color	#ffe8a1	Set the horizontal line context warning top border color
--alert-hr-danger-bd-top-color	#f1b0b7	Set the horizontal line context danger top border color
--alert-hr-light-bd-top-color	#ececf6	Set the horizontal line context light top border color
--alert-hr-dark-bd-top-color	#b9bbbe	Set the horizontal line context dark top border color