cf-components-alert

"An alert web component"

latest

Source

npm

Version: 1.0.4

Version published: 7 years ago

Maintainers: 1

Created: 5 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="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 a tip / success alert.
    </cf-alert>

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

    <cf-alert type="danger">
        This is a 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 well maintained?

Package last updated on 06 Oct 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