design angular kit 다운로드 - design angular kit 소스 코드 다운로드

앵글 키트 디자인

이것을 다른 언어로 읽으십시오 : 영어 ??.

켈 이전 버전이 필요한 경우 코드와 문서를 여기에서 찾을 수 있습니다.

전체 커뮤니티의 의견과 기여는 환영합니다! ?

소개

Design Angular Kit는 부트 스트랩 이탈리아와 UI 키트 디자인의 스타일을 구현하는 각도 구성 요소 세트입니다. 라이브러리 문서의 공개 버전은 여기에서 게시 된 최신 안정적인 릴리스를 위해 제공되며 여기에서는 Branch main 과 관련된 개발 버전을 위해 제공됩니다. 도서관과 함께 플레이하려면 놀이터 앵글 키트를 사용할 수 있습니다.

색인

키트 사용 방법
기여하는 방법
코드에 기여하는 방법
유용한 링크

키트 사용 방법

Design Angular Kit는 NPM에서 사용할 수 있으며 라이브러리를 시도 할 기존 응용 프로그램에 설치하고 명령을 실행하십시오.

npm install design-angular-kit --save

Angular 버전에 해당하는 버전을 선택하십시오.

모난	설계-앵글 키트
18+	v1.1.0 +
17+	v1.0.0 +

또는 명령을 시작할 수 있습니다

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

시리즈로 수행합니다.

설치할 올바른 버전 선택
중독 설치
Package.json에 중독을 추가합니다
응용 프로그램 구성

다음 단락 지침 인 구성 은 I18N 구성의 개인화를 제외하고는 자동으로 수행됩니다.

구성

앱 구성

design-angular-kit 서점은 표준 구성 요소 또는 모듈을 사용하는 응용 프로그램과 함께 사용할 수 있습니다. 응용 프로그램에 해당하는 구성 섹션을 따르십시오.

독립형 응용 프로그램

ApplicationConfig 응용 프로그램을 구성하여 라이브러리의 기능을 초기화 할 수 있도록 provideDesignAngularKit 함수를 사용하십시오.

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

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

모듈 식 애플리케이션

forRoot 메소드를 사용하여 기본 응용 프로그램 형식 (일반적으로 AppModula 라고 함) 내에서 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 ' ;

라이브러리의 기본 변수를 사용자 정의하고 덮어 쓰는 방법 (예 : 색상, 글꼴, 측정 값 등)

Bootstrap Italia는 부트 스트랩의 모든 기본 변수를 상속하고 확장하여 컴파일 단계에서 일부 값을 덮어 내고 발생합니다. 예를 들어 라이브러리의 전형적인 Bootstrap Italia의 Blue #006ccc 색상으로 표시되는 $ 1 차 색상 값입니다.

그러나 Blue #0066cc의 사용은 국가의 중앙 행정부를 위해 예약되어야하므로 Bootstrap Italia의 색상 변수의 값을 사용자 정의하여 필요에 대한 새로운 값을 설정 해야하는 조건에서 자신을 찾을 수 있습니다.

이 색상 및 기타 색조는 HSB Terna에서 시작하여 생성되므로 기본 H 변수는 1 차 및 1 차 B를 변경해야합니다. 색상의 16 진수 값과 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 지원 (위치)

I18N 지역화를 추가하기위한 미국 NGX 번지 서점.

angular.json 추가 수정 :

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

{{'it.errors.required-field' | translate}} 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 추가하여 assets/bootstrap-italia/i18n/ itPrefix 속성을 대체하십시오.
또는 JSON 파일에 Localizations를 추가하여 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 { }

기여하는 방법?

? 다양한 방법으로 도서관에 기여할 수 있습니다.

코드를 사용하면 개방 된 사람들 사이에 앵글 키트 문제에 대해 아직 할당되지 않은 문제를 담당합니다 (이 문제에 대한 의견은 의지를 청구하도록 통지하기에 충분합니다).
공식 앵귤러 키트 저장소에 대한 버그 또는 개선에 대한 보고서를 통해.
전용 슬랙 채널에 글쓰기.

코드에 기여하는 방법

Design Angular Kit에 도움을 주시겠습니까? 당신은 올바른 장소에 있습니다!

아직 그렇게하지 않은 경우 PA 웹 서비스에 대한 설계 지침에 대한 지식을 깊게하기 위해 몇 분을 보내고 Angular Kit 설계에 기여하는 방법에 대한 표시를 참조하십시오.

지역 환경을 설정하십시오

지역 환경의 최소 요구 사항은 다음과 같습니다.

nodejs (> = 20)

이 시점에서 소스 파일의 컴파일 및 문서 생성을 위해 로컬 환경을 설정해야합니다.

프로젝트를 복제하십시오

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

프로젝트 폴더에 중독을 설치하십시오

 npm i

로컬로 응용 프로그램을 시작하십시오

 npm run start

장치 테스트를 수행하려면 명령을 실행하십시오

 npm run test

DevContainer로 로컬 환경을 설정하십시오

DevContainer와 함께 일할 지역 환경의 최소 요구 사항은 다음과 같습니다.

비주얼 스튜디오 코드
도커
git

Visual Studio 코드를 시작하고 Microsoft의 Dev Containers 확장 (MS-VSCODE-REMOTE.REMO-CONCAINERS)을 설치하십시오.

이 시점에서 다음 단계를 설정해야합니다.

프로젝트를 복제하십시오

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

Visual Studio 코드로 프로젝트 폴더를 엽니 다
로드시 Visual Studio Code는 DEVCCCCONTAINER의 구성 선물을 인식합니다. DevContainer와 함께 프로젝트를 엽니 다. 더 많은 정보는 여기에 있습니다.
Visual Studio Code는 컨테이너 설정을 수행하여 Nodejs, NPM의 올바른 버전 및 아이디어 확장을 설치합니다. 프로젝트 중독은 컨테이너 생성 과정에서 설치됩니다. 스위스 환경은 설정 완료 준비가됩니다.
로컬로 응용 프로그램을 시작하십시오

 npm run start

장치 테스트를 수행하려면 명령을 실행하십시오

 npm run test

유용한 링크

놀이터 각도 키트
vercel preview (각 커밋에 대한 업데이트)

커뮤니티로부터

Video Commit University : 처음부터 PA (슬라이드)의 각도 웹 앱 개발
비디오 모임 Angular Rome : Angular, Bootstrap Italia and Beyond ..

도서관의 기여

이 도서관의 개발을 가능하게 한 분들께 감사드립니다.


안토니노 보 나노	크리스티안 보렐리	알레시오 나폴리 타노

특히 NetService 팀 덕분에 다음과 같습니다.

모든 기고자 ( 기여자 -IMG로 만든 )

확장하다

design angular kit

앵글 키트 디자인

소개

색인

키트 사용 방법

구성

앱 구성

독립형 응용 프로그램

모듈 식 애플리케이션

하이브리드 응용 프로그램

구성 매개 변수

부트 스트랩-이탈리아 스타일 가져 오기

아이콘 및 자산 지원

I18N 지원 (위치)

기존 위치

위치의 개인화

사용

기여하는 방법?

코드에 기여하는 방법

지역 환경을 설정하십시오

DevContainer로 로컬 환경을 설정하십시오

유용한 링크

커뮤니티로부터

도서관의 기여

ag grid angular cli example

ant design

디자인 홈 하우스 마케오

마이 홈 디자인 모던 시티 무료 모바일 버전

차세대 iPhone을 디자인하다

Tizi 타운 룸 디자인 게임 중국어 모바일 버전

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express