Web Component Installation
The following options will give you access to the entire web component library. If you would like a specific version or release, please visit our NPM page to see whats available and follow the NPM / UNPKG instructions to download / link to a specific version.
Important note: If you would like to download and install individual components, please visit our CDN and NPM links section.
#
CDN<script src="https://unpkg.com/@pearson-ux/pearson-web-components"></script>
#
NPMnpm i @pearson-ux/pearson-web-components --save
#
DependanciesThere are two components, including the full build that require moment.js.
Important note: You do not need these dependancies for CSS or other standalone web components that were NOT mentioned above.
#
CDN<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script>
#
NPMnpm i moment-with-locales-es6 --savenpm i moment-range --save
#
PolyfillsTo make web components cross-browser compatible down to IE11 you will need the three following polyfills:
- Web component loader
- Custom elements es5 adapter
- Polyfill.io
#
CDN<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script><script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2Ces7"></script>
#
NPMImportant note: If you're installing polyfill.io from NPM, there is some additional information that may help you.
npm i webcomponents-loader --savenpm i custom-elements-es5-adapter --savenpm install polyfill-library --save
#
Example<head> <title>Your Application</title> <!-- CSS --> <link rel="stylesheet" href="https://pearsonux.sfo2.cdn.digitaloceanspaces.com/css/gravity.css" /> <!-- load tippy --> <script src="https://unpkg.com/tippy.js@4"></script> <!-- Moment JS dependancy - needed for datepicker, timepicker, and the full build --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/4.0.2/moment-range.js"></script> <!-- IE Polyfills --> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/custom-elements-es5-adapter.js"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2Ces7"></script> <!-- Load all the components --> <script src="https://unpkg.com/@pearson-ux/pearson-web-components"></script></head><body> <main id="main"> <!-- place your app markup here --> </main></body>