Download design angular kit - design angular kit do download do código -fonte

Projeto de kit angular

Leia isso em outros idiomas: inglês ??.

️ Se você precisar da versão antiga, o código e sua documentação podem ser encontrados aqui.

Comentários e contribuições de toda a comunidade são mais do que bem -vindos! ?

Introdução

O Kit Angular de Design é um conjunto de componentes angulares que implementa o Bootstrap Italia e os estilos no design do kit da interface do usuário. A versão pública da documentação da biblioteca está disponível aqui para o último lançamento estável publicado, enquanto aqui para a versão de desenvolvimento relacionada ao ramo main . Para brincar com a biblioteca, o kit angular do playground está disponível.

Índice

Como usar o kit
Como contribuir
Como contribuir com o código
Links úteis

Como usar o kit

O Kit Angular de Design está disponível no NPM, para instalá -lo em um aplicativo existente para experimentar a biblioteca, execute o comando

npm install design-angular-kit --save

Escolha a versão correspondente à sua versão angular:

Angular	Design-kit de design
18+	V1.1.0 +
17+	V1.0.0 +

Como alternativa, você pode iniciar o comando

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

Será apresentado em série:

Escolha da versão correta a ser instalada
Instalação do vício
Adicionando o vício ao package.json
Configuração do aplicativo

As instruções do parágrafo a seguir, configuração , serão realizadas automaticamente, exceto pela personalização da configuração i18N .

Configuração

Configuração do aplicativo

A livraria design-angular-kit pode ser usada com os componentes padrão ou com o aplicativo que usa os módulos. Siga a seção de configuração que corresponde ao seu aplicativo.

Aplicação independente

Use a função provideDesignAngularKit na configuração do aplicativo ApplicationConfig para poder inicializar a funcionalidade da biblioteca.

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

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

Aplicação modular

É necessário importar DesignAngularKitModule dentro do formulário de inscrição principal (geralmente chamado de AppModula ) usando o método forRoot para poder inicializar a funcionalidade da biblioteca e importar todos os componentes .

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

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

Use o método forChild durante a importação do módulo DesignAngularKitModule em outros módulos de aplicativos para importar todos os componentes da biblioteca.

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

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

Aplicação híbrida

Se, no seu aplicativo, existe o módulo AppModule , mas você deseja usar nossos componentes com a configuração independente , use a função do provideDesignAngularKit no formulário de aplicação principal para inicializar a funcionalidade da biblioteca.

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

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

Parâmetros de configuração

Para a função provideDesignAngularKit e para o DesignAngularKitModule.forRoot() é possível usar um design de configuração 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 )

Importando estilos de bootstrap-Italy

Configure os estilos solicitados no arquivo styles.scss . É importante a biblioteca SCSS, como mostrado no exemplo abaixo.

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

Como personalizar e substituir as variáveis padrão da biblioteca (por exemplo, cores, família, medidas etc.)

O Bootstrap Italia herda e estende todas as variáveis padrão do bootstrap, substituindo alguns valores na fase de compilação e definindo novos no Occurs. Um exemplo de tudo é o valor de cor primária $ que é representado pela cor azul #006ccc em Bootstrap Italia, típica da biblioteca.

No entanto, o uso do Blue #0066cc deve ser reservado para as administrações centrais do estado e, portanto, você pode se encontrar na condição de ter que personalizar os valores das variáveis de cores do bootstrap Italia, definindo novos valores para suas necessidades.

Essa cor e outras tonalidades são geradas a partir da terna HSB; portanto, as variáveis primárias H devem ser alteradas, primário-s e primário-B. Para ter a correspondência entre o valor hexadecimal da cor e o HSB, o portal rgb.to pode ser usado, por exemplo, https://rgb.to/0066cc.

Abaixo está um exemplo de arquivos styles.scss com a personalização de cores. As personalizações das variáveis devem sempre ser feitas antes de importar o arquivo 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 ' ;

Ícone e suporte de ativos

