nano-components
v1.0.85-beta
Published
A collection of Oxford Nanopore corporate / digital webcomponents
Downloads
5,284
Readme
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?
[email protected]: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