Package Exports

@minna-ui/toasts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@minna-ui/toasts) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@minna-ui/toasts`

A simple "toast" notification web component. It can be used standalone, in Svelte projects, or any JavaScript project.

NOTE: This package is unfinished.

TODO: Write note about @minna-ui/css interplay/dependency.

TODO: Example image.

TODO: Add link to demo and documentation page.

Usage

Standalone

The easiest way to use the component is to add the CDN hosted version directly in your HTML.

TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

Add the CSS and JS to your document, inside the <head></head>:

<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toasts/dist/index.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/@minna-ui/toasts"></script>

Or use a specific version:

<link href="https://cdn.jsdelivr.net/npm/@minna-ui/toasts@0.0.0/dist/index.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/@minna-ui@0.0.0/toasts"></script>

Add an element where you want the component to show in your document <body></body>:

<div id="minna-toasts"></div>

Initialise the component:

<script>
  new MinnaToasts({
    target: document.querySelector('#minna-toasts'),
    data: {},
  });
</script>

Svelte projects

Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

Install the package:

yarn add @minna-ui/toasts

Add to your Svelte component:

MySvelteComponent.html:

<MinnaToasts/>

<script>
  import MinnaToasts from '@minna-ui/toasts';

  export default {
    components: {
      MinnaToasts,
    },
  };
</script>

Other JavaScript projects

This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

Install the package:

yarn add @minna-ui/toasts

Add to your files:

my-example.html:

<div id="minna-toasts"></div>

my-example.js:

import MinnaToasts from '@minna-ui/toasts';

new MinnaToasts({
  target: document.querySelector('#minna-toasts'),
  data: {},
});

Licence

@minna-ui/toasts is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.