ng sq ui ng sq ui 소스 코드 다운로드

ng sq ui

타사 구성 요소

Updated to angular 12.2.4 + bug fixes

다운로드

NG-SQ-UI

각도를위한 간단한 품질의 UI 키트

개발자를 위해 개발자가 구축했습니다!

문서

각 구성 요소에 대한 공개 API에 대한 설명이 있습니다. 구성 요소는 모듈로 그룹화됩니다. 이 문서에서 제외 된 코드 검사를 통해 볼 수있는 속성은 내부 사용을위한 것이므로 이에 의존해서는 안됩니다.

모든 유형의 공개 인터페이스 및 서비스도 포함되어 있습니다.

홈페이지
설치
FormelementsModule
모달 모드
ProgressBarmodule
DateTimePickerModule
DataTableModule
CommonModule
우리에 대해
바운티 프로그램
라이브 예
문제 해결

변화를 깨기 :

모든 패키지의 2.0.1 relases는 Angular 14+와 호환됩니다. 뒤로 호환 버전이 필요한 경우 아래에 언급 된대로 1.xy 패키지를 참조하십시오.

메모:
View Engine을 사용하는 프로젝트는 대신 Ivy (Angular 10 ~ Angular 12)를 사용하는 경우 각 패키지에 대해 다음 버전을 사용하십시오.

@sq-ui/ng-sq-ui : 1.3.3
@sq-ui/ng-datetime-picker : 1.1.2
@sq-ui/ng-sq-common : 1.1.5
@sq-ui/ng- 모달 : 1.1.2
@sq-ui/ng-datatable : 1.1.3

Angular 버전 <9를 사용하는 프로젝트의 경우 각 패키지에 대해 다음 버전을 사용하십시오.

@sq-ui/ng-sq-ui : 1.1.5
@sq-ui/ng-datetime-picker : 1.1.0
@sq-ui/ng-sq-common : 1.0.3
@sq-ui/ng- 모달 : 1.0.6
@sq-ui/ng-datatable : 1.0.3

설치

이 repo를 복제 / 다운로드하거나 노드 종속성으로 설치할 수 있습니다.

 npm i @sq-ui/ng-sq-ui@latest --save

-- 또는 --

 yarn add @sq-ui/ng-sq-ui@latest

용법

모듈에서 ngsquimodule 가져 오기 :

 import { NgSqUiModule } from '@sq-ui/ng-sq-ui';

그런 다음 @ngmodule () 데코레이터의 imports 배열에 포함시킵니다.

 @NgModule({
  declarations: [ //... ],
  imports: [
    NgSqUiModule,
    //...
  ],
  //...

NG-SQ-UI에는 특정 글꼴이 포함되어 있지 않습니다. 기본 테마 포함도 선택 사항입니다. 라이브 예제 페이지를 참조하십시오.

그리드가 필요하십니까? 우리는 당신을 덮었습니다!

Angular.json에 스타일을 추가하십시오

 "styles" : [
  " src/styles.css " ,
  " ./node_modules/@sq-ui/ng-sq-common/sq-ui-theme.scss " ,
  " ./node_modules/@sq-ui/ng-sq-ui/styles/form-elements.scss " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/solid.min.css " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/regular.min.css " ,
],

구성 요소에 스타일을 적용하십시오

스타일링을 사용하려면 부모 요소에 class="sq" 추가하십시오.

 < body class =" sq " >
  < div class =" row " >
    < sq-input ... > </ sq-input >
  </ div >
</ body >

의존성

ng-sq-ui는 다음에 따라 다릅니다.

글꼴을 좋아하고 불변성. JS (둘 다 NG-SQ-UI와 함께 설치됩니다)

로컬로 시도하십시오

 git clone [email protected]:SQ-UI/ng-sq-ui.git
npm i
npm start

-- 또는 --

 git clone [email protected]:SQ-UI/ng-sq-ui.git
yarn install
npm start

npm start 실행하면 라이브러리가 자동으로 감시됩니다.

이 프로젝트의 TypeScript 컴파일러는 dist/ 의 라이브러리를 찾도록 구성되어 있으며 dist/ 존재하지 않으면 라이브러리의 소스 코드를 나타냅니다. 그렇기 때문에 ng serve --open -OPEN npm start 대신 npm start 실행해야합니다. START dist/ (존재하는 경우)를 제거한 다음 ng serve --open 실행합니다. 이를 통해 컴파일러는 projects/ 디렉토리에서 변경 사항을 듣도록 준비합니다.