design angular kit

การออกแบบชุดเชิงมุม

อ่านสิ่งนี้ในภาษาอื่น: ภาษาอังกฤษ ??

หากคุณต้องการเวอร์ชันเก่ารหัสและเอกสารสามารถพบได้ที่นี่

ความคิดเห็นและการมีส่วนร่วมจากชุมชนทั้งหมดได้รับการต้อนรับมากกว่า! -

อินโทร

Design Angular Kit เป็นชุดของส่วนประกอบเชิงมุมที่ใช้ bootstrap italia และสไตล์ในการออกแบบชุด UI เอกสารสาธารณะของเอกสารของห้องสมุดมีให้ที่นี่สำหรับการเผยแพร่ที่มีเสถียรภาพล่าสุดที่เผยแพร่ในขณะที่นี่สำหรับรุ่นการพัฒนาที่เกี่ยวข้องกับสาขา main ในการเล่นกับห้องสมุดชุด Angular ของสนามเด็กเล่นมีให้บริการ

ดัชนี

• วิธีใช้ชุด
• วิธีการมีส่วนร่วม
• วิธีการมีส่วนร่วมกับรหัส
• ลิงค์ที่มีประโยชน์

วิธีใช้ชุด

Design Angular Kit มีให้บริการใน NPM เพื่อติดตั้งในแอปพลิเคชันที่มีอยู่ซึ่งจะลองใช้ไลบรารีเรียกใช้คำสั่ง

npm install design-angular-kit --save

เลือกเวอร์ชันที่สอดคล้องกับเวอร์ชันเชิงมุมของคุณ:

เชิงมุม	ชุดออกแบบ
18+	v1.1.0 +
17+	v1.0.0 +

หรือคุณสามารถเรียกใช้คำสั่ง

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

จะดำเนินการในซีรีส์:

• ตัวเลือกของเวอร์ชันที่ถูกต้องที่จะติดตั้ง
• การติดตั้งการติดยาเสพติด
• การเพิ่มการเสพติดลงใน package.json
• การกำหนดค่าแอปพลิเคชัน

คำแนะนำวรรคต่อไปนี้ การกำหนดค่า จะดำเนินการโดยอัตโนมัติยกเว้นการกำหนดค่าส่วนบุคคลของการกำหนดค่า I18N

การกำหนดค่า

การกำหนดค่าแอพ

ร้านหนังสือ design-angular-kit สามารถใช้กับส่วนประกอบ มาตรฐาน หรือกับแอปพลิเคชันที่ใช้โมดูล ทำตามส่วนการกำหนดค่าที่สอดคล้องกับแอปพลิเคชันของคุณ

แอปพลิเคชันแบบสแตนด์อโลน

ใช้ฟังก์ชั่น provideDesignAngularKit ในการกำหนดค่าแอปพลิเคชัน ApplicationConfig เพื่อให้สามารถเริ่มต้นการทำงานของไลบรารี

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

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

แอปพลิเคชันแบบแยกส่วน

มีความจำเป็นที่จะต้องนำเข้า DesignAngularKitModule ภายในแบบฟอร์มแอปพลิเคชันหลัก (โดยปกติเรียกว่า AppModula ) โดยใช้วิธี forRoot เพื่อให้สามารถเริ่มต้นการทำงานของไลบรารีและ นำเข้าส่วนประกอบทั้งหมด

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

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

ใช้วิธีการของ forChild ในระหว่างการนำเข้าโมดูล DesignAngularKitModule ในโมดูลแอปพลิเคชันอื่น ๆ เพื่อ นำเข้าส่วนประกอบทั้งหมด ของไลบรารี

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

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

แอปพลิเคชันไฮบริด

หากในแอปพลิเคชันของคุณมีโมดูล AppModule แต่คุณต้องการใช้ ส่วนประกอบของเรากับการกำหนดค่าแบบ สแตนด์อโลน ให้ใช้ฟังก์ชั่น provideDesignAngularKit ภายในแบบฟอร์มแอปพลิเคชันหลักเพื่อเริ่มต้นการทำงานของไลบรารี

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

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

พารามิเตอร์การกำหนดค่า

ทั้งสำหรับฟังก์ชั่น provideDesignAngularKit และสำหรับ DesignAngularKitModule.forRoot() มันเป็นไปได้ที่จะใช้การกำหนดค่าเริ่มต้น 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 )

การนำเข้าสไตล์ bootstrap-italy

กำหนดค่าสไตล์ที่ร้องขอในไฟล์ styles.scss มันสำคัญกับไลบรารี SCSS ดังที่แสดงในตัวอย่างด้านล่าง

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

