Styles in Angular Project
- เนื่องจาก GIS Design System เป็นส่วนเสริมของ library PrimeNG จึงต้องติดตั้ง PrimeNG ที่ Angular Project ก่อน โดยคุณสามารถศึกษาขั้นตอนการติดตั้งได้ที่ https://primeng.org/installation
** ตรวจสอบเวอร์ชั่นของ @angular/core ใน Project ก่อน และติดตั้ง primeng เวอร์ชั่นที่ตรงกัน (เช่น ถ้าหากใช้ @angular/core v.14 ก็ให้ติดตั้ง primeng@14 เป็นต้น)
- เนื่องจาก library ต่างๆ ใน @atlasx เก็บอยู่ใน Private Repository จึงต้องทำการ login ก่อน ด้วยคำสั่งต่อไปนี้
npm login --scope=@atlasx --registry=https://atlasx.cdg.co.th/nexus/repository/npm-private/
** กรุณาติดต่อทีม Tech เพื่อขอ Username, Password และ Email สำหรับ login
- ติดตั้ง library ที่ Angular Project ด้วยคำสั่งต่อไปนี้
npm install --save @atlasx/gis-design-system-style
- ทำการเพิ่ม css หรือ scss เข้าสู่ Angular Project โดยเพิ่ม path ไปยัง .css/.scss เข้าไปในไฟล์ angular.json
...
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/@atlasx/gis-design-system-style/design-system.css"
]
...
- หมายเหตุเพิ่มเติม สามารถดาวน์โหลดตัวอย่างการนำ GIS Design System ไปใช้งานได้ที https://gitlab.gisc.cdg.co.th/tech-001.technology/gisdesignsystem/atlasxdesignsystem
