@lit-element-bootstrap/alert v1.0.3

@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

Methods

bs-alert

Events

bs-alert

bs-alert-dismiss

Slots

bs-alert

Theming

bs-alert

bs-alert-link

bs-alert-hr