design angular kit下載 - design angular kit源代碼下載

角套件設計

用其他語言閱讀此信息：英語??。

配x如果需要舊版本，則可以在此處找到代碼及其文檔。

歡迎整個社區的評論和貢獻！ ？

簡介

設計Angular套件是一組角度組件，可實現Bootstrap Italia和UI套件設計上的樣式。圖書館文檔的公開版本可用於發布最新的穩定版本，而在此處用於與分支main的開發版本。為了與圖書館一起玩，可以使用操場上的角套件。

指數

如何使用套件
如何貢獻
如何用代碼做出貢獻
有用的鏈接

如何使用套件

Design Angular套件可在NPM上使用，以在嘗試庫的現有應用程序上安裝它，運行命令

npm install design-angular-kit --save

選擇與您的角版本相對應的版本：

角	設計角套件
18+	v1.1.0 +
17+	V1.0.0 +

另外，您可以啟動命令

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

將串聯執行：

選擇要安裝的正確版本
成癮的安裝
將成癮添加到軟件包。
應用程序配置

除非個性化I18N配置，否則將自動執行以下段落指令，即配置。

配置

應用程序配置

design-angular-kit書店可以與標準組件或使用模塊的應用程序一起使用。請按照與您的應用程序相對應的配置部分。

獨立應用

使用provideDesignAngularKit功能在配置ApplicationConfig應用程序以能夠初始化庫的功能。

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

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

模塊化應用

有必要在主應用程序表格（通常稱為AppModula ）中使用forRoot方法導入DesignAngularKitModule ，以便能夠初始化庫的功能並導入所有組件。

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

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

在其他應用程序模塊中的DesignAngularKitModule模塊導入期間，請使用forChild方法以導入庫的所有組件。

 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 )

導入引導性風格

配置styles.scss文件中請求的樣式。如下示例所示，這對SCSS庫很重要。

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

如何自定義和覆蓋庫的默認變量（例如，顏色，font-formily，措施等）

Bootstrap Italia繼承並擴展了Bootstrap的所有默認變量，在編譯階段覆蓋了一些值，並將其設置為新的。一個示例是$ the Bootstrap Italia中藍色＃006CCC顏色表示的$主顏色值，該值是庫的典型圖書館。

但是，應保留藍色＃0066cc的藍色＃0066cc，因此您可以發現自己必須自定義Bootstrap Italia的顏色變量值，並為您的需求設置新值。

這種顏色和其他陰影是從HSB terna開始生成的，因此必須更改主-H變量，主要s和主要b。要具有顏色和HSB的十六進制值之間的對應關係，可以使用RGB.To門戶，例如https://rgb.to/0066cc。

以下是styles.scss的示例。 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 - 翻譯書店添加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 ] ,
  } ) ,
} ) ;

個性化位置

如果您想自定義我們的標籤：

請勿在您的angular.json中包括I18N支持
- 在您的assets/bootstrap-italia/i18n/ （如果不存在的情況下創建路徑）中創建您的個性化位置文件
- JSON必須具有這種格式。
- 將自定義translateLoader添加到書櫃的初始配置中，以itPrefix屬性替換assets/bootstrap-italia/i18n/
或者，在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套件問題中負責開放的問題和尚未分配的問題（對該問題的評論也足以通知承擔責任的意願）。
通過對官方Angular Kit存儲庫的錯誤或改進的報告。
在專用的Slack頻道上寫作。

如何用代碼做出貢獻

您想幫助設計Angular套件嗎？你在正確的地方！

如果您尚未這樣做，請首先花幾分鐘，以加深您對PA Web服務的設計指南的了解，並參考有關如何為Angular Kit設計做出貢獻的指示。

設置當地環境

當地環境的最低要求必須是：

nodejs（> = 20）

在這一點上，有必要設置您的本地環境以編譯源文件和文檔的生成：

克隆項目

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

在項目文件夾中，安裝成癮

 npm i

本地啟動應用程序

 npm run start

要執行單元測試，請運行命令

 npm run test

用DevContainer設置本地環境

與DevContainer合作的本地環境的最低要求必須是：

Visual Studio代碼
Docker
git

啟動Visual Studio代碼，然後安裝Microsoft的Dev容器擴展名（MS-VSCODE-REMOTE.REMO-CONCANERS）。

在這一點上，必須設置以下步驟：

克隆項目

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

使用Visual Studio代碼打開項目文件夾
加載時，Visual Studio代碼將識別Devccontainer配置的禮物。使用DevContainer打開項目。更多信息在這裡。
Visual Studio Code將執行容器設置，將安裝正確版本的Nodejs，NPM和Idea的擴展。項目成癮將安裝在創建容器的過程中。瑞士環境將準備好完成設置。
本地啟動應用程序

 npm run start

要執行單元測試，請運行命令

 npm run test

有用的鏈接

遊樂場角套件
Vercel Preview（已更新為每個提交）

來自社區

視頻提交大學：從頭開發PA的Angular Web應用程序（幻燈片）
視頻聚會角羅馬：Angular，Bootstrap Italia及其他。

圖書館的貢獻

特別感謝那些使該圖書館發展成為可能的人


Antonino Bonanno	克里斯蒂安·波雷利（Cristian Borelli）	Alessio Napolitano

特別感謝NetService團隊：

所有貢獻者（用貢獻者製造）

展開

design angular kit

角套件設計

簡介

指數

如何使用套件

配置

應用程序配置

獨立應用

模塊化應用

混合應用

配置參數

導入引導性風格

圖標和資產支持

I18N支持（位置）

現有位置

個性化位置

使用

如何做出貢獻？

如何用代碼做出貢獻

設置當地環境

用DevContainer設置本地環境

有用的鏈接

來自社區

圖書館的貢獻

ag grid angular cli example

ant design

設計之家Makeo

My Home Design Modern City免費手機版

設計下一代 iPhone

Tizi Town Room Design Games中文手機版

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express