vue-status-indicator

    1.2.1 • Public • Published

    Status Indicator · NPMVERSION GITHUBSTARS BUILD DOWNLOADS

    A Vue component to show a status indicator as colored dots. This is a fork of status-indicator with a few changes for use it with Vue.

    Install/Usage

    # Install with npm 
    $ npm i -S vue-status-indicator
     
    # or yarn 
    $ yarn add vue-status-indicator
    <div id="app">
      <status-indicator status="active" />
    </div>

    You can use Local Registration:

    import { StatusIndicator } from 'vue-status-indicator';
    new Vue({
      el: '#app',
      components: {
        StatusIndicator,
      },
    });

    or Global Registration:

    import StatusIndicator from 'vue-status-indicator';
    Vue.use(StatusIndicator);
     
    // or with a custom component name
    import { StatusIndicator } from 'vue-status-indicator';
    Vue.component('custom-name', StatusIndicator);

    Usage in browser

    In browser you can use Unpkg, Jsdelivr, CDN.js, etc.

    # Unpkg 
    https://unpkg.com/vue-status-indicator@latest/dist/vue-status-indicator.js
     
    # JSDelivr 
    https://cdn.jsdelivr.net/npm/vue-status-indicator@latest/dist/vue-status-indicator.min.js

    Supported Browsers

    Latest versions of Chrome/Firefox/Safari/IE/Opera.

    Documentation

    Props

    Name Description Type Default Required
    status Status color for the dot String "" false
    pulse Enable or disable the pulse effect Boolean false false

    Customatization

    You are able to customize the dot by CSS variables, default configuration is listed below.

    :root {
      --status-indicator-size: 10px;
      --status-indicator-animation-duration: 2s;
     
      --status-indicator-color: rgb(216, 226, 233);
      --status-indicator-color-semi: rgba(216, 226, 233, .5);
      --status-indicator-color-transparent: rgba(216, 226, 233, 0);
     
      --status-indicator-color-active: rgb(0, 149, 255);
      --status-indicator-color-active-semi: rgba(0, 149, 255, .5);
      --status-indicator-color-active-transparent: rgba(0, 149, 255, 0);
     
      --status-indicator-color-positive: rgb(75, 210, 143);
      --status-indicator-color-positive-semi: rgba(75, 210, 143, .5);
      --status-indicator-color-positive-transparent: rgba(75, 210, 143, 0);
     
      --status-indicator-color-intermediary: rgb(255, 170, 0);
      --status-indicator-color-intermediary-semi: rgba(255, 170, 0, .5);
      --status-indicator-color-intermediary-transparent: rgba(255, 170, 0, 0);
     
      --status-indicator-color-negative: rgb(255, 77, 77);
      --status-indicator-color-negative-semi: rgba(255, 77, 77, .5);
      --status-indicator-color-negative-transparent: rgba(255, 77, 77, 0);
    }

    Community

    All feedback and suggestions are welcome!

    License

    This is a open-source software licensed under the MIT license

    Install

    npm i vue-status-indicator

    DownloadsWeekly Downloads

    986

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    41.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • coderdiaz