u1ui / alert.el

Prominent hints, alerts, and facts

<u1-alert> - element

Prominent hints, alerts, and facts

Features

• Various variants for Success, Warn, Error, and Info alerts.
• Dismissable alerts allow user to close them.
• Support for icons within alerts.
• Customizable actions through buttons in the alert.

Usage

<u1-alert open variant="info" dismissible icon="home">
    This is a dismissible success alert with an icon, and a lot of text to make it wrap. More text to make it wrap and just more and more
    <button slot=action>OK</button>
    <button slot=action>Cancel</button>
</u1-alert>

u1-alert {
    border-width: 0 0 0 3px;
}
u1-alert::part(close) {
    opacity:0.3;
}
u1-alert::part(icon) {
    font-size:2em;
}

API

Attributes

• variant: Determines the type of the alert (success, warn, error, info).
• dismissible: Allows the alert to be closed by the user.
• icon: Adds an icon to the alert, if not set, the icon will be determined by the variant.
• open: Determines if the alert is visible or not.

Slots

• action: Buttons that will be placed at the bottom of the alert.

CSS

--color: The color of the alert, if not set, it will be determined by the variant. ::part(close): The close button. ::part(icon): The icon.

Install

<link href="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/alert.min.css" rel=stylesheet>
<script src="https://cdn.jsdelivr.net/gh/u1ui/[email protected]/alert.min.js" type=module></script>

Demos

minimal.html
test.html

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