วิธีการปรับแต่งและเขียนทับตัวแปรเริ่มต้นของไลบรารี (เช่นสี, ครอบครัว, มาตรการ, ฯลฯ )

Bootstrap Italia สืบทอดและขยายตัวแปรเริ่มต้นทั้งหมดของ bootstrap เขียนทับค่าบางอย่างในขั้นตอนการรวบรวมและตั้งค่าใหม่ให้เกิดขึ้น ตัวอย่างของทั้งหมดคือค่าสีหลักที่แสดงด้วยสีสีน้ำเงิน #006ccc ใน bootstrap italia โดยทั่วไปของไลบรารี

อย่างไรก็ตามการใช้ Blue #0066CC ควรถูกสงวนไว้สำหรับการบริหารส่วนกลางของรัฐและดังนั้นคุณสามารถค้นหาตัวเองในสภาพที่ต้องปรับแต่งค่าของตัวแปรสีของ Bootstrap Italia ตั้งค่าใหม่สำหรับความต้องการของคุณ

สีและเฉดสีอื่น ๆ นี้เริ่มต้นจาก HSB terna ดังนั้นตัวแปรหลัก H ต้องเปลี่ยน, Primary-S และ Primary-B เพื่อให้มีการติดต่อระหว่างค่าเลขฐานสิบหกของสีและ HSB สามารถใช้พอร์ทัล RGB.to ได้เช่น https://rgb.to/0066cc

ด้านล่างเป็นตัวอย่างของรูปแบบไฟล์ styles.scss ที่มีการปรับแต่งสี การปรับแต่งของตัวแปรจะต้องทำเสมอก่อนที่จะนำเข้าไฟล์ 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 ' ;

ไอคอนและสินทรัพย์สนับสนุน

หากต้องการเพิ่มไอคอน/สินทรัพย์สนับสนุนให้เปลี่ยน angular.json เพิ่ม:

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

การสนับสนุน i18n (ตำแหน่ง)

ร้านหนังสือของสหรัฐอเมริกา NGX-Translate เพื่อเพิ่มการแปล I18N

แก้ไข angular.json Adding:

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

คุณสามารถใช้ฉลากท้องถิ่นของไลบรารี design-angular-kit ในแอปพลิเคชันของคุณเช่น {{'it.errors.required-field' | translate}} ดูป้ายกำกับของเรา

สถานที่ที่มีอยู่

หากคุณใช้ไฟล์ตำแหน่งในแอพของคุณแล้วคุณสามารถใช้ร้านหนังสือ NGX-Translate-Multi-Http-Loder เพื่ออัปโหลดทั้งไฟล์ตำแหน่งของแอพและของไลบรารี design-angular-kit

การใช้ฟังก์ชัน 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 ] ,
  } ) ,
} ) ;

ใช้โมดูล 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 ] ,
  } ) ,
} ) ; 

การทำให้เป็นส่วนตัวของสถานที่ตั้ง

หากคุณต้องการปรับแต่งฉลากของเรา:

• อย่ารวมการสนับสนุน i18n ใน angular.json ของคุณ
  • สร้างไฟล์ตำแหน่งส่วนบุคคลของคุณใน assets/bootstrap-italia/i18n/ (สร้างเส้นทางถ้าไม่มีอยู่) โฟลเดอร์
  • JSON ต้องมีรูปแบบนี้
  • เพิ่ม translateLoader ที่กำหนดเองในการกำหนดค่าเริ่มต้นของไลบรารีแทนที่ assets/bootstrap-italia/i18n/ itPrefix
• หรือเพิ่มการแปลในไฟล์ JSON ของคุณเขียนทับปุ่ม JSON ไปยังไลบรารี

ใช้

การใช้โมดูล DesignAngularKitModule ส่วนประกอบทั้งหมดของไลบรารีจะถูกนำเข้าสู่แอปพลิเคชัน

อีกทางเลือกหนึ่งเนื่องจากส่วนประกอบและคำสั่งทั้งหมดของเราเป็น แบบสแตนด์อโลน คุณสามารถนำเข้าส่วนประกอบ/โมดูลที่คุณต้องการเช่น การแจ้งเตือนการปนเปื้อนและ 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 { } 

จะมีส่วนร่วมอย่างไร?

- เป็นไปได้ที่จะมีส่วนร่วมในห้องสมุดในรูปแบบต่าง ๆ :

