Descargar design angular kit - Descargar el código fuente design angular kit

Diseño de kit angular

Lea esto en otros idiomas: ¿inglés ??.

️ Si necesita la versión anterior, el código y su documentación se pueden encontrar aquí.

¡Los comentarios y las contribuciones de toda la comunidad son más que bienvenidas! ?

Introducción

Design Angular Kit es un conjunto de componentes angulares que implementa Bootstrap Italia y los estilos en el diseño del kit de interfaz de usuario. La versión pública de la documentación de la biblioteca está disponible aquí para el último lanzamiento estable publicado, mientras que aquí para la versión de desarrollo relacionada con la rama main . Para jugar con la biblioteca, el kit Angular del patio de recreo está disponible.

Índice

Cómo usar el kit
Cómo contribuir
Cómo contribuir con el código
Enlaces útiles

Cómo usar el kit

Design Angular Kit está disponible en NPM, para instalarlo en una aplicación existente en la que para probar la biblioteca, ejecute el comando

npm install design-angular-kit --save

Elija la versión correspondiente a su versión angular:

Angular	Kit de diseño
18+	V1.1.0 +
17+	V1.0.0 +

Alternativamente, puede iniciar el comando

ng add design-angular-kit --project < projectName >

Actuará en serie:

Elección de la versión correcta a instalar
Instalación de adicción
Agregar la adicción al paquete.json
Configuración de la aplicación

Las siguientes instrucciones del párrafo, configuración , se llevarán a cabo automáticamente, a excepción de la personalización de la configuración i18n .

Configuración

Configuración de la aplicación

La librería de design-angular-kit se puede usar con los componentes estándar o con la aplicación que usa los módulos. Siga la sección de configuración que corresponde a su aplicación.

Aplicación independiente

Use la función provideDesignAngularKit en la configuración de la aplicación ApplicationConfig para poder inicializar la funcionalidad de la biblioteca.

 import { provideDesignAngularKit } from 'design-angular-kit' ;

export const appConfig : ApplicationConfig = {
  providers : [ ... provideDesignAngularKit ( ) ] ,
} ;

Aplicación modular

Es necesario importar DesignAngularKitModule dentro del formulario de aplicación principal (generalmente llamado AppModula ) utilizando el método forRoot para poder inicializar la funcionalidad de la biblioteca e importar todos los componentes .

 import { DesignAngularKitModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ... DesignAngularKitModule . forRoot ( ) ] ,
} )
export class AppModule { }

Utilice el método forChild durante la importación del módulo DesignAngularKitModule en otros módulos de aplicación para importar todos los componentes de la biblioteca.

 import { DesignAngularKitModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ... DesignAngularKitModule . forChild ( ) ] ,
  exports : [ DesignAngularKitModule ] ,
} )
export class SharedModule { }

Aplicación híbrida

Si en su aplicación existe el módulo AppModule pero desea utilizar nuestros componentes con la configuración independiente , use la función provideDesignAngularKit dentro del formulario de aplicación principal para inicializar la funcionalidad de la biblioteca.

 import { provideDesignAngularKit } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [ ] ,
  providers : [ provideDesignAngularKit ( ) ] ,
} )
export class AppModule { }

Parámetros de configuración

Tanto para la función provideDesignAngularKit y para el DesignAngularKitModule.forRoot() es posible usar una configuración inicial DesignAngularKitConfig .

 import { provideDesignAngularKit , DesignAngularKitModule , DesignAngularKitConfig } from 'design-angular-kit' ;

// Puoi aggiungere alla libreria una configurazione iniziale
const initConfig : DesignAngularKitConfig | undefined = {
  /**
   * The bootstrap-italia asset folder path
   * @default ./bootstrap-italia
   */
  assetBasePath : string | undefined ,

  /**
   * Load the <a href="https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/#fonts">bootstrap-italia fonts</a>
   * @default true
   */
  loadFont : boolean | undefined ,

  ...
} ;

provideDesignAngularKit ( initConfig )

DesignAngularKitModule . forRoot ( initConfig )

Importación de estilos de bootstrap-italy

Configure los estilos solicitados en el archivo styles.scss . Importa la biblioteca SCSS como se muestra en el siguiente ejemplo.

 // Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;

