cf-components-alert

"An alert web component"

Source

npm

Version: 1.0.1

Version published: 7 years ago

Weekly downloads: 3

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

cf-alert

A simple alert web component.

Usage

In an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="module" src="components/alert/cf-alert.js"></script>

    <!-- 
        Use CSS custom properties to alter styles within the component.
    -->
    <style>
        --alert-bg-default: hotpink;
    </style>
</head>
<body>
    <cf-alert>
        This is the default alert.
    </cf-alert>

    <cf-alert type="info">
        This is an info alert.
    </cf-alert>

    <cf-alert type="tip">
        This is an tip / success alert.
    </cf-alert>

    <cf-alert type="warning">
        This is an warning alert.
    </cf-alert>

    <cf-alert type="danger">
        This is an danger alert.
    </cf-alert>
</body>
</html>

With npm:

npm install cf-alert

import 'cf-alert';

Configurable styles

Each type of alert can be customized by changing the background color or the text color. Use the following custom properties for customization:

/* Default */
--alert-bg-default: #f0f4f8; /* background-color */
--alert-color-default: #334e68; /* text color */

/* Info */
--alert-bg-info: #e3f8ff;
--alert-color-info: #035388;

/* Tip / Success */
--alert-bg-tip: #effcf6;
--alert-color-tip: #014d40;

/* Warning */
--alert-bg-warning: #fffbea;
--alert-color-warning: #8d2b0b;

/* Danger */
--alert-bg-danger: #ffe3e3;
--alert-color-danger: #610316;

FAQs

What is cf-components-alert?

Is cf-components-alert popular?

Is cf-components-alert well maintained?

Package last updated on 09 Jun 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install