JavaScript
Instructions for how to incorporate the UKHO Design System into a generic website using JavaScript.
Contents
Installation
If your project uses plain JavaScript (or any vanilla framework) and you are able to use a package manager (npm or yarn), start by installing the package so its available in your project.
NPM
npm install @ukho/admiralty-core
or
Yarn
yarn add @ukho/admiralty-core
Using the components
Once you've installed the package, you can start using the components in your project.
Alternatively, if your project does not have the capability to use a package manager, you can include the package directly via the below CDN links instead.
Import the components by adding the Javascript and CSS bundles to the index.html. It's recommended to use jsdelivr to access the package from a CDN. To get the latest version, add the following inside the <head> element.
<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ukho/admiralty-core/styles/admiralty.bundle.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ukho/admiralty-core/themes/default.css" />
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@ukho/admiralty-core/dist/admiralty/admiralty.esm.min.js"
></script>
Now, you can use the components directly in your HTML files like so:
<admiralty-input label="What is your name?" type="text"></admiralty-input>