Prerrequisitos
...
node.js 1216.1817.01+
Angular 1115 (instalar mediante npm install -g @angular/cli@^11cli@^15.0.0, o bien npm install -g @angular/cli@^11cli@^15.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-html@6html@7.21.1 0 @angular/cdk@^11cdk@^15.01.05
Instalación
...
| Info |
|---|
Si vas a crear un proyecto desde 0, puedes tomar el proyecto desy-angular-starter como punto de partida. Este proyecto viene con desy-angular configurado y listo para utilizarse. Puedes encontrarlo aquí: https://bitbucket.org/sdaragon/desy-angular-starter/ |
...
| Expand |
|---|
| title | Instalación de un modulo específico |
|---|
|
Si no se va a usar todos módulos de desy-angular, se puede instalar solo lo necesario de esta forma: app.module.ts| Code Block |
|---|
| 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.
| Expand |
|---|
| title | app-routing.module.ts |
|---|
|
| Code Block |
|---|
| 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 { } |
(ver https://angular.io/api/router/ExtraOptions#anchorScrolling ) |
Configuración de tailwindcss
Desy-angular usa las clases css que nos aporta desy-html, haciendo uso de la librería tailwindcss. Para su correcto funcionamiento y visualización es recomendable la siguiente configuración.
| Expand |
|---|
| title | Pasos de la configuración para versiones de angular compatibles con la versión 1115.21.05 |
|---|
|
Creamos el fichero tailwind.config.js mediante npx tailwindcss init y lo modificamos para utilizar la configuración de desy-html. tailwind.config.js| Code Block |
|---|
| module.exports = {
/*presets: Use[
the Desy default config */
presets: [require('desy-html/config/tailwind.config.js')],
/* contenido a purgear*/],
content: [
'./node_modules/desy-angular/**/*.{js,mjs,ts}',
'./src/**/*.{html',
'./src/**/*.tsts,css,js}'
]
}; |
Configuración de postcss Instalamos como dependencia de desarrollo postcss-loader | Code Block |
|---|
| npm install postcss-loader --save-dev |
Creamos el fichero postcss.config.js en la carpeta raíz del proyecto: postcss.config.js| Code Block |
|---|
| module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
} |
Por ultimo, importaremos en nuestro styles.css los estilos de tippy y desy-html e importamos la fuente Open Sans en nuestro index.html styles.css| Code Block |
|---|
| @import 'tippy.js/dist/tippy.css';
@import 'desy-html/src/css/styles.css'; |
index.html| Code Block |
|---|
| <!doctype html>
<html lang="es">
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body>
...
</body>
</html> |
|
...