在前端开发中，我们经常需要给用户展示某种状态，例如正在加载、成功、失败等。这时候，一个好看且易于定制的状态指示器是非常有用的。而 npm 包 status-indicator 就提供了这样一个指示器。
安装
使用 npm 安装：
--- ------- ----------------
使用方法
基本用法
----- ------ - ---------------------------- ---------------------------- -- ------- -- ------- - ----- -- ---
可以看到，status-indicator 的 API 非常简洁，只需传入一个字符串，就能生成对应的状态指示器。
自定义样式
----- ------ - ---------------------------- -------------------- ------ --------- ------ --------- ----- -------- ---- -- ------- ------ - ------
可以看到，在传入一个对象时，可以自定义样式。其中，label 是状态指示器的文本内容，color 是背景色，size 是指示器的大小。
多个指示器
Status-indicator 也可以生成多个状态指示器。
----- ------ - ---------------------------- -------------------------- ------- ---------- -------- ------ ------- ---------- ------ -------- ------- ----------- ------ --------- ----
可以看到，multi 方法接受一个数组，在数组中定义多个状态指示器。
结语
本文介绍了 npm 包 status-indicator 的基本用法和自定义样式，以及生成多个指示器的方法。status-indicator 简单易用，对于一些简单的状态展示场景非常合适。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055feb81e8991b448dda7a