Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Primeros pasos
Desarrolladores
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.
<link rel="stylesheet" href="dnt-ui.css" />
<script type="module">
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.
<link rel="stylesheet" href="dnt-ui.css" />
<script type="module" src="dnt-ui.esm.js"></script>
<script nomodule="" src="dnt-ui.js"></script>
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:
Uso de la librería de componentes según los lenguajes de programación más estandarizados:
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>
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
