Nano-Components
What is this?
A continually evolving suite of web-components specifically tailored to the requirements of all Nanopore Digital web applications.
This site showcases the components in isolation as well as providing documentation. Every component has a 'Canvas' as a showcase, 'Docs' for documenation and some have additional 'Notes'.
How do I use it?
All the scripts, styles and assets are distributed as an npm package.
They're best used as traditional <script> tags loaded within the <head></head> of your app.
With these files included, all examples in this site should work out-of-the-box.
<!-- include both --><!-- ^ newer browsers --><!-- ^ older browsers -->Additionally you can optionally include a base css file - this will include all Nanopore base styling for fonts and typography. In the future, other theming css files will also become available.
What about typscript?
You can include the typings for these components in your project:
$ npm install nano-components --save-dev
OR
$ yarn add nano-components --dev
Then add them to your app's tsconfig.json file:
"typeRoots": How do I contribute?
git@git.oxfordnanolabs.local:Digital/nano-components.git
$ npm install
OR
$ yarn install
$ npm run
See package.json for the full list of scripts.
All components are written using StencilJs and documented using StorybookJs