Cómo personalizar y sobrescribir las variables predeterminadas de la biblioteca (por ejemplo, colores, familia, medidas, etc.)

Bootstrap Italia hereda y extiende todas las variables predeterminadas de Bootstrap, sobrescribiendo algunos valores en la fase de compilación y la configuración nueva en la ocurre. Un ejemplo de todos es el valor de color $ primario que está representado por el color azul #006ccc en Bootstrap Italia, típico de la biblioteca.

Sin embargo, el uso de azul #0066cc debe reservarse para las administraciones centrales del estado y, por lo tanto, puede encontrarse en la condición de tener que personalizar los valores de las variables de color de Bootstrap Italia, estableciendo nuevos valores para sus necesidades.

Este color y otros tonos se generan a partir del HSB TERNA, por lo tanto, las variables H Primary-H deben cambiarse, Primary-S y Primary-B. Para tener la correspondencia entre el valor hexadecimal de color y HSB, se puede usar el portal RGB.TO, por ejemplo https://rgb.to/0066cc.

A continuación se muestra un ejemplo de archivos styles.scss con la personalización de colores. Las personalizaciones de las variables siempre deben realizarse antes de importar el archivo bootstrap-italia.scss

 // modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS

// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
$primary-h : 0 ;
$primary-s : 80 ;
$primary-b : 100 ;

// Per l'override della famiglia di caratteri
$font-family-serif : ' Custom Font ' , Georgia , serif ;
$font-family-sans-serif : ' Custom Font ' , Arial , Helvetica , sans-serif ;
$font-family-monospace : ' Custom Font ' , ' Courier New ' , Courier , monospace ;

// Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;

Soporte de icono y activos

Para agregar soporte de icono/activos, cambie su angular.json agregando:

{
 "assets" : [
    ...
    {
      "glob" : " **/* " ,
      "input" : " ./node_modules/bootstrap-italia/ " ,
      "output" : " /bootstrap-italia/ "
    }
  ]
}

Soporte I18N (ubicación)

La librería NGX-Translate de EE. UU. Para agregar las localizaciones I18N.

Modifique su angular.json agregando:

{
  "assets" : [
    ...
    {
      "glob" : " **/* " ,
      "input" : " ./node_modules/design-angular-kit/assets/i18n " ,
      "output" : " /bootstrap-italia/i18n/ "
    }
  ]
}

Puede usar las etiquetas localizadas de la biblioteca design-angular-kit en su aplicación, por ejemplo {{'it.errors.required-field' | translate}} . Ver nuestras etiquetas

Ubicación existente

Si ya usa los archivos de ubicación en su aplicación, puede usar la librería NGX-Translate-Multi-HTTP-Loder para cargar tanto los archivos de ubicación de la aplicación como los de la biblioteca de design-angular-kit

Uso de la función provideDesignAngularKit :

 import { HttpBackend } from '@angular/common/http' ;
import { TranslateLoader } from '@ngx-translate/core' ;
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader' ;
import { provideDesignAngularKit } from 'design-angular-kit' ;

provideDesignAngularKit ( {
  translateLoader : ( itPrefix : string , itSuffix : string ) => ( {
    provide : TranslateLoader ,
    useFactory : ( http : HttpBackend ) =>
      new MultiTranslateHttpLoader ( http , [
        { prefix : itPrefix , suffix : itSuffix } , // Load library translations first, so you can edit the keys in your localization file
        { prefix : './assets/i18n/' } , // Your i18n location
      ] ) ,
    deps : [ HttpBackend ] ,
  } ) ,
} ) ;

Usando el módulo DesignAngularKitModule :

 import { HttpBackend } from '@angular/common/http' ;
import { TranslateLoader } from '@ngx-translate/core' ;
import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader' ;
import { DesignAngularKitModule } from 'design-angular-kit' ;

DesignAngularKitModule . forRoot ( {
  translateLoader : ( itPrefix : string , itSuffix : string ) => ( {
    provide : TranslateLoader ,
    useFactory : ( http : HttpBackend ) =>
      new MultiTranslateHttpLoader ( http , [
        { prefix : itPrefix , suffix : itSuffix } , // Load library translations first, so you can edit the keys in your localization file
        { prefix : './assets/i18n/' } , // Your i18n location
      ] ) ,
    deps : [ HttpBackend ] ,
  } ) ,
} ) ;

