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