IMPORTANT: The Conectate Elements are a work in progress and subject to major changes.
@conectate/components is a collection of Web Components maintained by @herberthobregon that implement Material Design.
This repo builds and publishes one single npm package:
@conectate/components
And components are imported by subpath, for example:
import "@conectate/components/ct-button"import "@conectate/components/ct-icon/ct-icon-button.js"
All components live under src/ and are exposed via subpath imports from @conectate/components.
Examples:
@conectate/components/ct-button@conectate/components/ct-dialog@conectate/components/ct-icon@conectate/components/ct-icon/icon-list.js
Install from NPM:
pnpm i @conectate/componentsImport the component's JavaScript module, use the component in your HTML, and control it with JavaScript, just like you would with a built-in element such as <button>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Example App</title>
<!-- Add support for Web Components to older browsers. -->
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- Your application must load the Roboto and Material Icons fonts. -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<body>
<!-- Use Web Components in your HTML like regular built-in elements. -->
<ct-button id="myButton" raised>Click Me!</ct-button>
<!-- The Conectate Elements use standard JavaScript modules. -->
<script type="module">
// Importing this module registers <ct-button> as an element that you
// can use in this page.
//
// ====================================================================
// Note this import is a BARE MODULE specifier, so it must be converted
// to a path using a server such as es-dev-server.
// ====================================================================
import '@conectate/components/ct-button';
// Standard DOM APIs work with Web Components just like they do for
// built-in elements.
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
alert('You clicked!');
});
</script>
</body>
</html>Serve your HTML with any server or build process that supports bare module specifier resolution (see next section):
npm install -g vite
viteThe Conectate Elements are published as standard JavaScript modules that use bare module specifiers. Bare module specifiers are not yet supported by browsers, so it is necessary to use a tool that transforms
them to a path (for example from @conectate/components/ct-button to ./node_modules/@conectate/components/dist/ct-button/ct-button.js).
If you need a specific internal module, you can deep import it as long as it exists in the published dist/ output, for example:
// for ct-button.js
import "@conectate/components/ct-button";
// Import subpath components
import "@conectate/components/ct-button/ct-button-menu.js";
import "@conectate/components/ct-icon/ct-icon-button.js";Note: deep imports are more coupled to internal file layout. Prefer
@conectate/components/<component>when possible.
pnpm install
pnpm demoBuild output is generated into dist/:
pnpm buildTwo great choices for tools that do this are:
- During local development, use open-wc's
es-dev-serverwith the--node-resolveflag. - For your production deployment, build your application with Webpack or Rollup with the
rollup-plugin-node-resolveplugin.
Most applications should include the following tags in their main HTML file to ensure that text and icons render correctly:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />The Conectate Elements default to using the Roboto font for text. This fonts are not automatically loaded, so it is the application's responsiblity to ensure that they are loaded.
