ดาวน์โหลด ng sq ui - ng sq ui Source Source Download

ng sq ui

ส่วนประกอบของบุคคลที่สาม

Updated to angular 12.2.4 + bug fixes

ดาวน์โหลด

ng-sq-ui

ชุด UI คุณภาพง่ายสำหรับ Angular

สร้างโดยนักพัฒนาสำหรับนักพัฒนา!

เอกสาร

คุณจะพบคำอธิบายของ API สาธารณะสำหรับแต่ละองค์ประกอบ ส่วนประกอบถูกจัดกลุ่มตามโมดูล คุณสมบัติใด ๆ ที่คุณสามารถดูผ่านการตรวจสอบรหัสที่เหลือจากเอกสารนี้มีไว้สำหรับการใช้งานภายในและคุณไม่ควรพึ่งพา

รวมถึงอินเทอร์เฟซและบริการสาธารณะทุกประเภท

โฮมเพจ
การติดตั้ง
FormelementsModule
modalmodule
ProgressBarmodule
DateTimepickermodule
DataTableModule
สามัญชน
เกี่ยวกับเรา
โปรแกรมรางวัล
ตัวอย่างสด
การแก้ไขปัญหา

ทำลายการเปลี่ยนแปลง:

2.0.1 relases ของแพ็คเกจทั้งหมดเข้ากันได้กับ Angular 14+ หากคุณต้องการเวอร์ชันที่เข้ากันได้ย้อนหลังโปรดดูแพ็คเกจ 1.xy ตามที่ระบุไว้ด้านล่าง

บันทึก:
สำหรับโครงการที่ใช้ Engine View แทน 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-modal: 1.1.2
@sq-ui/ng-datatable: 1.1.3

สำหรับโครงการที่ใช้ Angular Version <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-modal: 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';

จากนั้นรวมไว้ในอาร์เรย์ imports ของ @NGModule () มัณฑนากร:

 @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 ขึ้นอยู่กับ:

font-wesome และ immutable.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/ ไม่มีอยู่จะหมายถึงซอร์สโค้ดของไลบรารี นั่นคือเหตุผลที่คุณควรเรียกใช้ npm start แทน ng serve --open npm start จะลบ dist/ (ถ้ามีอยู่) จากนั้นเรียกใช้ ng serve --open สิ่งนี้เตรียมคอมไพเลอร์เพื่อฟังการเปลี่ยนแปลงภายใต้ projects/ ไดเรกทอรี