Skip to content

Latest commit

 

History

History
83 lines (59 loc) · 2.69 KB

README.md

File metadata and controls

83 lines (59 loc) · 2.69 KB

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