IMPORTANT : Sixponents elements is a project made to carry out an internship for the company Metaenlace.
Web components to work with the Cita Clinica API project.
| Component | Description |
|---|---|
sx-button-dynamic |
Botón de acción |
sx-custom-finput |
label + input |
sx-custom-select |
Trabajar con array en el select |
sx-custom-textarea |
Conteo de texto en el un textarea |
sx-button-modal |
Botón para abrir modal |
sx-theme-selector |
Selector moderno |
IMPORTANTE : It's called sixcomponents because they usually call me Six, and because they are my components too and I will only create six components.
Install a component (sx-button-dynamic for example) from NPM:
npm install @sixponents/sx-button-dynamicImport the component's JS module, use the component in your HTML, and control it with JS, just like you would with a built-in element such as a div
<!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. -->
<sx-button id="myButton" raised>Click Me!</sx-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 '@sixponents/sx-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, for example for angular :
ng server -o