design angular kit herunterladen - design angular kit Quellcode herunterladen

Angular Kit Design

Lesen Sie dies in anderen Sprachen: Englisch ??

Euen Wenn Sie die alte Version benötigen, finden Sie den Code und seine Dokumentation hier.

Kommentare und Beiträge aus der gesamten Community sind mehr als willkommen! ?

Intro

Das Design Angular Kit ist ein Satz von Winkelkomponenten, die Bootstrap Italia und die Stile für das UI -Kit -Design implementieren. Die öffentliche Version der Dokumentation der Bibliothek ist hier für die neueste veröffentlichte Veröffentlichung erhältlich, während sie hier für die Entwicklungsversion in Bezug auf die Filiale main bezieht. Um mit der Bibliothek zu spielen, ist das Spielplatz Angular Kit erhältlich.

Index

So verwenden Sie das Kit
Wie man beiträgt
Wie man mit dem Code beiträgt
Nützliche Links

So verwenden Sie das Kit

Das Design Angular Kit ist auf NPM erhältlich, um es auf einer vorhandenen Anwendung zu installieren, für die die Bibliothek ausgetragen wird, und den Befehl ausführen

npm install design-angular-kit --save

Wählen Sie die Version, die Ihrer Winkelversion entspricht:

Eckig	Design-Angular-Kit
18+	V1.1.0 +
17+	V1.0.0 +

Alternativ können Sie den Befehl starten

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

Wird in Serie auftreten:

Auswahl der richtigen Version, die installiert werden soll
Installation der Sucht
Hinzufügen der Sucht zum Paket.json
Anwendungskonfiguration

Die folgenden Absatzanweisungen, Konfiguration , werden automatisch durchgeführt, mit Ausnahme der Personalisierung der I18N -Konfiguration.

Konfiguration

App -Konfiguration

Die design-angular-kit -Buchhandlung kann mit den Standardkomponenten oder mit der Anwendung verwendet werden, die die Module verwendet. Befolgen Sie den Konfigurationsabschnitt, der Ihrer Anwendung entspricht.

Eigenständige Anwendung

Verwenden Sie die Funktion " provideDesignAngularKit Die Funktion ApplicationConfig , um die Funktionalität der Bibliothek initialisieren zu können.

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

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

Modulare Anwendung

Es ist erforderlich, DesignAngularKitModule innerhalb des Hauptantragsformulars (normalerweise als AppModula bezeichnet) zu importieren, indem die forRoot -Methode in der Lage ist, die Funktionalität der Bibliothek zu initialisieren und alle Komponenten zu importieren .

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

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

Verwenden Sie die forChild -Methode während des Imports des DesignAngularKitModule -Moduls in anderen Anwendungsmodulen, um alle Komponenten der Bibliothek zu importieren .

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

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

Hybridanwendung

Wenn in Ihrer Anwendung das AppModule -Modul vorhanden ist, Sie jedoch unsere Komponenten mit der eigenständigen Konfiguration verwenden möchten, verwenden Sie die Funktion provideDesignAngularKit für die Funktionalität der Bibliothek.

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

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

Konfigurationsparameter

Sowohl für die provideDesignAngularKit -Funktion als auch für das DesignAngularKitModule.forRoot() können Sie eine anfängliche Konfiguration DesignAngularKitConfig verwenden.

 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 )

Importieren von Bootstrap-iTitaly-Stilen

Konfigurieren Sie die in der Datei styles.scss angeforderten Stile. Die SCSS -Bibliothek ist wichtig, wie im folgenden Beispiel gezeigt.

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

So können Sie die Standardvariablen der Bibliothek anpassen und überschreiben (z. B. Farben, Schriftfamilie, Maßnahmen usw.)

Bootstrap Italia erbt und erweitert alle Standardvariablen von Bootstrap, wobei einige Werte in der Kompilierungsphase überschrieben und neu auf den Auftreten einstellen. Ein Beispiel für alle ist der $ Primärfarbwert, der durch die blaue Farbe #006ccc in Bootstrap Italia, typisch für die Bibliothek, dargestellt wird.

Die Verwendung von Blue #0066cc sollte jedoch den zentralen Verwaltungen des Staates reserviert werden. Daher können Sie sich in dem Zustand befinden, die Werte der Farbvariablen von Bootstrap Italia anzupassen und neue Werte für Ihre Anforderungen festzulegen.

Diese Farbe und andere Farbtöne werden ab der HSB-Terna erzeugt, daher müssen die Primär-H-Variablen geändert werden, Primär-S und Primär-B. Um die Korrespondenz zwischen dem hexadezimalen Wert von Farbe und HSB zu haben, kann das Portal RGB.TO verwendet werden, z. B. https://rgb.to/0066cc.

Im Folgenden finden Sie ein Beispiel für styles.scss -Dateien mit der Anpassung von Farben. Die Anpassungen der Variablen müssen immer vor dem Importieren der Datei bootstrap-italia.scss vorgenommen werden

 // 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 ' ;

Icon- und Vermögensunterstützung

Ändern Sie Ihr angular.json

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

I18N Support (Ort)

