Skip to content
Node Package Web Component
TypeScript HTML
Branch: master
Clone or download
abraham Merge pull request #70 from abraham/renovate/abraham-remotedata-0.x
Update dependency @abraham/remotedata to v0.8.0
Latest commit bbf495e Aug 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
images
src Refactor state to only hold data Jul 18, 2018
test Add test for missing name error Jul 14, 2018
.appveyor.yml Initial commit from @nutmeg/cli Feb 16, 2018
.gitignore Initial commit from @nutmeg/cli Feb 16, 2018
.travis.yml Initial commit from @nutmeg/cli Feb 16, 2018
LICENSE.md Initial commit from @nutmeg/cli Feb 16, 2018
README.md
index.html
package.json Update dependency @abraham/remotedata to v0.8.0 Aug 2, 2018
renovate.json Initial commit from @nutmeg/cli Feb 16, 2018
tsconfig.json Initial commit from @nutmeg/cli Feb 16, 2018
tsconfig.production.json Initial commit from @nutmeg/cli Feb 16, 2018

README.md

<node-package>

Version Status macOS Build Status Linux Build Status Windows Build Status Dependency Status npm bundle size (minified + gzip)

Install

Polyfill tags if you need them. This will include ShadowDOM and Custom Elements support.

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/bundles/webcomponents-sd-ce.js"></script>

Loading this component. It would be a good idea to use a specific version instead of latest.

<script src="https://unpkg.com/node-package@latest/dist/node-package.min.js"></script>

Example

Live demo

Usage

Set the name attribute to the name of an NPM package.

<node-package name="lodash"></node-package>

Example

Add the global attribute to add --global to the NPM install command.

<node-package name="@angular/cli" global></node-package>

Will result in npm install @angular/cli --global.

Theming

For advanced theming you can set the following CSS custom properties:

  • --node-package-background-color
  • --node-package-color
  • --node-package-link-color

Blue theme

<style>
  node-package.blue {
    --node-package-background-color: #03A9F4;
    --node-package-color: #FAFAFA;
    --node-package-link-color: #dadce0;
  }
</style>
<node-package name="bluebird" class="blue"></node-package>

Example with blue theme

Red theme

<style>
  node-package.red {
    --node-package-background-color: #CB3837;
    --node-package-color: #FAFAFA;
    --node-package-link-color: #dadce0;
  }
</style>
<node-package name="@nutmeg/cli" class="red"></node-package>

Example with red theme

Card border

You can also apply custom edge designs to look more like a card.

<style>
  node-package.card {
    box-shadow: 0 3px 4px 1px rgba(0, 0, 0, .08), 0 1px 1px 1px rgba(0, 0, 0, .05);
    border-radius: 2px;
    border-width: 0;
  }
</style>
<node-package name="lite-server" class="card"></node-package>

Example with card border

Demo of install commands being copied.

Example of copying install command

License

NodePackage is released under an MIT license.

Built, tested, and published with Nutmeg.

You can’t perform that action at this time.