Desarrolladores

La librería de componentes del Sistema de Diseño DINTEL es una librería de Web Components.

Los Web Components no son una tecnología única, sino que se constituyen en base a una serie de estándares para navegadores definidos por el consorcio W3C que permiten crear etiquetas propias de forma nativa, dotándolos de su propio marcado, funcionalidad y/o estilo utilizando HTML, CSS y JavaScript.

Las APIs nativas de navegadores y Web Components estandarizados, facilitan la implementación y el uso de los componentes DINTEL en cualquier framework o en ninguno.

Implementación sin framework

Integrar los componentes en un proyecto sin framework JavaScript es muy sencillo. Si estamos trabajando en una página HTML simple, podemos empezar a utilizar los componentes inmediatamente añadiendo estas etiquetas a las cabeceras del documento HTML, en la etiqueta <head>.

En este ejemplo se muestra la manera de consumir la librería de DINTEL descargando los componentes en tiempo de ejecución.

import { defineCustomElements } from 'custom-elements/index.js'

defineCustomElements(window)

</script>

En este segundo ejemplo de código, la carga de los módulos de la librería de DINTEL se realiza de forma dinámica en tiempo de ejecución optimizando el tiempo de carga de la pantalla.

Una vez incluidos, los componentes pueden utilizarse en el marcado como cualquier otro elemento HTML normal

<dnt-input label="Nombre" placeholder="Introduce tu nombre"></dnt-input>

<dnt-button type="primary">Enviar</dnt-button>

Implementación con framework

La librería del Sistema de Diseño DINTEL se puede solicitar a través de nuestro:

Buzón de contacto

Uso de la librería de componentes según los lenguajes de programación más estandarizados:

Si realizas la integración con framework debes realizar la instalación de la librería mediante un gestor de paquetes en tu proyecto

Antes de poder utilizar los componentes en Angular, debes importar y añadir el CUSTOM_ELEMENTS_SCHEMA de Angular. Esto permite el uso de Web Components en marcado HTML, sin que el compilador produzca errores. El CUSTOM_ELEMENTS_SCHEMA necesita ser incluido en cualquier módulo que utilice elementos personalizados. Generalmente lo añadiremos a AppModule:

// ...

// Importamos custom elements schema

import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({

// ...

// Añadimos custom elements schema a NgModule

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})

export class AppModule { }

El paso final es cargar y registrar los componentes de DINTEL en el navegador. @dintel/dnt-ui incluye una función principal que se encarga de esto. Esa función se llama defineCustomElements() y necesita ser llamada una vez al arrancar la aplicación. Un lugar conveniente para hacer esto es en main.ts:

// Importamos los componentes

import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";

// ...

// Registramos los componentes

defineCustomElements(window);

Una vez importados, los componentes se pueden utilizar en su marcado HTML básico:

<dnt-button type="primary">Enviar</dnt-button>

Para incorporar la hoja de estilos e integrarla en el proyecto será necesario incluir la siguiente línea:

@import '../node_modules/@dintel/dnt-ui/dist/dnt-ui/dnt-ui.css';

Para integrar @dintel/dnt-ui en una aplicación Vue.js, edita src/main.js para incluir:

// Importamos los componentes

import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";

// ...

// Configuramos Vue.js para ignorar los Web Components

Vue.config.ignoredElements = [/dnt-\w*/];

// Registramos los componentes

defineCustomElements(window);

new Vue({

render: h => h(App)

}).$mount("#app");

Una vez importados, los componentes se pueden utilizar en su marcado HTML básico:

<dnt-button type="primary">Enviar</dnt-button>

Para integrar @dintel/dnt-ui en una aplicación React, edita src/index.js para incluir:

// Importamos los componentes

import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";

// ...

// Registramos los componentes

defineCustomElements(window);

ReactDOM.render(<App />, document.getElementById("root"));

Una vez importados, los componentes se pueden utilizar en su marcado HTML básico:

<dnt-button type="primary">Enviar</dnt-button>