Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Desain Kit Angular

Baca ini dalam bahasa lain: Bahasa Inggris ??.

️ Jika Anda membutuhkan versi lama, kode dan dokumentasinya dapat ditemukan di sini.

Komentar dan kontribusi dari seluruh komunitas lebih dari disambut! ?

Intro

Desain Angular Kit adalah satu set komponen sudut yang mengimplementasikan bootstrap Italia dan gaya pada desain kit UI. Versi publik dari dokumentasi perpustakaan tersedia di sini untuk rilis stabil terbaru yang diterbitkan, sementara di sini untuk versi pengembangan yang berkaitan dengan cabang main . Untuk bermain dengan perpustakaan, kit sudut taman bermain tersedia.

Indeks

  • Cara menggunakan kit
  • Bagaimana berkontribusi
  • Bagaimana berkontribusi dengan kode
  • Tautan yang berguna

Cara menggunakan kit

Desain Angular Kit tersedia di NPM, untuk menginstalnya pada aplikasi yang ada untuk mencoba perpustakaan, jalankan perintah 

npm install design-angular-kit --save

Pilih versi yang sesuai dengan versi sudut Anda:

Angular Desain-angular-kit
18+ V1.1.0 +
17+ V1.0.0 +

Atau, Anda dapat meluncurkan perintah 

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

Akan tampil dalam seri:

  • pilihan versi yang benar untuk diinstal
  • Pemasangan kecanduan
  • Menambahkan kecanduan ke paket.json
  • Konfigurasi Aplikasi

Instruksi paragraf berikut, konfigurasi , akan dilakukan secara otomatis, kecuali untuk personalisasi konfigurasi I18N .

Konfigurasi

Konfigurasi Aplikasi

Toko buku design-angular-kit dapat digunakan dengan komponen standar atau dengan aplikasi yang menggunakan modul. Ikuti bagian konfigurasi yang sesuai dengan aplikasi Anda.

Aplikasi mandiri

Gunakan Fungsi provideDesignAngularKit dalam mengkonfigurasi aplikasi ApplicationConfig untuk dapat menginisialisasi fungsionalitas perpustakaan. 

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

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

Aplikasi Modular

Penting untuk mengimpor DesignAngularKitModule dalam formulir aplikasi utama (biasanya disebut AppModula ) menggunakan metode forRoot untuk dapat menginisialisasi fungsionalitas perpustakaan dan mengimpor semua komponen . 

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

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

Gunakan metode forChild selama impor modul DesignAngularKitModule di modul aplikasi lain untuk mengimpor semua komponen perpustakaan. 

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

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

Aplikasi Hibrida

Jika dalam aplikasi Anda ada modul AppModule tetapi Anda ingin menggunakan komponen kami dengan konfigurasi mandiri , gunakan fungsi provideDesignAngularKit dalam formulir aplikasi utama untuk menginisialisasi fungsionalitas perpustakaan. 

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

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

Parameter Konfigurasi

Baik untuk fungsi provideDesignAngularKit dan untuk DesignAngularKitModule.forRoot() dimungkinkan untuk menggunakan konfigurasi awal 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 )

Mengimpor gaya Bootstrap-Italia

Konfigurasikan gaya yang diminta dalam file styles.scss . Itu penting perpustakaan SCSS seperti yang ditunjukkan pada contoh di bawah ini. 

 // Importazione libreria SCSS di bootstrap-italia
@import ' bootstrap-italia/src/scss/bootstrap-italia ' ;
Cara menyesuaikan dan menimpa variabel default perpustakaan (mis. Warna, keluarga font, ukuran, dll.)

Bootstrap Italia mewarisi dan memperluas semua variabel default bootstrap, menimpa beberapa nilai dalam fase kompilasi dan pengaturan baru untuk terjadi. Contoh dari semuanya adalah nilai warna $ primer yang diwakili oleh warna biru #006ccc di bootstrap Italia, khas perpustakaan.

Penggunaan biru #0066cc harus dicadangkan untuk administrasi pusat negara bagian, dan karena itu Anda dapat menemukan diri Anda dalam kondisi harus menyesuaikan nilai -nilai variabel warna bootstrap Italia, menetapkan nilai -nilai baru untuk kebutuhan Anda.

Warna dan warna lainnya ini dihasilkan mulai dari HSB terna, oleh karena itu variabel primer-H harus diubah, primer-S dan primer-B. Untuk memiliki korespondensi antara nilai heksadesimal warna dan HSB, portal RGB.to dapat digunakan, misalnya https://rgb.to/0066cc.

Di bawah ini adalah contoh file styles.scss dengan kustomisasi warna. Kustomisasi variabel harus selalu dilakukan sebelum mengimpor file 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 ' ;

Dukungan Ikon dan Aset

Untuk menambahkan dukungan ikon/aset, ubah angular.json Anda menambahkan: 

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

Dukungan I18n (Lokasi)

