Mettle Custom Elements
A Suite of custom elements and services to be used on a front-end JavaScript application.
These are built under the Web Components spec. These tags can be dropped into any front end application like html. You can use this package in addition to your own or with other custom element packages.
Goals
- [x] Use native JS for little to no dependency
- [x] Cross browser support
- [x] Flexible for CSS
- [x] Unit tested
Project Installation
$ npm install @johnsonandjohnson/mettle-components --saveTo include the components to your code
import '@johnsonandjohnson/mettle-components'Quick Sample
<html>
<head>
<title>Mettle Component Example</title>
</head>
<body>
<span id="id-44629472-5691-4c53-b7f0-c5488854761b">
Hover or tap me for tip
</span>
<mettle-tool-tip
data-for="id-44629472-5691-4c53-b7f0-c5488854761b">
<p>Slot HTML/Text</p>
</mettle-tool-tip>
<script type="module" src="https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/index.js"></script>
</body>
</html>To include services to your code
import {
HtmlMarker,
HttpFetch,
I18n,
Observable,
Roles,
Router
} from '@johnsonandjohnson/mettle-components/services'Quick Sample
<html>
<head>
<title>Mettle Services Example</title>
</head>
<body>
<div id="render"></div>
<script type="module">
import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/services.js'
(async () => {
const htmlMarker = new HtmlMarker()
const htmlString = '<button disabled="${disabled}">Random Disabled</button>'
const div = document.querySelector('#render')
let model = {
disabled: 'disabled'
}
await htmlMarker.render(div, htmlString, model)
window.setInterval(() => {
model.disabled = (Math.random() >= 0.5) ? 'disabled' : ''
htmlMarker.updateModel(model)
}, 1000)
})()
</script>
</body>
</html>Changelog
Review our latest changes and updates
Contributing
Contributions are welcomed!
- Please read our Contribution guidelines to learn more about the process.
- Please read and follow our Code of Conduct.