...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Versión

...

Fecha

...

Editor

...

Cambios

...

4.0.0

...

14/10/2021

...

Roberto Clemente

...

Copia de versión 3.0.0 y adaptación de versiones de desy-frontend+ tailwind y modificación de webpack

Prerequisitos

...

• node.js 12.18.0+

• Angular 11 (instalar mediante npm install -g @angular/cli@^11.0.0, o bien npm install -g @angular/cli@^11.0.0 para instalar globalmente)

Dependencias

...

Para utilizar desy-angular es necesario instalar previamente las siguientes librerías:

...

Puedes instalarlas mediante el comando npm install desy-frontend@4.1.1 @angular/cdk@^11.0.0

Instalación

...

Después de instalar las dependencias anteriores, instale desy-angular través de:

npm install desy-angular

Una vez instalado, se debe importar el módulo principal DesyAngularModule en su módulo de aplicación:

app.module.ts

import { DesyAngularModule } from 'desy-angular';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [DesyAngularModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import { DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule } from 'desy-angular';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configuración de router

Para que funcionen correctamente los componentes de navegación (DesyNavModule) es necesario activar anchorScrolling en la configuración de router.

import { Routes, RouterModule, ExtraOptions } from '@angular/router';

const routes: Routes = [ ... ];

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Configuración de tailwindcss

Desy-angular usa las clases css que nos aporta desy-frontend, haciendo uso de la librería tailwindcss. Para su correcto funcionamiento y visualización es recomendable la siguiente configuración. 

...