Skip to content
master
Switch branches/tags
Code
This branch is 53 commits ahead of tnhu:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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