Personalización de la ubicación

Si desea personalizar nuestras etiquetas:

No incluya el soporte i18n en su angular.json
- Cree sus archivos de ubicación personalizados en sus assets/bootstrap-italia/i18n/ (cree la ruta si no existe) Carpeta
- JSON debe tener este formato.
- Agregue el translateLoader personalizado a la configuración inicial de la biblioteca, reemplazando el atributo de assets/bootstrap-italia/i18n/ itPrefix
O agregue las localizaciones en sus archivos JSON, sobrescribiendo las claves JSON a la biblioteca.

Usar

Utilizando el módulo DesignAngularKitModule , todos los componentes de la biblioteca se importarán a la aplicación.

Alternativamente, dado que todos nuestros componentes y directivas son independientes , solo puede importar los componentes/módulos que necesita, p. Alerta, paginación y broadcrumb.

 import { ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule } from 'design-angular-kit' ;

@ NgModule ( {
  imports : [
    ItAlertComponent ,
    ItPaginationComponent ,
    ItBreadcrumbsModule , // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent
  ] ,
} )
export class YourAppModule { }

 import { ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule } from 'design-angular-kit' ;

@ Component ( {
  selector : 'app-product' ,
  standalone : true ,
  imports : [ ItAlertComponent , ItPaginationComponent , ItBreadcrumbsModule ] ,
  templateUrl : './product.component.html' ,
} )
export class ProductComponent { }

¿Cómo contribuir?

? Es posible contribuir a la biblioteca de varias maneras:

Con su código, tomando un problema entre los abiertos y no se asignan entre el tema del kit Angular (un comentario sobre el tema también es suficiente para notificar a la voluntad de hacerse cargo).
A través del informe de errores o mejoras al repositorio oficial del kit angular.
Escribir en el canal Slack dedicado.

Cómo contribuir con el código

¿Le gustaría ayudar en el kit de diseño de angular? ¡Estás en el lugar correcto!

Si aún no lo ha hecho, comience pasando unos minutos para profundizar su conocimiento sobre las pautas de diseño para los servicios web de PA, y consulte las indicaciones sobre cómo contribuir al diseño del kit angular.

Establecer el entorno local

Los requisitos mínimos de su entorno local deben ser:

NodeJS (> = 20)

En este punto, es necesario establecer su entorno local para la compilación del archivo fuente y la generación de la documentación:

Clon el proyecto

 git clone https://github.com/italia/design-angular-kit.git

En la carpeta del proyecto, instale adicciones

 npm i

Iniciar la aplicación localmente

 npm run start

Para realizar las pruebas de unidades, ejecute el comando

 npm run test

Establezca el entorno local con DevContainer

Los requisitos mínimos de su entorno local para trabajar con DevContainer deben ser:

Código de Visual Studio
Estibador
git

Inicie el código de Visual Studio e instale la extensión de contenedores Dev de Microsoft (MS-VScode-Remote.Remo-Concainers).

En este punto, es necesario establecer Seguir los siguientes pasos:

Clon el proyecto

 git clone https://github.com/italia/design-angular-kit.git

Abra la carpeta del proyecto con el código Visual Studio
En la carga, Visual Studio Code reconocerá los regalos de la configuración de un DevCContainer. Abra el proyecto con el DevContainer. Más información aquí.
Visual Studio Code llevará a cabo la configuración del contenedor, instalará la versión correcta de NodeJS, NPM y las extensiones de la idea. Las adicciones al proyecto se instalarán en el proceso de creación del contenedor. El entorno suizo estará listo para la configuración completada.
Iniciar la aplicación localmente

 npm run start

Para realizar las pruebas de unidades, ejecute el comando

 npm run test

Enlaces útiles

Kit angular del patio de recreo
Vista previa de Vercel (actualizado a cada comité)

De la comunidad

Video Commit University: Desarrolle desde cero una aplicación web angular para el PA (diapositiva)
Video Meetup Angular Roma: Angular, Bootstrap Italia y más allá.