Ionic 4.1 มาแล้ว

เมื่อวานเล่าถึง Microsoft อัพเดตตัว Bot Framework ที่เพิ่มการรองรับ LINE Chatbot ไป วันนี้ Ionic ก็ปล่อยอัพเดตเวอร์ชั่น 4.1 รหัส “Hydrogen” มาแล้ว มีอะไรใหม่มั่งมาดูกัน

เพิ่มความสามารถของ Skeleton Text

ion-skeleton-text ที่ใช้ในการแสดงข้อมูลที่ “ยังโหลดไม่เสร็จ” ได้ดีมาก และในเวอร์ชั่นล่าสุด Ionic 4.1 ก็ปรับให้เราสามารถใช้ ion-skeleton-text ใน ion-avatar กับ ion-thumbnail แล้วครับ

ดูตัวอย่างด้านล่างกันเลย

<ion-item>
  <ion-avatar slot="start">
    <ion-skeleton-text animated></ion-skeleton-text>
  </ion-avatar>
  <ion-label>
    <h2><ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text></h2>
    <p><ion-skeleton-text animated style="width: 180px;"></ion-skeleton-text></p>
    <p><ion-skeleton-text animated style="width: 80px;"></ion-skeleton-text></p>
  </ion-label>
</ion-item>

นอกเหนือจากนั้น ion-skeleton-text ยังรองรับการกำหนดรูปร่างต่างๆ ด้วย CSS ด้วย เช่น border-radius, width, และ height

การเลือก Checkboxes แบบกลุ่ม

ในเวอร์ชั่นล่าสุด ion-checkbox มี properties ตัวใหม่ชื่อ indeterminate ซึ่งจะทำให้ checkbox สามารถ

• เลือกตัวเลือกย่อยทั้งหมด
• แสดงสถานะพิเศษ เมื่อเลือกตัวเลือกย่อยบางตัวเท่านั้น

เพิ่ม CSS Class ในการควบคุมการแสดงผล

มีการสร้าง CSS Class ใหม่เข้ามาเพื่อให้สะดวกในการกำหนดการแสดงผลของ Component ต่างๆ ในแอพของเรา โดยเฉพาะเมื่อต้องการกำหนดแบบ Responsive ด้วย

1. มี ion-hide class สำหรับใช้ซ่อน component
2. สามารถกำหนด class ให้ทำงานในขนาดความกว้างต่างๆ ได้ เช่น .ion-hide-sm, .ion-hide-lg

ซึ่งถ้าอยากใช้งาน Class ใหม่นี้ ให้เพิ่มคำสั่ง import ด้านล่างเข้าไปใน global.css ของโปรเจคเรา

@import '~@ionic/angular/css/display.css';

อ้างอิง – Ionic Blog