Ionic: การทำ Icons และ Splash Screens

เตรียมไฟล์ icon (icon.png) และ Splash Screens (splash.png) โดยนำไปไว้ในโฟลเดอร์ resources

ไฟล์ที่ใช้เตรียมเป็น Splash Screens ควรมีขนาด 1920×1920 พิกเซล
โดยมีสีพื้นทั้งภาพ และเอาภาพที่ต้องการจริงๆอยู่ตรงกลางภาพ

เมื่อเตรียมทั้ง 2 ไฟล์ เสร็จ ต่อมาก็ใช้คำสั่ง ionic cordova resources เพื่อทำการ crop และ resize images

ดูวิธีใช้คำสั่ง

สั่งสำหรับ android

 

Link

Ionic: Icons

src/pages/home/home.html

src/pages/home/home.scss

บรรทัดที่ 4 : font-size ไว้ปรับขนาดของ icon

https://ionicframework.com/docs/components/#icons

Ionic: Checkbox

Ionic: Cards

src/pages/home/home.html

 

Lists In Cards

 

Images In Cards
ภาพที่ใช้ โดยเอาไปไว้ใน src\assets\imgs

 

Background Images

src/pages/home/home.html

src/pages/home/home.scss

 

Social Cards

src/pages/home/home.html

src/pages/home/home.scss

 

Map Cards

src/pages/home/home.html

src/pages/home/home.scss

Ionic: Badges

Badges are small components that typically communicate a numerical value to the user. They are typically used within an item.

ในรูปใช้ Badge เน้นตัวเลข โดยสามารถกำหนดสีต่างๆได้

Continue reading

Functions

Dart is a true object-oriented language, so even functions are objects and have a type, Function.

บรรทัดที่ 8 : การประกาศฟังก์ชัน
บรรทัดที่ 12 : การประกาศฟังก์ชัน แบบไม่ระบุชนิดของตัวแปร และชนิดของ returnt type
บรรทัดที่ 16 : การประกาศฟังก์ชันแบบ shorthand syntax
บรรทัดที่ 18 : การประกาศฟังก์ชันแบบ shorthand syntax ร่วมกับการใช้ conditional expression

Optional positional parameters
ใส่พารามิเตอร์ใน [] ทำให้กลายเป็น optional parameters

Default parameter values

กำหนด List และ Map เป็น default value

จะได้

The main() function

รันทาง command line จะไม่แสดง error ของ assert

ต้องใส่ --enable-asserts ด้วย ก็จะแสดง error ของ assert

ทีนี้ใส่พารามิเตอร์ไป 2 ตัวคือ 1 test ก็จะผ่านละ ไม่ error

Pass a function as a parameter to another function

จะได้

ลองเขียนฟังก์ช้นด้วย shorthand syntax

ฟังก์ชันซ้อนอยู่ใน ฟังก์ชันได้

Assign a function to a variable

Anonymous functions

หรือ

จะได้

ขอบเขตของตัวแปร (Lexical scope)

Lexical closures

Testing functions for equality

Return values
ปกติฟังก์ชันจะคืนค่า ถ้าไม่กำหนด return ก็จะได้คืนค่าเป็น null
ยกเว้นเรากำหนด void ไว้หน้าฟังก์ชัน ฟังก์ชันก็จะไม่คืนค่า

 

Link

Dart: HelloWorld

  1. HelloWorld
  2. การเรียกใช้ฟังก์ชัน
  3. การ print ตัวแปร และ expression
  4. การประกาศตัวแปร
  5. Default value และการใช้ assert()
  6. Final และ const

Continue reading

Beauty

res/values/colors.xml

style.xml