Die US-amerikanische NGX-Translate-Buchhandlung, um die I18N-Lokalisierungen hinzuzufügen.

Ändern Sie Ihr angular.json Hinzufügen:

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

Sie können die lokalisierten Etiketten der design-angular-kit -Bibliothek in Ihrer Anwendung verwenden, z {{'it.errors.required-field' | translate}} . Siehe unsere Etiketten

Bestehender Standort

Wenn Sie die Standortdateien in Ihrer App bereits verwenden, können Sie den Bookshop NGX-Translate-Multi-Http-Hersteller verwenden, um sowohl die Standortdateien der App als auch die der design-angular-kit -Bibliothek hochzuladen

Verwenden der Funktionsfunktion 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 ] ,
  } ) ,
} ) ;

Verwenden des DesignAngularKitModule -Moduls:

 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 ] ,
  } ) ,
} ) ;

Personalisierung des Standorts

Wenn Sie unsere Etiketten anpassen möchten:

Fügen Sie die i18n -Unterstützung nicht in Ihr angular.json ein
- Erstellen Sie Ihre personalisierten Standortdateien in Ihren assets/bootstrap-italia/i18n/ (erstellen Sie den Pfad, wenn er nicht vorhanden ist) Ordner
- JSON muss dieses Format haben.
- Fügen Sie den benutzerdefinierten translateLoader in die anfängliche Konfiguration der Bibliothek hinzu, wobei das Attribut assets/bootstrap-italia/i18n/ itPrefix ersetzt wird
Oder fügen Sie die Lokalisierungen in Ihre JSON -Dateien hinzu und überschreiben Sie die JSON -Schlüssel in die Bibliothek.

Verwenden

Mit dem DesignAngularKitModule -Modul werden alle Komponenten der Bibliothek in die Anwendung importiert.

Da alle unsere Komponenten und Anweisungen eigenständig sind, können Sie nur die von Ihnen benötigten Komponenten/Module importieren, z. Alarm, Pagination und 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 { }

Wie kann man einen Beitrag leisten?

? Es ist möglich, auf verschiedene Weise zur Bibliothek beizutragen:

Mit Ihrem Code wird ein Problem unter den offenen und nicht bereits zugewiesenen Problemen des Angular Kit zugewiesen (ein Kommentar zu diesem Thema reicht auch aus, um den Willen zur Übernahme der Verantwortung zu informieren).
Durch den Bericht über Fehler oder Verbesserungen des offiziellen Angular Kit -Repositorys.
Schreiben auf dem dedizierten Slack -Kanal.

Wie man mit dem Code beiträgt

Möchten Sie beim Design Angular Kit helfen? Sie sind am richtigen Ort!

Wenn Sie dies noch nicht getan haben, verbringen Sie zunächst ein paar Minuten, um Ihr Wissen über die Entwurfsrichtlinien für die PA -Webdienste zu vertiefen, und verweisen Sie auf die Hinweise, wie Sie zum Angular Kit -Design beitragen können.

Stellen Sie die lokale Umgebung fest

Die Mindestanforderungen Ihrer lokalen Umgebung müssen:

Nodejs (> = 20)

Zu diesem Zeitpunkt ist es erforderlich, Ihre lokale Umgebung für die Zusammenstellung der Quelldatei und die Erzeugung der Dokumentation festzulegen:

Klonen Sie das Projekt

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

Installieren Sie im Projektordner Abhängigkeiten

 npm i

Starten Sie die Anwendung lokal

 npm run start

Führen Sie den Befehl aus, um die Einheiten -Tests durchzuführen

 npm run test

Stellen Sie die lokale Umgebung mit DevContainer ein

Die Mindestanforderungen Ihrer lokalen Umgebung, um mit DevContainer zusammenzuarbeiten, müssen:

Visual Studio -Code
Docker
Git

Starten Sie den Visual Studio-Code und installieren Sie die Dev Container-Erweiterung von Microsoft (MS-VSCODE-REMOTE.REMO-CONCAINERS).

Zu diesem Zeitpunkt muss die folgenden Schritte eingestellt werden: Folgende Schritte:

Klonen Sie das Projekt

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

Öffnen Sie den Projektordner mit Visual Studio Code
Beim Laden erkennt Visual Studio Code die Geschenke der Konfiguration eines DevCcontainer. Öffnen Sie das Projekt mit dem DevContainer. Weitere Informationen hier.
Der Visual Studio -Code führt das Container -Setup durch und installiert die richtige Version von NodeJS, NPM und die Erweiterungen der Idee. Projektabhängigkeiten werden im Erstellen des Containers installiert. Die Schweizer Umgebung ist für die Einrichtung bereit.
Starten Sie die Anwendung lokal

 npm run start

Führen Sie den Befehl aus, um die Einheiten -Tests durchzuführen

 npm run test

Nützliche Links

Spielplatz Angular Kit
Vercel Preview (aktualisiert für jedes Commiti)

Aus der Gemeinschaft

Video Commit University: Entwickeln Sie von Grund auf neu eine Winkel -Web -App für die PA (Folie)
Video Meetup Angular Rom: Angular, Bootstrap Italia und darüber hinaus ..