Kể tử version SDK version: 2.25.0 và Zalo: 23.02.01.r2, bạn có thể cấu hình tuỳ chỉnh các thành phần chính trên Mini App, từ đây có thêm không gian hiển thị giao diện Mini App, tuy nhiên một số phần của giao diện có thể sẽ bị che trên các thiết bị cutout, hay Home Indicator trên iOS,... Khi gặp vấn đề trên, bạn cần thêm các khoảng trống an toàn vào trên/dưới vào các thành phần bị ảnh hưởng. Chúng tôi cung cấp các css variables để hỗ trợ bạn dễ dàng xử lý vấn đề này:

• --zaui-safe-area-inset-top: Khoảng an toàn phía trên, tính theo px, trường hợp không bị ảnh hưởng giá trị sẽ là 0
• --zaui-safe-area-inset-bottom: Khoảng an toàn phía dưới, tính theo px, trường hợp không bị ảnh hưởng giá trị sẽ là 0

Đối với các Components của bộ thư viện zmp-ui như Header, BottomNavigation, Sheet Action,... kể tử version 1.6.0 đã được thêm các khoảng an toàn, UI sẽ không bị ảnh hưởng khi bạn bật chế độ toàn màn hình (ẩn Action Bar và Status Bar, ẩn Safe Area Bottom trên iOS,...)

Example

.page-content {
  padding-top: var(--zaui-safe-area-inset-top, 16px);
  padding-bottom: var(--zaui-safe-area-inset-bottom, 16px);
}