Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/singleware/ui-alert
UI alert package.
https://github.com/singleware/ui-alert
alert browser custom-element javascript jsx shadow-dom singleware typescript ui-alert
Last synced: 4 days ago
JSON representation
UI alert package.
- Host: GitHub
- URL: https://github.com/singleware/ui-alert
- Owner: Singleware
- License: mit
- Created: 2018-10-03T13:56:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T04:45:13.000Z (over 1 year ago)
- Last Synced: 2024-11-08T07:44:27.784Z (7 days ago)
- Topics: alert, browser, custom-element, javascript, jsx, shadow-dom, singleware, typescript, ui-alert
- Language: JavaScript
- Size: 187 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI-Alert
Custom HTML element used to wrap a simple alert, composed by the slots: icon, message and hide.
[See demo](//singleware.github.io/ui-alert/)
## Usage
Instantiate the component that initializes the custom element.
```tsx
import * as JSX from '@singleware/jsx';
import * as Alert from '@singleware/ui-alert';
const component = (
👋
This is an alert example initialized by the component wrapper.
) as Alert.Element;
```
Show and Hide programmatically.
```tsx
component.show();
component.hide();
```
Be informed about the hide action.
```tsx
component.addEventListener('hide', (event: Event) => console.log(`Yes! It's hidden now.`));
```
## Help
### Attributes
| Name | Description |
| ----------- | ------------------------------------------------------------------------------------------ |
| concealable | Assigned when the alert can be hidden by the user (requires an element in the `hide` slot) |
| open | Automatically assigned when the alert is shown and removed when hidden |
### Properties
| Name | Type | Description |
| ----------- | ------ | ------------------------------------------------------------------- |
| icon | `any` | Get and set the alert icon (requires an element in the `icon` slot) |
| message | `any` | Get and set the alert message |
| concealable | `bool` | Get and set the alert `conceal` state |
| open | `bool` | Get and set the `open` state |
### Methods
| Name | Description |
| ---- | --------------------------------------------------- |
| show | Shows the alert setting the `open` state as `true` |
| hide | Hides the alert setting the `open` state as `false` |
### Slots
| Name | Description |
| ------- | ------------------------------------------------------- |
| icon | Element to shows the alert icon (can be omitted) |
| message | Element to shows the alert message |
| hide | Element to shows the alert hide button (can be omitted) |
### Events
| Name | Description |
| ---- | ---------------------------------------- |
| hide | Dispatched when the alert becomes hidden |
### Styles
| Name | Description |
| --------------------------------- | ----------------------------------------------------- |
| --swe-alert-text-color | Determines the alert text color |
| --swe-alert-background-color | Determines the alert background color |
| --swe-alert-border-radius | Determines the alert border radius |
| --swe-alert-border-size | Determines the alert border size |
| --swe-alert-border-color | Determines the alert border color |
| --swe-alert-icon-margin-top | Determines the top margin of the alert icon |
| --swe-alert-icon-margin-right | Determines the right margin of the alert icon |
| --swe-alert-icon-margin-bottom | Determines the bottom margin of the alert icon |
| --swe-alert-icon-margin-left | Determines the left margin of the alert icon |
| --swe-alert-icon-margin | Determines all margins of the alert icon |
| --swe-alert-message-margin-top | Determines the top margin of the alert message |
| --swe-alert-message-margin-right | Determines the right margin of the alert message |
| --swe-alert-message-margin-bottom | Determines the bottom margin of the alert message |
| --swe-alert-message-margin-left | Determines the left margin of the alert message |
| --swe-alert-message-margin | Determines all margins of the alert message |
| --swe-alert-hide-margin-top | Determines the top margin of the alert hide button |
| --swe-alert-hide-margin-right | Determines the right margin of the alert hide button |
| --swe-alert-hide-margin-bottom | Determines the bottom margin of the alert hide button |
| --swe-alert-hide-margin-left | Determines the left margin of the alert hide button |
| --swe-alert-hide-margin | Determines all margins of the alert hide button |
| --swe-alert-hide-cross-color | Determines the cross color of the alert hide button |
| --swe-alert-hide-cross-size | Determines the cross size of the alert hide button |
> These variables above are useful to customize the closed shadow DOM.
## Install
Using npm:
```sh
npm i @singleware/ui-alert
```
## License
[MIT © Silas B. Domingos](https://balmante.eti.br)