npm 包 status-indicator 使用教程

在前端开发中，我们经常需要给用户展示某种状态，例如正在加载、成功、失败等。这时候，一个好看且易于定制的状态指示器是非常有用的。而 npm 包 status-indicator 就提供了这样一个指示器。

安装

使用 npm 安装：

npm install status-indicator

使用方法

基本用法

const status = require('status-indicator');

console.log(status.ok('Ready to Go!'));
// Output: ✔ Ready to Go!

可以看到，status-indicator 的 API 非常简洁，只需传入一个字符串，就能生成对应的状态指示器。

自定义样式

const status = require('status-indicator');

console.log(status({
  label: 'Custom',
  color: 'yellow',
  size: 'large',
}));
// Output: Yellow ● Custom

可以看到，在传入一个对象时，可以自定义样式。其中，label 是状态指示器的文本内容，color 是背景色，size 是指示器的大小。

多个指示器

Status-indicator 也可以生成多个状态指示器。

const status = require('status-indicator');

console.log(status.multi([
  {label: 'Loading', spinner: true},
  {label: 'Waiting', color: 'blue'},
  {label: 'Finished', color: 'green'},
]));

可以看到，multi 方法接受一个数组，在数组中定义多个状态指示器。

结语

本文介绍了 npm 包 status-indicator 的基本用法和自定义样式，以及生成多个指示器的方法。status-indicator 简单易用，对于一些简单的状态展示场景非常合适。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dda7a