Toko Buku NGX-Translate AS untuk menambahkan lokalisasi i18n.

Ubah angular.json Anda. JSON Menambahkan: 

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

Anda dapat menggunakan label terlokalisasi dari perpustakaan design-angular-kit di aplikasi Anda, misalnya {{'it.errors.required-field' | translate}} . Lihat label kami

Lokasi yang ada

Jika Anda sudah menggunakan file lokasi di aplikasi Anda, Anda dapat menggunakan toko buku NGX-Translate-Multi-HTTP-Loder untuk mengunggah file lokasi dari aplikasi dan yang dari perpustakaan design-angular-kit

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

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

Personalisasi lokasi

Jika Anda ingin menyesuaikan label kami:

  • Jangan sertakan dukungan i18n di angular.json Anda
    • Buat file lokasi yang dipersonalisasi Anda di assets/bootstrap-italia/i18n/ (Buat Path Jika Tidak Ada) Folder
    • JSON harus memiliki format ini.
    • Tambahkan translateLoader Kustom ke Konfigurasi Awal Perpustakaan, Mengganti Atribut assets/bootstrap-italia/i18n/ itPrefix
  • Atau, tambahkan lokalisasi di file JSON Anda, menimpa kunci JSON ke perpustakaan.

Menggunakan

Menggunakan modul DesignAngularKitModule , semua komponen perpustakaan akan diimpor ke dalam aplikasi.

Atau, karena semua komponen dan arahan kami mandiri , Anda hanya dapat mengimpor komponen/modul yang Anda butuhkan, mis. Peringatan, pagination dan 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 { }

Bagaimana cara berkontribusi?

? Dimungkinkan untuk berkontribusi ke perpustakaan dengan berbagai cara:

  • Dengan kode Anda, mengambil alih masalah di antara mereka yang terbuka dan belum ditetapkan di antara masalah Angular Kit (komentar tentang masalah ini juga cukup untuk memberi tahu keinginan untuk mengambil alih).
  • Melalui laporan bug atau perbaikan pada repositori kit sudut resmi.
  • Menulis di saluran Slack khusus.

Bagaimana berkontribusi dengan kode

Apakah Anda ingin membantu dalam desain kit sudut? Anda berada di tempat yang tepat!

Jika Anda belum melakukannya, mulailah dengan menghabiskan beberapa menit untuk memperdalam pengetahuan Anda tentang pedoman desain untuk layanan web PA, dan lihat indikasi tentang cara berkontribusi pada desain kit sudut.

Atur lingkungan setempat

Persyaratan minimum lingkungan lokal Anda harus:

  • NodeJs (> = 20)

Pada titik ini, perlu untuk mengatur lingkungan lokal Anda untuk mengumpulkan file sumber dan pembuatan dokumentasi:

  1. Klon proyek 
 git clone https://github.com/italia/design-angular-kit.git
  1. Di folder proyek, instal kecanduan 
 npm i
  1. Luncurkan aplikasi secara lokal 
 npm run start
  1. Untuk melakukan tes unit, jalankan perintah 
 npm run test

Atur lingkungan lokal dengan DevContainer

Persyaratan minimum lingkungan lokal Anda untuk bekerja dengan DevContainer harus:

  • Kode Studio Visual
  • Buruh pelabuhan
  • git

Mulai kode Visual Studio dan instal ekstensi wadah Dev Microsoft (MS-VSCODE-REMOTE.REMO-CONCAINERS).

Pada titik ini, perlu untuk mengatur langkah -langkah berikut:

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

  1. Buka folder proyek dengan kode studio visual

  2. Saat memuat, kode Visual Studio akan mengenali hadiah konfigurasi devccontainer. Buka proyek dengan DevContainer. Info lebih lanjut di sini.

  3. Visual Studio Code akan melakukan pengaturan kontainer, akan menginstal versi NodeJs, NPM, dan ekstensi ide yang benar. Kecanduan proyek akan diinstal dalam proses pembuatan wadah. Lingkungan Swiss akan siap untuk diselesaikan.

  4. Luncurkan aplikasi secara lokal 

 npm run start
  1. Untuk melakukan tes unit, jalankan perintah 
 npm run test

Tautan yang berguna

  • Kit Angular Playground
  • Pratinjau Vercel (diperbarui untuk setiap komiti)

Dari komunitas

  • Video Commit University: Kembangkan dari awal aplikasi web sudut untuk PA (slide)
  • Video Meetup Angular Roma: Angular, Bootstrap Italia dan Beyond ..

Kontribusi Perpustakaan

Terima kasih khusus kepada mereka yang memungkinkan pengembangan perpustakaan ini

Antonino BonannoCristian BorelliAlessio Napolitano
Antonino Bonanno Cristian Borelli Alessio Napolitano

Dan terima kasih khususnya kepada tim NetService:

Semua kontributor ( dibuat dengan kontribusi-IMG )

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua