Options
All
  • Public
  • Public/Protected
  • All
Menu

shieldsio-elements

shieldsio-elements

View this project on NPM NPM Version Issues Count License Type Definitions

Custom HTML Elements and helpers for Shields.io Badges.

Shield IO Badges

All Shield.io badges have the following attributes:

  • label: the left-hand-side text if overwritten; otherwise null.
  • logo: the logo to use.
  • color: the color of the right-hand-side background.
  • logocolor: the color of the logo.
  • labelcolor: the color of the left-hand-side background.
  • logowidth: the horizontal space for the logo.
  • badgestyle: the style of the badge. Can be:
    • plastic
    • flat
    • flat-square
    • for-the-badge
    • social

shieldio-badge element

Used to show a static badge.

In addition to the common attributes, the static also supports:

  • message the right-hand-side text.
<shieldio-badge label="Label" message="message" color="green"></shieldio-badge>

Static Example

shieldio-badge-dynamic element

Used to show a dynamic badge.

In addition to the common attributes, the dynamic also supports:

  • dataurl: the URL of the data to base the badge on.
  • dataquery: the query for the dynamic content.
  • prefix: the text to prefix the dynamic content.
  • suffix: the text to suffix the dynamic content.
  • datatype: the type of data to process. Can be:
    • xml
    • json
    • yaml
<shieldio-badge-dynamic datatype="xml" dataurl="https://raw.githubusercontent.com/PH16-Productions/tv.ph16.paperplugin/main/pom.xml" label="Java Version" dataquery="//*[local-name() = 'java.version']"></shieldio-badge-dynamic>

Dynamic Example

Other Badges

simpleicon-badge element

Shows a badge for a simple icon.

Supports the following attributes:

  • logo: the simple icon logo to display.
  • badgestyle: the style of the badge. Can be:
    • plastic
    • flat
    • flat-square
    • for-the-badge
    • social
<simpleicon-badge logo="GitHub"></simpleicon-badge>

Simple Example

Generated using TypeDoc