Nano-components NPM

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 -->
<script src="https://unpkg.com/nano-components@latest/dist/nano-components/nano-components.esm.js" type="module"></script>
<!-- ^ newer browsers -->
<script nomodule="true" src="https://unpkg.com/nano-components@latest/dist/nano-components/nano-components.js"></script>
<!-- ^ 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.

<link href="https://unpkg.com/nano-components@latest/dist/nano-components/nano-components.css" rel="stylesheet" />

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": [
  "./node_modules/nano-components"
]

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

@fortawesome/fontawesome-pro @stencil/core squirrelly

@infinitebrahmanuniverse/nolb-nan @everything-registry/sub-chunk-2244

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago