Neolithic Populous Metropolis

    @minna-ui/toasts

    0.16.0 • Public • Published

    NPM version NPM bundle size (minified + gzip) Licence

    @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.

    1. 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>
    1. Add an element where you want the component to show in your document <body></body>:
    <div id="minna-toasts"></div>
    1. 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.

    1. Install the package:
    yarn add @minna-ui/toasts
    1. 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.

    1. Install the package:
    yarn add @minna-ui/toasts
    1. 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.


    © 2018 We Are Genki

    Install

    npm i @minna-ui/toasts

    DownloadsWeekly Downloads

    1

    Version

    0.16.0

    License

    Apache-2.0

    Unpacked Size

    85 kB

    Total Files

    10

    Last publish

    Collaborators

    • maxmilton