วิธีการใช้ antd ร่วมกับ Angular 7
antd คือ ui framework ที่นิยมใช้กันในกลุ่มที่พัฒนาด้วย react ตัว antd ในตอนนี้ได้พัฒนาให้สามารถใช้งานร่วมกับ angular 7 ได้แล้ว โดยมีวิธีการติดตั้งดังนี้
npm install ng-zorro-antdหรือng add ng-zorro-antd --i18n=en_US
หลังจากนั้นให้ทำการ import NgZorroAntdModule เข้าไปที่ module ที่เราต้องการ ดังตัวอย่าง
หลังจากนั้นเราสามารถที่จะเรียกให้ ui component ได้เลย โดยตัวของ antd นั้นมี ui component มาให้เยอะพอสมควร อีกทั้งยังรองรับ responsive ด้วย โดยมีการรองรับทั้งแบบ grid system และ flex
เรามาเร่ิมสร้าง layout กันโดยตัว antd มี component สำหรับทำ layout เตรียมไว้ให้ดังนี้ nz-layout, nz-header, nz-sider, nz-content, nz-footer
จากภาพเราสามารถเขียน html template ได้ดังนี้
<nz-layout>
<nz-header>Header</nz-header>
<nz-layout>
<nz-sider>Sider</nz-sider>
<nz-content>Content</nz-content>
</nz-layout>
<nz-footer>Footer</nz-footer>
</nz-layout>ตัว antd ใช้ grid system แบบ 24 column ทำให้การออกแบบหน้าจะสำหรับงาน admin ui ง่ายขึ้นมากโดย antd นั้นใช้ nz-row ในการบ่งบอกว่าเป็น แถว และ nz-col ในการบ่งบอกความเป็นคอลัม และใช้ nzSpan ในการบ่งบอกจำนวนพื้นที่ที่จะใช้ เช่น
<div nz-row>
<div nz-col nzSpan="12">col-12</div>
<div nz-col nzSpan="12">col-12</div>
</div>ก็จะหมายถึงจะใช้พื้นที่กันคนละครึ่ง ในกรณีที่ต้องการให้มีความเป็น responsive ทาง antd ได้เตรียม nzXs, nzSm, nzMd, nzLg, nzXl, nzXXl โดยในแต่ละตัวจะเอาใว้สำหรับแบ่งว่าถ้าหน้าจอขนาด Xs จนถึง XXl นั้น ตัว ui เราจะใช้พื้นที่ขนาดหน้าจอเท่าไหร่
<div nz-row>
<div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">Col</div>
</div>ในตัว antd เองยังมี component อื่นๆ อีกมากมายเตรียมเอาไว้ให้นำไปใช้ โดยสามารถเข้าไปดู website หลักได้ที่ url นี้สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolution หรือ web site : www.pnpsw.comได้ครับ
