# dile-toast

> **This package has moved** and is now available at [@dile/dile-toast](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained.

Latest version **1.4.1** (published 2020-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install dile-toast
pnpm add dile-toast
yarn add dile-toast
bun add dile-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2020-07-07 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Miguel Angel Alvarez |
| Maintainers | midesweb |

## Links

- npm: https://www.npmjs.com/package/dile-toast
- Repository: https://github.com/Polydile/dile-toast
- Homepage: https://github.com/Polydile/dile-toast#readme
- Issues: https://github.com/Polydile/dile-toast/issues
- npm.io page: https://npm.io/package/dile-toast

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0

## Recent versions

- 1.4.1 (latest) — 2020-07-07
- 1.4.0 — 2020-02-19
- 1.3.0 — 2019-10-13
- 1.2.0 — 2019-10-07
- 1.1.0 — 2019-09-18
- 1.0.6 — 2019-07-16
- 1.0.5 — 2019-07-06
- 1.0.4 — 2019-07-06
- 1.0.3 — 2019-06-06
- 1.0.2 — 2019-06-06
- 1.0.1 — 2019-06-06
- 1.0.0 — 2019-06-05

## README

# Moved

**This package has moved** and is now available at [@dile/dile-toast](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained.

# dile-toast

This is a Web Component to send feedback to the user, inspired on the Material Design "toast" component, based on LitElement.

```
<dile-toast id="myToast" duration="5000"></dile-toast>
```

Let's [go to DEMO page](https://dile-toast.polydile.com/)! 

## Properties

- **duration**: number of microseconds the toast will be visible on the page.
- **messages**: Array of message objects. You will not use usually this property directly to create feedback messages, instead of that is preferable to use the open () method to create the message object in the expected way for the component.

## Methods

### open(text, status)

To use this component and show feedback messages to the user, simpy call the open() method of the component. There are two arguments accepted:

- **text**: The message you wish to send.
- **status**: The status of the message: 'success', 'error' or 'neutral'. This is an optional argument, default value is 'neutral'.

```
let toastElement = document.getElementById('myToast');
toastElement.open('This is a success toast!!', 'success');
```

## Style customization

The background color of the toast depends on the status of the message. You can customize it using the CSS custom properties bellow.

Custom property | Description | Default
----------------|-------------|---------
--dile-toast-success-color | Success background color | #27ae60
--dile-toast-error-color | Error background color | #e74c3c
--dile-toast-neutral-color | Neutral background color | #303030
--dile-toast-text-color | Text color | #fff
--dile-toast-width | With of the toast element | 280px
--dile-toast-padding | Padding for the toasts | 10px 15px
--dile-toast-z-index | z-index for the toasts | 1001
--dile-toast-font-weight | Messages font weight | normal
--dile-toast-font-size | Messages font size | 1em
--dile-toast-border-radius | Border radius | 0

---
_Source: https://npm.io/package/dile-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._