คือเป็นไปได้ ผมไม่อยากเรียนแบบเดาทางเอาเอง มันเปื่อย แต่ถึงอย่างไรผมก็ต้องเข้าใจมันให้ได้ เอาล่ะ จากหลายๆโปรเจ็กต์ที่ผมทดลองสร้าง (ไม่ได้แนะนำกับเพื่อนๆ) เมื่อเราเปิดดูไฟล์ที่ลงท้ายด้วย .html หรือที่ผมเรียกว่า template นั้นมักจะขึ้นต้นด้วย
<ion-header>
สำหรับส่วน header และมักจะมี
<ion-content>
สำหรับการแบ่งส่วนว่านี่คือส่วน content นะ
นอกจากนี้ในส่วน header ก็มักจะมี
<ion-navbar>
วางเอาไว้เสมอๆเพื่อบอกว่า นี่เป็นส่วน navigation
ดังภาพนี้
เนื้อหาของ part นี้จะกล่าวถึงสิ่งที่ ionic เรียกว่า component ครับ เปิดหน้านี้เลย เขาบอกว่า ionic ได้ทำ block ต่างๆไว้ให้และเรียกมันเหล่านั้นว่า component ซึ่งจะช่วยให้เราวาดหน้าตาของแอปได้อย่างรวดเร็ว ionic มากับจำนวนของ component ทั้งแบบ including modals, popups และ cards โดยที่ส่วนประกอบเหล่านี้คือ html และ css ในบาง component มีจาวาสคริปต์ทำงานอยู่ด้านในด้วยนะเออ (ว้าว ตื่นเต้นๆ อ้อเหรอ~)
มาเจออย่างแรกเลยคือ Action Sheets คืออะไรก็ไม่รู้ ผมดูจาก UI ด้านข้าง (รูปโทรศัพท์) ยังไม่สนใจ ผมต้องการอะไรที่มันพื้นฐานมากกว่านี้ (อย่ามาโชว์หรู ไม่มีเงินซื้อโว้ย ฮ่า)
***สังเกต เขาใช้คำว่า component นั่นแสดงว่าประกอบด้วย view กับ model ซึ่งก็ใช่
ผมอยากลองวาดปุ่มใน blank project นี้ก่อนครับ เลื่อนลงๆ
Buttons ปุ่มมักประกอบด้วย text และหรือ icon ครับ โดยสามารถวาดโดยตรงจาก html button จากนั้นจึงเพิ่ม directive ที่เขียนว่า ion-button ลงไปเพื่อให้เกิดหน้าตาตามที่ ionic กำหนดไว้
<button ion-button>Default Style</button>
เปิดไปที่ src/pages/home/home.html ให้เพื่อๆลบโค้ดภายใต้ ion-content ออกให้หมด แล้วทดลองวางปุ่มลงไปดังนี้
หากเพื่อนๆยังรันมันอยู่ มันก็จะ live reload โค้ดส่วนที่เกิดการเปลี่ยนแปลงนี้ให้โดยอัตโนมัติ (ว้าว) เรียกวิธีการแบบนี้ว่า on the fly (เห็นเลยโดยไม่ต้องกดปุ่ม F5 หรือ refresh หน้าเว็บเอง)
ก็ขอให้เพื่อนๆลองเล่นมันให้ครบทุกแนวที่มันนำเสนอนะครับ ไม่ว่าจะเป็น Basic Usage, Outline Style, Clear Style, Round Buttons, Block Buttons, Full Buttons, Button Sizes จากนั้นลองใส่ icon เข้าไปด้วย Icon Buttons ตามด้วยอย่างสุดท้ายคือเอาปุ่มไปยัดใส่ component อื่นๆได้อีก แหม Button In Components
***สังเกต ถ้าเขียนแล้วดูผลปรากฏว่ามันไม่มีอะไรเกิดขึ้น หรือสิ่งที่เกิดไม่เป็นไปตามใจคิด ให้กด F12 (ใช้ Chrome browser) แล้วกดแท็บไปดูที่ console ว่ามี error เกิดขึ้นหรือไม่นะครับ ตัวอย่างเช่น ผมพิมพ์ button เป็น buttom ก็ผิด
***หมายเหตุ ศัพท์ directive นี้กล่าวถึงความสามารถของ angular ครับ ตอนนี้ปล่อยผ่านไปก่อน
ก่อนจะไปต่อ ผมอยากให้เพื่อนๆทดลองเพิ่มโค้ดต่อไปนี้ลงไป
เป็นการเพิ่มการคลิกให้กับปุ่มครับ เรียกว่า click event ซึ่งแบบฉบับของ angular เขา (ปล่อยผ่านไปก่อน) เมื่อคลิกแล้วก็จะให้ทำงานเมธอด (public method) ที่ชื่อว่า onClickedButton (ชื่อนี้แล้วแต่จะตั้งนะ ตามใจ)
ซึ่งเราจะต้องไปสร้าง method นี้ไว้รองรับก่อน ไม่งั้นเจอ error (ดูได้ที่ F12) จึงต้องไปเปิด component ที่ชื่อ home.ts แล้วเพิ่มโค้ดต่อไปนี้
และนี่คือผลลัพธ์ที่เกิดขึ้นเมื่อคลิกเล่นที่ปุ่มไปห้าครั้ง
หลังจากเพื่อนๆเล่นกับปุ่มจนหนำใจแล้ว ก็ลองไปเล่นตัวอื่นๆที่สนใจดูนะครับ ได้ไม่ได้อย่างไรก็เอามาบอกกัน สวัสดีครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น