Para adicionar suporte de ícones/ativos, altere seu angular.json adicionando:

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

I18N Suporte (localização)

A livraria de translate NGX dos EUA para adicionar as localizações do i18N.

Modifique seu angular.json acrescentando:

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

Você pode usar os rótulos localizados da biblioteca design-angular-kit em seu aplicativo, por exemplo {{'it.errors.required-field' | translate}} . Veja nossos rótulos

Localização existente

Se você já usa os arquivos de localização em seu aplicativo, pode usar a livraria NGX-Translate-Multi-Http-Loder para fazer upload dos arquivos de localização do aplicativo e da biblioteca design-angular-kit

Usando a função 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 o 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 ] ,
  } ) ,
} ) ;

Personalização da localização

Se você deseja personalizar nossos rótulos:

Não inclua o suporte i18n em seu angular.json
- Crie seus arquivos de localização personalizados em seus assets/bootstrap-italia/i18n/ (Crie o caminho se ele não existir)
- JSON deve ter esse formato.
- Adicione o translateLoader personalizado à configuração inicial da biblioteca, substituindo o atributo assets/bootstrap-italia/i18n/ itPrefix
Ou adicione as localizações nos seus arquivos JSON, substituindo as teclas JSON à biblioteca.

Usar

Usando o módulo DesignAngularKitModule , todos os componentes da biblioteca serão importados para o aplicativo.

Como alternativa, como todos os nossos componentes e diretrizes são independentes , você só pode importar os componentes/módulos necessários, por exemplo Alerta, paginação e 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 { }

Como contribuir?

? É possível contribuir para a biblioteca de várias maneiras:

Com seu código, assumindo o comando um problema entre os que estão abertos e ainda não atribuídos entre a questão do Kit Angular (um comentário sobre o assunto também é suficiente para notificar a vontade de assumir o comando).
Através do relatório de bugs ou melhorias no repositório oficial de kits angulares.
Escrevendo no canal de folga dedicado.

Como contribuir com o código

Você gostaria de ajudar a projetar kit angular? Você está no lugar certo!

Se você ainda não o fez, comece gastando alguns minutos para aprofundar seus conhecimentos sobre as diretrizes de design para os Serviços da Web do PA e consulte as indicações sobre como contribuir para o design do kit angular.

Defina o ambiente local

Os requisitos mínimos do seu ambiente local devem ser:

Nodejs (> = 20)

Neste ponto, é necessário definir seu ambiente local para a compilação do arquivo de origem e a geração da documentação:

Clone o projeto

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

Na pasta do projeto, instale vícios

 npm i

Inicie o aplicativo localmente

 npm run start

Para realizar os testes das unidades, execute o comando

 npm run test

Defina o ambiente local com o DevContainer

Os requisitos mínimos do seu ambiente local para trabalhar com o DevContainer devem ser:

Código do Visual Studio
Docker
git

Inicie o código do Visual Studio e instale a extensão de contêineres de dev da Microsoft (ms-vscode-remote.remo-concainers).

Neste ponto, é necessário definir seguir as seguintes etapas:

Clone o projeto

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

Abra a pasta do projeto com código do Visual Studio
No carregamento, o código do Visual Studio reconhecerá os presentes da configuração de um devcContainer. Abra o projeto com o DevContainer. Mais informações aqui.
O código do Visual Studio realizará a configuração do contêiner, instalando a versão correta do NodeJS, NPM e as extensões da idéia. Os vícios do projeto serão instalados no processo de criação do contêiner. O ambiente suíço estará pronto para a configuração concluída.
Inicie o aplicativo localmente

 npm run start

Para realizar os testes das unidades, execute o comando

 npm run test

Links úteis

Kit Angular Playground
Visualização do Vercel (atualizado para cada commiti)

Da comunidade

Video Commit University: Desenvolva -se a partir do zero um aplicativo angular da web para o PA (slide)
Video Meetup Angular Roma: Angular, Bootstrap Italia e além ..