• ด้วยรหัสของคุณการรับผิดชอบปัญหาในหมู่ผู้ที่เปิดอยู่และยังไม่ได้รับมอบหมายระหว่างปัญหาของชุด Angular Kit (ความคิดเห็นเกี่ยวกับปัญหาก็เพียงพอที่จะแจ้งให้ทราบถึงความตั้งใจที่จะรับผิดชอบ)
• ผ่านรายงานข้อบกพร่องหรือการปรับปรุงที่เก็บชุด Angular Kit อย่างเป็นทางการ
• เขียนบนช่อง Slack โดยเฉพาะ

วิธีการมีส่วนร่วมกับรหัส

คุณต้องการช่วยในการออกแบบ Angular Kit หรือไม่? คุณอยู่ในสถานที่ที่เหมาะสม!

หากคุณยังไม่ได้ทำเช่นนั้นให้เริ่มต้นด้วยการใช้เวลาสักครู่เพื่อเพิ่มความรู้ของคุณเกี่ยวกับแนวทางการออกแบบสำหรับบริการเว็บ PA และอ้างถึงสิ่งบ่งชี้เกี่ยวกับวิธีการมีส่วนร่วมในการออกแบบชุด Angular Kit

ตั้งค่าสภาพแวดล้อมในท้องถิ่น

ข้อกำหนดขั้นต่ำของสภาพแวดล้อมในท้องถิ่นของคุณจะต้อง:

• nodejs (> = 20)

ณ จุดนี้จำเป็นต้องตั้งค่าสภาพแวดล้อมในพื้นที่ของคุณสำหรับการรวบรวมไฟล์ต้นฉบับและการสร้างเอกสาร:

1. โคลนโครงการ

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

2. ในโฟลเดอร์โครงการติดตั้งติดยาเสพติด

 npm i

3. เปิดแอปพลิเคชันในเครื่อง

 npm run start

4. หากต้องการดำเนินการทดสอบหน่วยให้เรียกใช้คำสั่ง

 npm run test

ตั้งค่าสภาพแวดล้อมในท้องถิ่นด้วย devcontainer

ข้อกำหนดขั้นต่ำของสภาพแวดล้อมในท้องถิ่นของคุณในการทำงานกับ DevContainer ต้องเป็น:

• รหัสสตูดิโอภาพ
• นักเทียบท่า
• กระตวน

เริ่มรหัส Visual Studio และติดตั้งส่วนขยาย DEV Containers ของ Microsoft (MS-VSCODE-Remote.Remo-Concainers)

ณ จุดนี้จำเป็นต้องตั้งค่าตามขั้นตอนต่อไปนี้:

1. โคลนโครงการ

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

2. เปิดโฟลเดอร์โครงการด้วยรหัส Visual Studio

3. ที่โหลดรหัส Visual Studio จะรับรู้ของขวัญของการกำหนดค่าของ Devccontainer เปิดโครงการด้วย DevContainer ข้อมูลเพิ่มเติมที่นี่

4. Visual Studio Code จะดำเนินการตั้งค่าคอนเทนเนอร์เพื่อติดตั้งเวอร์ชันที่ถูกต้องของ NodeJs, NPM และส่วนขยายของแนวคิด การติดยาเสพติดโครงการจะถูกติดตั้งในกระบวนการสร้างคอนเทนเนอร์ สภาพแวดล้อมของสวิสจะพร้อมสำหรับการตั้งค่าที่เสร็จสมบูรณ์

5. เปิดแอปพลิเคชันในเครื่อง

 npm run start

6. หากต้องการดำเนินการทดสอบหน่วยให้เรียกใช้คำสั่ง

 npm run test

ลิงค์ที่มีประโยชน์

• ชุดมุมเล่นสนามเด็กเล่น
• Preview vercel (อัปเดตเป็นแต่ละ commiti)

จากชุมชน

• Video Commit University: พัฒนาตั้งแต่เริ่มต้นแอพเชิงมุมเว็บสำหรับ PA (สไลด์)
• วิดีโอพบกัน Angular Rome: Angular, Bootstrap Italia และอื่น ๆ ..

การมีส่วนร่วมของห้องสมุด

ขอขอบคุณเป็นพิเศษสำหรับผู้ที่พัฒนาห้องสมุดนี้เป็นไปได้

Antonino Bonanno	Cristian Borelli	Alessio Napolitano

และขอบคุณโดยเฉพาะอย่างยิ่งกับทีม NetService:

---

ผู้มีส่วนร่วมทั้งหมด ( ทำด้วยผู้สนับสนุน-IMG )