npm 包 trowel-badges 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，很多时候我们需要显示一些状态信息，如测试覆盖率、构建状态、版本等等。trowel-badges 是一款可以生成这些状态徽章的 npm 包，可以方便地集成到我们的项目中。

安装

安装 trowel-badges，可以使用 npm：

npm i --save-dev trowel-badges

使用

在开发环境中，我们可以使用如下代码来生成徽章：

import TrowelBadge from 'trowel-badges';

const successBadge = new TrowelBadge('success', 'test', 'passing');
const infoBadge = new TrowelBadge('info', 'version', 'v2.0.0');

console.log(successBadge.toString());
console.log(infoBadge.toString());

在生产环境中，我们可以使用如下代码来生成徽章的 SVG 图片：

import TrowelBadge from 'trowel-badges';

const successBadge = new TrowelBadge('success', 'test', 'passing');
const infoBadge = new TrowelBadge('info', 'version', 'v2.0.0');

console.log(successBadge.toSvg());
console.log(infoBadge.toSvg());

生成的徽章如下所示：

参数说明

trowel-badges 的构造函数接收三个参数：

new TrowelBadge(theme: string, title: string, value: string);

其中：

theme：徽章的主题，有 success、warning、info、error 四种可选项。
title：徽章的标题。
value：徽章的值。

另外，trowel-badges 还支持链式调用，我们可以使用如下代码来设置徽章的链接：

const successBadge = new TrowelBadge('success', 'test', 'passing');
successBadge.setLink('https://example.com');
console.log(successBadge.toSvg());

高级使用

trowel-badges 还提供了一些高级选项，可以进一步定制徽章的样式。我们可以使用如下代码来生成一个自定义样式的徽章：

-- -------------------- ---- -------
----- ----------- - --- --------------------- -------- -----------
  ------------------- ------ ---- ------- -- --
  ------------------
    ----------------------------- -
      ---------------- -------
      ------------- --
    --
    ---------------------- -
      ------ -------
      ----------- -------
    --
    ---------------------- -
      ------ -------
    --
  ---

---------------------------------

生成的徽章如下所示：

总结

trowel-badges 是一款功能强大的 npm 包，可以帮助我们快速生成徽章，并且支持高度的定制化，可以广泛应用于前端开发中。本文对 trowel-badges 的基本使用、参数说明以及高级用法进行了介绍，相信读者已经掌握了使用 trowel-badges 的方法，希望本文对大家有所帮助。

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