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

Package Sidebar

Install

npm i vue-status-indicator

Weekly Downloads

1,803

Version

1.2.1

License

MIT

Unpacked Size

41.6 kB

Total Files

8

Last publish

Collaborators

  • coderdiaz