状态指示器 (status-indicator)
A Vue.js component to show status indicator as colored dots. This is a fork of status-indicator with a few changes for use with Vue.js.
一个Vue.js组件,用于将状态指示器显示为彩色圆点。 这是状态指示器的分支,与Vue.js一起使用时进行了一些更改。
安装 (Install)
npm i vue-status-indicator
用法 (Usage)
Import status-indicator.css in your CSS or JavaScript.
在CSS或JavaScript中导入status-indicator.css。
CSS:
CSS:
@import 'vue-status-indicator'
JavaScript:
JavaScript:
import 'vue-status-indicator/styles.css'
Import component status-indicator
.
导入组件status-indicator
。
import StatusIndicator from 'vue-status-indicator'
HTML/Vue:
HTML / Vue:
<template>
<status-indicator active pulse></status-indicator>
</template>
<script>
import StatusIndicator from 'vue-status-indicator'
export default {
components: {
StatusIndicator
}
}
</script>
API (API)
<status-indicator active|positive|intermediary|negative pulse></status-indicator>
You are able to customize the dot by CSS variables, default configuration is listed below.
您可以通过CSS变量自定义点,默认配置如下所示。
: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);
}
发展历程 (Development)
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
翻译自: https://vuejsexamples.com/a-vue-js-component-to-show-status-indicator-as-colored-dots/