การใช้งาน materializecss ในการตกแต่ง Website, App Mobile “กรณีที่ใช้ MacBook ระบบปฏิบัติการ Mac OS” . https://materializecss.com
เปิด Terminal ที่ Visual Studio หรือ โปรแกรม Terminal เลยได้นะคะ
แนะนำให้เปิดที่ตัวของโปรมแกรม Visual Studio เลยดีกว่า"คำสั่งเปิดคือ Command + J" เพื่อเปิด TerminalCreate Component
ขั้นตอนที่ 1 cd เข้าไปใน folder หลักของคุณ ส่วนของเราคือ “works”
cd works [ กด Enter ]ขั้นตอนที่ 2 cd เข้าไปใน folder ย่อยของคุณ และส่วนของเราคือ “angular”
cd angular [ กด Enter ]ขั้นตอนที่ 3 สร้าง Project Angular ของเราเองให้ชื่อว่า materialize
ng new materialize [ กด Enter ]
ขั้นตอนที่ 4 เปิด การทำงานของ Serve ไปที่ Terminal และใส่คำสั่ง no serve. ตำแหน่งที่อยู่ “localhost:4200”
ng serve [ กด Enter ]
Install Materialize-css
ขั้นตอนที่ 5 นี่สำคัญเลย เราจะทำการติดตั้ง [Materialize] ลงไปในตัวเครื่อง
การ Install เราจะใช้ NPM ในการติดตั้งเพราะว่า จะเอาดึงข้อมูลมาไว้ที่เครื่อง Server ของเราเอง ถึงจะต้องสละพื้นที่ในการจัดเก็บสักหน่อย ก็ไม่เป็นไรหรอกเนอะ เพื่อความแน่นอนของข้อมูล มั่นใจว่าข้อมูลจะไม่หายไปไหน เพราะถ้าใช้ CDN เวลา CDN พังเราก็ไม่สามารถดึงข้อมูลมา ได้ เจ้าตัว CDN นี้ ข้อมูลของเค้าจะอยู่อีก Server หนึ่ง เวลาเรียกใช้ ถึงจะดึงข้อมูลมาให้เรา
เริ่มการติดตั้ง โดยใช้ NPM
npm install materialize-css@next [ กด Enter ]ให้ไปที่ Folder “ node_module แล้วหา materialize-css > dist > css > materialize.min.css ” และ “js > materialize.min.js” ว่าเจอมั้ย ถ้าเจอก็แสดงว่าติดตั้งได้สำเร็จ
ขั้นตอนต่อที่ 6 ไปเราจะ ทำให้ Angular รู้จักกับไฟล์นี้ก่อนถึงจะใช้งานได้ โดยที่เราจะต้องไปที่ไฟล์ angular.json
ส่วนของ CSS ใส่เข้าไปในอาร์เรย์ Styles ช่วงของ projects
"styles": ["src/styles.css","node_modules/materialize-css/dist/css/materialize.min.css"],
ส่วนของ JS ใส่เข้าไปในอาร์เรย์ Scripts ช่วงของ projects
"scripts": ["node_modules/materialize-css/dist/js/materialize.min.js"],
TEST Materialize-css
ลองทดสอบดู ไปที่ไฟล์ app > app.component.html
มือใหม่หัดเขียน ช่วยแนะนำด้วยเน้อ
