design angular kit

تصميم مجموعة الزاوي

اقرأ هذا بلغات أخرى: اللغة الإنجليزية ؟؟.

️ إذا كنت بحاجة إلى الإصدار القديم ، فيمكن العثور على الكود ووثائقه هنا.

التعليقات والمساهمات من المجتمع بأكمله أكثر من موضع ترحيب! ؟

مقدمة

Design Angular Kit هي مجموعة من المكونات الزاوية التي تنفذ Bootstrap Italia والأنماط على تصميم مجموعة واجهة المستخدم. يتوفر النسخة العامة من وثائق المكتبة هنا للحصول على أحدث إصدار مستقر تم نشره ، بينما هنا للحصول على إصدار التطوير المتعلق بـ Branch main . للعب مع المكتبة ، تتوفر مجموعة الملعب الزاوية.

فِهرِس

• كيفية استخدام المجموعة
• كيفية المساهمة
• كيفية المساهمة في الكود
• روابط مفيدة

كيفية استخدام المجموعة

مجموعة Design Angular متوفرة على NPM ، لتثبيتها على تطبيق موجود لتجربة المكتبة ، قم بتشغيل الأمر

npm install design-angular-kit --save

اختر الإصدار المقابل لإصدارك الزاوي:

زاوي	تصميم angular-kit
18+	v1.1.0 +
17+	v1.0.0 +

بدلاً من ذلك ، يمكنك تشغيل الأمر

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

سوف يؤدي في السلسلة:

• اختيار الإصدار الصحيح المراد تثبيته
• تثبيت الإدمان
• إضافة إدمان الحزمة. 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 ويمتد جميع المتغيرات الافتراضية للتمهيد ، والكتابة فوق بعض القيم في مرحلة التجميع والتعيين الجديد على ما يحدث. مثال للجميع هو قيمة اللون الأولية $ التي يمثلها اللون الأزرق #006CC في Bootstrap Italia ، نموذجية للمكتبة.

ومع ذلك ، يجب حجز استخدام الأزرق #0066CC للإدارات المركزية للدولة ، وبالتالي يمكنك أن تجد نفسك في حالة الاضطرار إلى تخصيص قيم متغيرات الألوان في Bootstrap Italia ، وتحديد قيم جديدة لاحتياجاتك.

يتم إنشاء هذا اللون والظلال الأخرى بدءًا من HSB Terna ، وبالتالي يجب تغيير متغيرات H الأولية H ، PRIMAL-S و PRICAL-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 إضافة:

{
  "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 ، سيتم استيراد جميع مكونات المكتبة في التطبيق.

بدلاً من ذلك ، نظرًا لأن جميع مكوناتنا وتوجيهاتنا مستقلة ، يمكنك فقط استيراد المكونات/الوحدات النمطية التي تحتاجها ، على سبيل المثال في حالة تأهب ، ترقيم الصفحات والبراعة.

 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 (تعليق على القضية يكفي أيضًا لإخطار الإرادة لتولي المسؤولية).
• من خلال تقرير الحشرات أو التحسينات على مستودع الطقم الزاوي الرسمي.
• الكتابة على قناة الركود المخصصة.

كيفية المساهمة في الكود

هل ترغب في المساعدة في التصميم الزاوي؟ أنت في المكان المناسب!

إذا لم تكن قد قمت بذلك بالفعل ، فابدأ بقضاء بضع دقائق لتعميق معرفتك في إرشادات التصميم الخاصة بخدمات الويب PA ، والرجوع إلى المؤشرات حول كيفية المساهمة في تصميم مجموعة Angular.

اضبط البيئة المحلية

يجب أن يكون الحد الأدنى من متطلبات بيئتك المحلية:

• 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 من Microsoft (MS-VScode-remote.remo-concainers).

في هذه المرحلة ، من الضروري تعيين اتبع الخطوات التالية:

1. استنساخ المشروع

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

2. افتح مجلد المشروع برمز Visual Studio

3. في التحميل ، سوف يتعرف Visual Studio Code على هدايا تكوين DevcContainer. افتح المشروع مع DevContainer. مزيد من المعلومات هنا.

4. سيقوم Visual Studio Code بتنفيذ إعداد الحاوية ، وسيقوم بتثبيت الإصدار الصحيح من NodeJs و NPM وملحقات الفكرة. سيتم تثبيت إدمان المشروع في عملية إنشاء الحاوية. ستكون البيئة السويسرية جاهزة لإكمال الإعداد.

5. قم بتشغيل التطبيق محليًا

 npm run start

6. لإجراء اختبارات الوحدات ، قم بتشغيل الأمر

 npm run test

روابط مفيدة

• طقم زاوي الملعب
• معاينة Vercel (تم تحديثها لكل ملتزمة)

من المجتمع

• جامعة الالتزام بالفيديو: تطور من نقطة الصفر على ويب Angular للسلطة الفلسطينية (الشريحة)
• فيديو Meetup Angular Rome: Angular ، Bootstrap Italia وما بعده ..

مساهمة المكتبة

شكر خاص لأولئك الذين جعلوا تطوير هذه المكتبة ممكنة

أنتونو بونانو	كريستيان بوريلي	أليسيو نابوليتانو

وشكرا على وجه الخصوص لفريق NetService:

---

جميع المساهمين ( المصنوعون مع المساهمين-IMG )